Hiển thị % giảm giá thay cho chữ “Sale” hay “Giảm giá” là một hành động nhỏ nhưng mang lại hiệu quả bán hàng khá cao, khi người mua nhìn thấy số lượng tiền mà họ tiết kiệm được. Cách thay đổi chữ “sale” mặc định của woocommerce có nhiều cách, và cũng có plugin hỗ trợ, tuy nhiên đây có thể là cách đơn giản nhất nếu bạn muốn thực hiện ý đồ này.

Hiển thị % giảm giá cho woocommerce

Nếu các bạn chưa có file sale-flash.php trong theme thì các bạn làm như sau. Tạo file sale-flash.php trong thư mục [your-theme]/woocommerce/loop/ với nội dung file sale-flash.php như sau:

<?php
/**
 * Product loop sale flash
 *
 * This template can be overridden by copying it to yourtheme/woocommerce/loop/sale-flash.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.
 *
 * @author        WooThemes
 * @package    WooCommerce/Templates
 * @version     1.6.4
 */
if ( ! defined( 'ABSPATH' ) ) {
   exit; // Exit if accessed directly
}
global $post, $product;
if ( ! $product->is_in_stock() ) return;
$sale_price = get_post_meta( $product->get_id(), '_price', true);
$regular_price = get_post_meta( $product->get_id(), '_regular_price', true);
if (empty($regular_price)){
    $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);
if ( !empty( $regular_price ) && !empty( $sale_price ) && $regular_price > $sale_price ) :
   $R = floor((255*$sale)/100);
   $G = floor((255*(100-$sale))/100);
   $bg_style = 'background:none;background-color: rgb(' . $R . ',' . $G . ',0);';
   echo apply_filters( 'woocommerce_sale_flash', '<span class="onsale" style="'. $bg_style .'">-' . $sale . '%</span>', $post, $product );
endif;
Thế là xong, bạn có thể tùy chỉnh đôi chút về màu sắc, hiển thị ở phần cuối, đoạn này
$bg_style = 'background:none;background-color: rgb(' . $R . ',' . $G . ',0);';
   echo apply_filters( 'woocommerce_sale_flash', '<span class="onsale" style="'. $bg_style .'">-' . $sale . '%</span>', $post, $product );
endif;
Chúc bạn thành công!

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *