Trang chủ » Hiển thị giá Sale hút khách trong chi tiết sản phẩm

Hiển thị giá Sale hút khách trong chi tiết sản phẩm

Để thu hút sự quan tâm của khách hàng và thúc đẩy họ mua sản phẩm, bạn có thể điều chỉnh cách hiển thị giá giảm giá trong trang chi tiết sản phẩm. Bài viết này dành cho những bạn đang sử dụng chủ yếu theme Flatsome để xây dựng trang web bán hàng. Mã này cũng có thể áp dụng cho các theme khác, bạn có thể tham khảo để tùy chỉnh trang web của mình.

Hiển thị giá Sale bắt mắt trong chi tiết sản phẩm

Bước 1: Chép code vào function.php

Chép đoạn code sau dán vào function.php

function hwp_price_html($product, $is_variation = false){
    ob_start();
    if($product->is_on_sale()):
    ?>   
    <?php
    endif;
    if($product->is_on_sale() && ($is_variation || $product->is_type('simple') || $product->is_type('external'))) {
        $sale_price = $product->get_sale_price();
        $regular_price = $product->get_regular_price();
        if($regular_price) {
            $sale = round(((floatval($regular_price) - floatval($sale_price)) / floatval($regular_price)) * 100);
            $sale_amout = $regular_price - $sale_price;
            ?>
            <div class="hwp_single_price">
                <div>
                    <span class="hwp_price"><?php echo wc_price($sale_price); ?></span>
                </div>
                <div class="gia-chinh-hang">
                    <span class="label">Giá chính hãng:</span>
                    <span class="hwp_price"><del><?php echo wc_price($regular_price); ?></del></span><span class="label-km">-<?php echo $sale; ?>%</span>
                </div>
                <div class="tiet-kiem-box">
                    <span class="label">Tiết kiệm:</span>
                    <span class="hwp_price sale_amount"> <?php echo wc_price($sale_amout); ?> </span>
                </div>
            </div>
            <?php
        }
    }elseif($product->is_on_sale() && $product->is_type('variable')){
        $prices = $product->get_variation_prices( true );
        if ( empty( $prices['price'] ) ) {
            $price = apply_filters( 'woocommerce_variable_empty_price_html', '', $product );
        } else {
            $min_price     = current( $prices['price'] );
            $max_price     = end( $prices['price'] );
            $min_reg_price = current( $prices['regular_price'] );
            $max_reg_price = end( $prices['regular_price'] );
            if ( $min_price !== $max_price ) {
                $price = wc_format_price_range( $min_price, $max_price ) . $product->get_price_suffix();
            } elseif ( $product->is_on_sale() && $min_reg_price === $max_reg_price ) {
                $sale = round(((floatval($max_reg_price) - floatval($min_price)) / floatval($max_reg_price)) * 100);
                $sale_amout = $max_reg_price - $min_price;
                ?>
                <div class="hwp_single_price">
                    <div>
                        <span class="hwp_price"><?php echo wc_price($min_price); ?></span>
                    </div>
                    <div class="gia-chinh-hang">
                        <span class="label">Giá chính hãng:</span>
                        <span class="hwp_price"><del><?php echo wc_price($max_reg_price); ?></del></span><span class="label-km">-<?php echo $sale; ?>%</span>
                    </div>
                    <div class="tiet-kiem-box">
                        <span class="label">Tiết kiệm:</span>
                        <span class="hwp_price sale_amount"> <?php echo wc_price($sale_amout); ?> </span>
                    </div>
                </div>
                <?php
            } else {
                $price = wc_price( $min_price ) . $product->get_price_suffix();
            }
        }
        echo $price;
    }else{ ?>
        <p class="<?php echo esc_attr( apply_filters( 'woocommerce_product_price_class', 'price' ) );?>"><?php echo $product->get_price_html(); ?></p>
    <?php }
    return ob_get_clean();
}
function woocommerce_template_single_price(){
    global $product;
    echo hwp_price_html($product);
}
add_filter('woocommerce_available_variation','hwp_woocommerce_available_variation', 10, 3);
function hwp_woocommerce_available_variation($args, $thisC, $variation){
    $old_price_html = $args['price_html'];
    if($old_price_html){
        $args['price_html'] = hwp_price_html($variation, true);
    }
    return $args;
}

function hwp_price_html($product, $is_variation = false){

ob_start();

if($product->is_on_sale()):

<?php

endif;

if($product->is_on_sale() && ($is_variation || $product->is_type('simple') || $product->is_type('external'))) {

$sale_price = $product->get_sale_price();

$regular_price = $product->get_regular_price();

if($regular_price) {

$sale = round(((floatval($regular_price) - floatval($sale_price)) / floatval($regular_price)) * 100);

$sale_amout = $regular_price - $sale_price;

<div>

</div>

<span class="label">Giá chính hãng:</span>

</div>

</div>

<?php

}

}elseif($product->is_on_sale() && $product->is_type('variable')){

$prices = $product->get_variation_prices( true );

if ( empty( $prices['price'] ) ) {

$price = apply_filters( 'woocommerce_variable_empty_price_html', '', $product );

} else {

$min_price = current( $prices['price'] );

$max_price = end( $prices['price'] );

$min_reg_price = current( $prices['regular_price'] );

$max_reg_price = end( $prices['regular_price'] );

if ( $min_price !== $max_price ) {

$price = wc_format_price_range( $min_price, $max_price ) . $product->get_price_suffix();

} elseif ( $product->is_on_sale() && $min_reg_price === $max_reg_price ) {

$sale = round(((floatval($max_reg_price) - floatval($min_price)) / floatval($max_reg_price)) * 100);

$sale_amout = $max_reg_price - $min_price;

<div>

</div>

<span class="label">Giá chính hãng:</span>

</div>

</div>

<?php

} else {

$price = wc_price( $min_price ) . $product->get_price_suffix();

}

echo $price;

}else{ ?>

<p class="<?php echo esc_attr( apply_filters( 'woocommerce_product_price_class', 'price' ) );?>"><?php echo $product->get_price_html(); ?></p>

<?php }

return ob_get_clean();

}

function woocommerce_template_single_price(){

global $product;

echo hwp_price_html($product);

}

add_filter('woocommerce_available_variation','hwp_woocommerce_available_variation', 10, 3);

function hwp_woocommerce_available_variation($args, $thisC, $variation){

$old_price_html = $args['price_html'];

if($old_price_html){

$args['price_html'] = hwp_price_html($variation, true);

}

return $args;

}

Bước 2: Tuốt lại giao diện chút bằng CSS

Các bạn copy toàn bộ code CSS dưới đây vào file style.css child-theme

.hwp_single_price {
    margin-bottom: 10px;
}
.product-info .price ins bdi, .product-info .price bdi, .hwp_single_price bdi {
    font-size: 30px;
    color: #E5322D;
    text-shadow: 1px 1px 0 #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 3px 3px 5px #333;
}
.hwp_single_price .gia-chinh-hang, .hwp_single_price .gia-chinh-hang bdi {
    font-size: 14px;
    color: #565656;
    text-shadow: none;
}
del span.amount {
    opacity: 1;
}
.gia-chinh-hang .label-km {
    background: #da0000;
    padding: 3px 7px;
    color: white;
    border-radius: 3px;
}
.hwp_single_price .tiet-kiem-box {
    margin-top: 5px;
}