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

Thảo luận trong 'Mã nguồn mở Wordpress' bắt đầu bởi admin, 17/9/20.

  1. admin
    Tham gia ngày:
    22/5/13
    Bài viết:
    4,983
    Đã được thích:
    1,212
    Điểm thành tích:
    113
    Giới tính:
    Nam
    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):
    them-pha-tram-percent-vao-danh-sach-san-pham.jpg

    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;
                    
    $percentageround((( ( $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'103);
    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();
    }
     
    Cảm ơn đã xem bài:

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

    Chỉnh sửa cuối: 23/1/21