Người Viết : ViKiMi Editor

Thực hiện Tuỳ Chỉnh Giá của Sản Phẩm tại Trang Sản Phẩm (WooCommerce Product Price)
Chắc hẳn bạn sẽ thắc mắc làm cách nào để có thể tạo một hiển thị Giá của Sản phẩm thật ấn tượng để khiến khách hàng có thể sẵn sàng mua sản phẩm của của hàng. Tất nhiên, khi khách hàng ấn tượng họ sẽ sẵn sàng mua một sản phẩm ưng ý. Không khó khi bạn muốn tạo hiển thị giá cả của Sản phẩm muốn bán một cách tốt nhất, có thể thực hiện tạo ra hiển thị theo cách bạn muốn. Cách khiến cho khách hàng quan tâm đặc hiệt nhờ các chiến dịch giảm giá etc…
Khi bạn thực hiện tuỳ chỉnh Single Product Price, bạn sẽ cảm thấy hài lòng hơn nhiều so với cách mà WooCommerce thực hiện mặc định. Tỷ lệ khách hàng được giữ chân và mua sản phẩm cũng dựa vào giao diện cung cấp có ấn tượng và hài lòng hay không!
+ Thật tiện ích khi khách hàng không cần tốn nhiều thời gian vẫn có thể tìm kiếm các thông tin cần thiết
+ Thật tiện ích khi Khách hàng luôn tìm thấy giá ưu đãi một cách nhanh chóng, đầu tiên khi ghé thăm cửa hàng
+ Nhờ có một chế độ tốt trực quan mà chiến dịch Giảm giá cũng luôn tốt nhất
Tuỳ chỉnh là cách dễ dàng + thuận tiện khi bạn muốn có hiển thị Giá của Sản Phẩm đẹp mắt & giữ chân khách hàng.
Nội dung dưới đây sẽ giúp bạn thực hiện tuỳ chỉnh thông tin Giá của Sản Phẩm / Single Product Price :
Chúng ta có trang hiển thị sản phẩm được thiết kế tại File :
wp-content\ plugins\ woocommerce\ templates\ content-single-product.php
+ Tại đây chúng ta cần chú ý đoạn code sau :
<div class="summary entry-summary"> <?php /** * Hook: woocommerce_single_product_summary. * * @hooked woocommerce_template_single_title - 5 * @hooked woocommerce_template_single_rating - 10 * @hooked woocommerce_template_single_price - 10 * @hooked woocommerce_template_single_excerpt - 20 * @hooked woocommerce_template_single_add_to_cart - 30 * @hooked woocommerce_template_single_meta - 40 * @hooked woocommerce_template_single_sharing - 50 * @hooked WC_Structured_Data::generate_product_data() - 60 */ do_action( 'woocommerce_single_product_summary' ); ?> </div>
Không khó để nhận ra Hook sử dụng :
– woocommerce_single_product_summary
& Chức năng được thực hiện là :
– woocommerce_template_single_price & Mức ưu tiên là 10
Vậy chúng ta có thể có những Cách nào để tuỳ chỉnh Single Product Price tại trang Sản Phẩm. Chúng có 2 cách cơ bản để thực hiện công việc này. Đây là 2 cách mà chúng ta có thể thực hiện tại thư mục Theme kích hoạt (Bao gồm cả Child Theme)
CÁCH 1 : Thực hiện Customize Giá của sản phẩm bằng cách sử dụng Hook được cung cấp bởi WooCommerce.
Chúng ta sẽ xoá Chức năng mặc định đã thêm vào Hook & thực hiện thêm mới chức năng tuỳ chỉnh của chúng ta.
Chức năng mới : Tuỳ chỉnh giao diện hiển thị giá của sản phẩm thuận tiện cho khách hàng.
Tại Function.php thực hiện đoạn thêm đoạn mã sau :
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_price', 10 ); add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_price_custom', 10); function woocommerce_template_single_price_custom() { if ( ! defined( 'ABSPATH' ) ) { exit; // Exit if accessed directly } global $product; if( $product->is_on_sale() ){ echo "<p class=\"". esc_attr( apply_filters( 'woocommerce_product_price_class', 'price' ) ) ."\"> Regular 1 : <del style=\"text-decoration: line-through; opacity: 1; color:red;\">" . wc_price($product->get_regular_price()) . "</del></p>"; echo "<p class=\"". esc_attr( apply_filters( 'woocommerce_product_price_class', 'price' ) )."\"> <ins> Sale : ". wc_price($product->get_sale_price()) . "</ins></p>"; }else{ echo "<p class=\"". esc_attr( apply_filters( 'woocommerce_product_price_class', 'price' ) )."\"> Regular : <ins style=\"text-decoration: line-through; opacity: .5;\">". wc_price($product->get_regular_price()). "</ins></p>"; } }
Hình Ảnh Kết Quả :

CÁCH 2 : Thực hiện Ghi đè File thiết kế hiển thị Single Product Price.
File mặc định của WooCommerce là :
wp-content/ plugins /woocommerce /templates /single-product /price.php
Chúng ta có thể ghi đè File này bằng cách : Ghi đè tại Folder WooCommerce của Theme đang kích hoạt.
Chúng ta Tạo File : Yourtheme / woocommerce / single-product / price.php
Nếu bạn muốn biết các thông tin chi tiết việc thực hiện ghi đè các Template của WooCommerce (Hãy tham khảo tại đây)
Nội dung Code của price.php như sau :
<?php
/**
* Single Product Price
*
* This template can be overridden by copying it to yourtheme/woocommerce/single-product/price.php.
*
* HOWEVER, on occasion WooCommerce will need to update template files and you
* (the theme developer) will need to copy the new files to your theme to
* maintain compatibility. We try to do this as little as possible, but it does
* happen. When this occurs the version of the template file will be bumped and
* the readme will list any important changes.
*
* @see https://docs.woocommerce.com/document/template-structure/
* @package WooCommerce\Templates
* @version 3.0.0
*/
if ( ! defined( 'ABSPATH' ) ) {
exit; // Exit if accessed directly
}
global $product;
if( $product->is_on_sale() ): ?>
<p class="<?php echo esc_attr( apply_filters( 'woocommerce_product_price_class', 'price' ) ); ?>"> Regular : <del style="text-decoration: line-through; opacity: 1; color:red;"><?php echo wc_price($product->get_regular_price());?></del></p>
<p class="<?php echo esc_attr( apply_filters( 'woocommerce_product_price_class', 'price' ) ); ?>"> <ins> <?php echo 'Sale : '. wc_price($product->get_sale_price());?> </ins></p>
<?php else:?>
<p class="<?php echo esc_attr( apply_filters( 'woocommerce_product_price_class', 'price' ) ); ?>"> Regular : <ins style="text-decoration: line-through; opacity: .5;"><?php echo wc_price($product->get_regular_price());?></ins></p>
<?php endif;
+ Kết quả công việc chúng ta tạo ra cũng tương tự như trên.
+ Như vậy, Chúng ta đã có thể có 2 cách dễ dàng để tuỳ chỉnh thông tin Single Product Price
Cách Customize thông tin Single Product Price (Giá của Sản Phẩm) của WooCommerce thật dễ dàng thực hiện. Cách tuỳ chỉnh cho phép chúng ta tạo một cách hiển thị ấn tượng hơn và giúp Khách hàng có thể dễ tiếp cận sản phẩm cũng như mua sản phẩm. Khi thực hiện Customize thông tin Product Price chúng ta có giao diện không còn đơn điệu như mặc định.
Nếu bạn muốn thiết kế một Website thương mại điện tử với WooCommerce thì việc bạn phải tạo các tuỳ chỉnh bằng cách sử dụng Hook là điều gần như bắt buộc. Đồng thời bạn ghi đè các Template của WooCommerce cũng là một phương án tốt có thể thực hiện được.
Với việc tuỳ chỉnh trang hiển thị sản phẩm ( content-single-product.php ) thì bạn luôn cần xem tại File này có thể chỉnh sửa bằng cách sử dụng các Hook nào hoặc có thể ghi đè các Template nào. Chỉ cần tuân thủ những gì WooCommerce cung cấp cho bạn.
+ Tuỳ chỉnh Giá của Sản Phẩm (Single Product Price) tại Trang Sản Phẩm của WooCommerce thật dễ dàng, đem lại khả năng mua sản phẩm cao hơn, cũng như thu hút khách hàng tiềm năng cao hơn.