Người Viết : ViKiMi Editor

Thông tin Giảm giá sản phẩm WooCommerce hiển thị tốt nhất sử dụng Code tuỳ chỉnh
WooCommerce cho phép tuỳ chỉnh rất nhiều những thông tin về sản phẩm. Do đó, có một Website buôn bán Online có khả năng hiển thị tốt bắt buộc phải tiến hành tuỳ chỉnh nhiều chi tiết cần thiết. Đặc biệt, với trang sản phẩm là một phần buộc lòng phải thực hiện tuỳ chỉnh nhiều, tại những vị trí yêu cầu hiển thị tốt hơn.
Tuỳ chỉnh, thông tin Giảm giá / Sale của một sản phẩm thực sự yêu cầu phải có. Và một Lập Trình Viên & Nhà Phát Triển phải thực hiện để có một hiển thị tốt nhất.
+ Nhằm tạo các thông tin giảm giá hiệu quả
+ Thúc đẩy doanh số bán hàng
A ) Single Product Page là nơi cần thực hiện tuỳ chỉnh nhiều nhất. Để đem lại kết quả như mong muốn.
Vị Trí file : plugins\ woocommerce\ templates\ content-single-product.php
Đây là file giúp hiển thị Sản Phẩm của WooCommerce.
1 ) Chúng ta sẽ tiến hành tuỳ chỉnh để thông tin Giảm giá / Sale cho Sản Phẩm
+ Content-single-product.php chứa nội dung code :
…. <div id="product-<?php the_ID(); ?>" <?php wc_product_class( '', $product ); ?>> <?php /** * Hook: woocommerce_before_single_product_summary. * * @hooked woocommerce_show_product_sale_flash - 10 * @hooked woocommerce_show_product_images - 20 */ do_action( 'woocommerce_before_single_product_summary' ); ?> ….
Dựa theo đoạn Code phía trên, chúng ta thấy rằng Hook giúp hiển thị thông tin Giảm giá / Sale là : woocommerce_before_single_product_summary
Vậy chúng ta sẽ tiến hành tuỳ chỉnh sử dụng Hook này.
1.1 >> Cách 1 : Tuỳ chỉnh thông tin Giảm giá / Sale bằng cách sử dụng Hook và Filter tại function.php
+ Cách 1-1 Sử dụng Hook woocommerce_before_single_product_summary
Tại file function.php chúng thêm đoạn Code như sau :
remove_action( 'woocommerce_before_single_product_summary', 'woocommerce_show_product_sale_flash', 10); add_action( 'woocommerce_before_single_product_summary', 'woocommerce_custom_badge', 10); function woocommerce_custom_badge() { global $post, $product; if ( ! $product->is_in_stock() ) return; //$sale_price = get_post_meta( $product->id, '_price', true); $regular_price = method_exists( $product, 'get_regular_price' ) ? $product->get_regular_price() : $product->regular_price; //$regular_price = get_post_meta( $product->id, '_regular_price', true); $sale_price = method_exists( $product, 'get_sale_price' ) ? $product->get_sale_price() : $product->sale_price; if (empty($regular_price)){ //then this is a variable product $available_variations = $product->get_available_variations(); $variation_id=$available_variations[0]['variation_id']; $variation= new WC_Product_Variation( $variation_id ); $regular_price = $variation ->regular_price; $sale_price = $variation ->sale_price; } $sale = ceil(( ($regular_price - $sale_price) / $regular_price ) * 100); echo '<span class="onsale">Save ' . $sale . '%</span>'; }
Bước 1 : Chúng ta thực hiện Remove function đã thêm vào Hook
remove_action( ‘woocommerce_before_single_product_summary’, ‘woocommerce_show_product_sale_flash’, 10);
Bước 2 : Thêm chức năng tuỳ chỉnh của chúng ta vào Hook
add_action( ‘woocommerce_before_single_product_summary’, ‘woocommerce_custom_badge’, 10);
+ Cách 1-2 Sử dụng Filter woocommerce_sale_flash
Tại file function.php chúng thêm đoạn Code như sau :
add_filter( 'woocommerce_sale_flash', 'woocommerce_custom_badge', 10, 3 );
function woocommerce_custom_badge( $output_html, $post, $product ) {
// Added compatibility with WC +3
$regular_price = method_exists( $product, 'get_regular_price' ) ? $product->get_regular_price() : $product->regular_price;
$sale_price = method_exists( $product, 'get_sale_price' ) ? $product->get_sale_price() : $product->sale_price;
$saved_price = wc_price( $regular_price - $sale_price );
$output_html = '<span class="onsale">' . esc_html__( 'Save', 'woocommerce' ) . ' ' . $saved_price . '</span>';
return $output_html;
}
1.2 >> Cách 2 : Thực hiện tuỳ chỉnh tại File
plugins\ woocommerce\ templates\ single-product\ sale-flash.php
Chúng ta đang thực hiện cho trang sản phẩm / Single Product Page
Vậy chúng ta sẽ truy cập phần hiển thị thông tin cho trang sản phẩm, và tiến hành tuỳ chỉnh.
Tại file sale-flash.php chúng ta có :
Code cũ :
if ( ! defined( 'ABSPATH' ) ) {
exit; // Exit if accessed directly
}
global $post, $product;
?>
<?php if ( $product->is_on_sale() ) : ?>
<?php echo apply_filters( 'woocommerce_sale_flash', '<span class="onsale">' . esc_html__( 'Sale!', 'woocommerce' ) . '</span>', $post, $product ); ?>
<?php
endif;
Tiến hành Comment Code cũ và thêm vào nội dung code mới để hiển thị thông tin Giảm giá / Sale Flash cho Sản Phẩm.
Code mới :
<?php
if ( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly
global $post, $product;
if ( ! $product->is_in_stock() ) return;
$regular_price = method_exists( $product, 'get_regular_price' ) ? $product->get_regular_price() : $product->regular_price; $sale_price = method_exists( $product, 'get_sale_price' ) ? $product->get_sale_price() : $product->sale_price;
if (empty($regular_price)){ //then this is a variable product
$available_variations = $product->get_available_variations();
$variation_id=$available_variations[0]['variation_id'];
$variation= new WC_Product_Variation( $variation_id );
$regular_price = $variation ->regular_price;
$sale_price = $variation ->sale_price;
}
$sale = ceil(( ($regular_price - $sale_price) / $regular_price ) * 100);
?>
<?php if ( !empty( $regular_price ) && !empty( $sale_price ) && $regular_price > $sale_price ) : ?>
<?php echo apply_filters( 'woocommerce_sale_flash', '<span class="onsale">-' . $sale . '%</span>', $post, $product );?>
<?php endif; ?>
Như vậy, chúng ta đã tiến hành tuỳ chỉnh thành công thông tin Giảm giá / Sale Flash của sản phẩm. Đây là những cách tiến hành đơn giản và đạt hiệu quả hiển thị trên trang sản phẩm của WooCommerce. Tất cả các thông tin trên Single Product Page / Trang thông tin sản phẩm đều có thể tiến hành tuỳ chỉnh và có được hiệu quả hiển thị.