Hướng dẫn thay đổi cách hiển thị giảm giá bắt mắt người xem trong Woocommerce

Thay Doi Cach Hien Thi Giam Gia

Code dưới đây giúp bạn thay đổi cách hiển thị giảm giá một cách bắt mắt người xem. Gây ấn tượng và đầy đủ thông tin khách cần biết.

Thay Doi Cach Hien Thi Giam Gia

Các bạn chỉ cần thêm đoạn code sau vào functions.php của theme đang kích hoạt là được. Chú ý là code đã bao gồm css nếu không thích dạng này thì các bác tự thay css nha

/*Sale price by devvn - levantoan.com*/
function woocommerce_template_single_price(){
    global $product;
    if($product->is_on_sale() && ($product->is_type( 'simple' ) || $product->is_type( 'external' )) ) {
        $sale_price = $product->get_sale_price();
        $regular_price = $product->get_regular_price();
        if($sale_price)
        $sale = round( ( ( floatval( $regular_price ) - floatval( $sale_price ) ) / floatval( $regular_price ) ) * 100 );
        $sale_amout = $regular_price - $sale_price;
        ?>
        <style>
            .devvn_single_price {
                background-color: #199bc42e;
                border: 1px dashed #199bc4;
                padding: 10px;
                border-radius: 3px;
                -moz-border-radius: 3px;
                -webkit-border-radius: 3px;
                margin: 0 0 10px;
                color: #000;
            }
            .devvn_single_price span.label {
                color: #333;
                font-weight: 400;
                font-size: 14px;
                padding: 0;
                margin: 0;
                float: left;
                width: 82px;
                text-align: left;
                line-height: 18px;
            }
            .devvn_single_price span.devvn_price .amount {
                font-size: 14px;
                font-weight: 700;
                color: #ff3a3a;
            }
            .devvn_single_price span.devvn_price del .amount, .devvn_single_price span.devvn_price del {
                font-size: 14px;
                color: #333;
                font-weight: 400;
            }
        </style>
        <div class="devvn_single_price">
            <div>
                <span class="label">Giá:</span>
                <span class="devvn_price"><?php echo wc_price($sale_price);?></span>
            </div>
            <div>
                <span class="label">Thị trường:</span>
                <span class="devvn_price"><del><?php echo wc_price($regular_price);?></del></span>
            </div>
            <div>
                <span class="label">Tiết kiệm:</span>
                <span class="devvn_price sale_amount"> <?php echo wc_price($sale_amout);?> (<?php echo $sale;?>%)</span>
            </div>
        </div>
        <?php
    }else{
        ?>
        <p class="<?php echo esc_attr( apply_filters( 'woocommerce_product_price_class', 'price' ) );?>"><?php echo $product->get_price_html(); ?></p>
        <?php
    }
}

Chúc các bạn thành công ^^

Nguồn: Lê Văn Toản

Related Post

Để lại một bình luận

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 *

0336931028
Facebook Skype Youtube Chat FB