Đổi chữ Sale bằng phần trăm trong woocommerce của wordpress

Mặc định khi bạn chọn giảm giá cho sản phẩm ngoài màn hình sẽ hiện thêm giá bị giảm và trên đầu có nút Sale tròn hoặc chữ giảm giá hình tròn, để đổi mặc định từ chữ sale thành phần trăm giảm giá cho sản phẩm đơn giản và dễ dàng bạn làm theo hướng dẫn dưới của itseovn nhé.

Demo (Demo tạm, các bạn chèn vô có thể làm đẹp hơn, theo css):


Cách 1: thay trực tiếp trong file (tốt nhất)

Thay đổi trong teamplate code của woocommerce (làm cách 1 giúp tốc độ xử lý tốt hơn cách 2 dưới, nhưng hơi rờm rà chút)

• Bạn truy cập vào /wp-content/themes/[tên themes]/woocommerce/loop/sale-flash.php
• Và truy cập vào /wp-content/themes/[tên themes]/woocommerce/single-product/sale-flash.php
• Copy hết nội dung sau vào 2 tập tin trên.

PHP:

<?php
/**
 * Product loop sale flash
 *
 * @author     Vivek R @ WPSTuffs.com
 * @package     WooCommerce/Templates
 * @version     1.6.4
 */

if ( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly

global $post, $product;
?>
<?php if ($product->is_on_sale() && $product->product_type == 'variable') : ?>

    <div class="cs-contentsale">
            <div class="inside">
              <div class="inside-text">
                  <?php
            $available_variations = $product->get_available_variations();                             
            $maximumper = 0;
            for ($i = 0; $i < count($available_variations); ++$i) {
                $variation_id=$available_variations[$i]['variation_id'];
                $variable_product1= new WC_Product_Variation( $variation_id );
                $regular_price = $variable_product1 ->regular_price;
                $sales_price = $variable_product1 ->sale_price;
                $percentage= round((( ( $regular_price - $sales_price ) / $regular_price ) * 100),1) ;
                    if ($percentage > $maximumper) {
                        $maximumper = $percentage;
                    }
                }
                echo $price . sprintf( __('%s', 'woocommerce' ), $maximumper . '%' ); ?></div>
            </div>
     </div><!-- end callout -->

<?php elseif($product->is_on_sale() && $product->product_type == 'simple') : ?>
  
    <div class="cs-contentsale">
               <div class="inside">
                 <div class="inside-text">
                     <?php
                $percentage = round( ( ( $product->regular_price - $product->sale_price ) / $product->regular_price ) * 100 );
                echo $price . sprintf( __('%s', 'woocommerce' ), $percentage . '%' ); ?></div>
               </div>
        </div><!-- end cs-contentsale -->

<?php endif; ?>


Bạn chèn tiếp code CSS style sau vào

Mã:

.cs-contentsale {
  left: 0px;
  position: absolute;
  text-transform: uppercase;
  top: 20px;
  z-index: 9;
}

.cs-contentsale .inside {
  background-color: #e74c3c;
  border-radius: 999px;
  display: table;
  height: 42px;
  position: relative;
  width: 42px;
  -webkit-border-radius: 999px;
}

.cs-contentsale .inside .inside-text {
  color: #fff;
  display: table-cell;
  font-size: 14px;
  font-weight: bold;
  line-height: 14px;
  text-align: center;
  vertical-align: middle;
}

Cách 2: Thêm vào function.php

Thêm code vào funtion.php của themes (hạn chế thêm kiểu này sẽ làm nặng web bạn so với cách 1).

• Cách tham khảo trên web levantoan
• Truy cập vào /wp-content/themes/[tên themes]/function.php
• Chèn code sau vô

PHP:

add_filter('woocommerce_sale_flash','itseovn_woocommerce_sale_flash', 10, 3);
function itseovn_woocommerce_sale_flash($text, $post, $product){
    ob_start();
    $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) && $product->is_type( 'variable' )){
        $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( 'itseovn_woocommerce_sale_flash', '<span class="onsale" style="'. $bg_style .'">-' . $sale . '%</span>', $post, $product );
    endif;
    return ob_get_clean();
}