hào mọi người ha! Nay là bài hướng dẫn hiển thị phần trăm giảm giá sản phẩm có chữ SALE upto được bố trí bắt mắt.

Thẳng vào vấn đề.

Bỏ code sau vào function.php

add_action('woocommerce_shop_loop_item_title', 'isures_2718_create_label_before_loop');
 
function isures_2718_create_label_before_loop()
{
    global $product;
 
    if ($product->is_on_sale()) {
?>
        <div class="isures-wrap--sale">
            <span>S</span>
            <span>A</span>
            <span class="wrap-upto">L<i>Upto</i></span>
            <span>E</span>
            <span class="sale-percent"><?php echo flatsome_presentage_bubble($product); ?></span>
        </div>
    <?php
    } else {
        echo '<div class="isures-reg--sale"><a href="/dang-ky-nhan-uu-dai/">Đăng ký nhận ưu đãi</a></div>';
    }
}

add_action('woocommerce_shop_loop_item_title', 'isures_2718_create_label_before_loop');

function isures_2718_create_label_before_loop()

{

global $product;

if ($product->is_on_sale()) {

</div>

<?php

} else {

echo '<div class="isures-reg--sale"><a href="/dang-ky-nhan-uu-dai/">Đăng ký nhận ưu đãi</a></div>';

}

Ok như kia là đã gọi phần trăm giảm giá của sp ra được rồi.

Để ý chút ở dòng số 18 để thay thế link để trang đăng ký nhận ưu đãi

Nội dung code trên sẽ là nếu mà có giảm giá thì hiện giảm giá , còn không có thì nhận nút đăng ký nhận ưu đãi. Nên nếu bạn không muốn hiện nút đăng ký thì chỉ cần đơn giản thay thế bằng code bên dưới

add_action('woocommerce_shop_loop_item_title', 'isures_2718_create_label_before_loop');
 
function isures_2718_create_label_before_loop()
{
    global $product;
 
    if ($product->is_on_sale()) :
?>
        <div class="isures-wrap--sale">
            <span>S</span>
            <span>A</span>
            <span class="wrap-upto">L<i>Upto</i></span>
            <span>E</span>
            <span class="sale-percent"><?php echo flatsome_presentage_bubble($product); ?></span>
        </div>
    <?php
    endif;
}

add_action('woocommerce_shop_loop_item_title', 'isures_2718_create_label_before_loop');

function isures_2718_create_label_before_loop()

{

global $product;

if ($product->is_on_sale()) :

</div>

<?php

endif;

}

Ok để thay thế vị trí hiển thị của phần phần trăm giảm giá này thì bạn có thể thay thế woocommerce_shop_loop_item_title bằng 1 trong các hook ở shop/categories .

Nice.! bây giờ làm đẹp cho code trên bằng 1 chút css chèn vào style.css của theme!

.isures-wrap--sale {
    font-weight: bold;
    font-size: 40px;
    color: #777;
    position: absolute;
    z-index: 1;
    top: -50px;
    left: 5px;
}
.isures-reg--sale{
    position: absolute;
    z-index: 99;
    top: -25px;
    left: 5px;
}
.isures-wrap--sale span{position: relative}
span.wrap-upto i {
    font-size: 9px;
    text-transform: uppercase;
    position: absolute;
    transform: rotate(-90deg);
    left: 5px;
    bottom: 20px;
    color: blue; 
    transition: all 0.2s ease-in-out
}
span.sale-percent {
    color: blue;
    transition: all 0.2s ease-in-out
}
.product-small.col:hover span.wrap-upto i, .product-small.col:hover span.sale-percent {color: red}

.isures-wrap--sale {

font-weight: bold;

font-size: 40px;

color: #777;

position: absolute;

z-index: 1;

top: -50px;

left: 5px;

}

.isures-reg--sale{

position: absolute;

z-index: 99;

top: -25px;

left: 5px;

}

.isures-wrap--sale span{position: relative}

span.wrap-upto i {

font-size: 9px;

text-transform: uppercase;

position: absolute;

transform: rotate(-90deg);

left: 5px;

bottom: 20px;

color: blue;

transition: all 0.2s ease-in-out

}

span.sale-percent {

color: blue;

transition: all 0.2s ease-in-out

}

.product-small.col:hover span.wrap-upto i, .product-small.col:hover span.sale-percent {color: red}

Lưu ý là code này mình share sử dụng cho theme flatsome, nếu bạn dùng theme wordpress khác vẫn sử dụng được hãy bổ sung thêm code bên dưới vào function.php

function flatsome_presentage_bubble( $product ) {
    $post_id = $product->get_id();
 
    if ( $product->is_type( 'simple' ) || $product->is_type( 'external' ) || $product->is_type( 'variation' ) ) {
        $regular_price  = $product->get_regular_price();
        $sale_price     = $product->get_sale_price();
        $bubble_content = round( ( ( floatval( $regular_price ) - floatval( $sale_price ) ) / floatval( $regular_price ) ) * 100 );
    } elseif ( $product->is_type( 'variable' ) ) {
        $bubble_content = flatsome_percentage_get_cache( $post_id );
        if ( $bubble_content && apply_filters( 'flatsome_sale_bubble_percentage_cache_enabled', true ) ) {
            return flatsome_percentage_format( $bubble_content );
        }
 
        $available_variations = $product->get_available_variations();
        $maximumper           = 0;
 
        for ( $i = 0; $i < count( $available_variations ); ++ $i ) {
            $variation_id     = $available_variations[ $i ]['variation_id'];
            $variable_product = new WC_Product_Variation( $variation_id );
            if ( ! $variable_product->is_on_sale() ) {
                continue;
            }
            $regular_price = $variable_product->get_regular_price();
            $sale_price    = $variable_product->get_sale_price();
            $percentage    = round( ( ( floatval( $regular_price ) - floatval( $sale_price ) ) / floatval( $regular_price ) ) * 100 );
            if ( $percentage > $maximumper ) {
                $maximumper = $percentage;
            }
        }
 
        $bubble_content = sprintf( __( '%s', 'woocommerce' ), $maximumper );
 
        // Cache percentage for variable products to reduce database queries.
        if ( apply_filters( 'flatsome_sale_bubble_percentage_cache_enabled', true ) ) {
            flatsome_percentage_set_cache( $post_id, $bubble_content );
        }
    } else {
        // Set default and return if the product type doesn't meet specification.
        $bubble_content = __( 'Sale!', 'woocommerce' );
 
        return $bubble_content;
    }
 
    return flatsome_percentage_format( $bubble_content );
}
 
 
function flatsome_percentage_format( $value ) {
    $formatting = get_theme_mod( 'sale_bubble_percentage_formatting' );
    $formatting = $formatting ? $formatting : '-{value}%';
 
    return str_replace( '{value}', $value, $formatting );
}
 
function flatsome_percentage_get_cache( $post_id ) {
    return get_post_meta( $post_id, '_flatsome_product_percentage', true );
}
 
function flatsome_percentage_set_cache( $post_id, $bubble_content ) {
    update_post_meta( $post_id, '_flatsome_product_percentage', $bubble_content );
}

function flatsome_presentage_bubble( $product ) {

$post_id = $product->get_id();

if ( $product->is_type( 'simple' ) || $product->is_type( 'external' ) || $product->is_type( 'variation' ) ) {

$regular_price = $product->get_regular_price();

$sale_price = $product->get_sale_price();

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

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

$bubble_content = flatsome_percentage_get_cache( $post_id );

if ( $bubble_content && apply_filters( 'flatsome_sale_bubble_percentage_cache_enabled', true ) ) {

return flatsome_percentage_format( $bubble_content );

}

$available_variations = $product->get_available_variations();

$maximumper = 0;

for ( $i = 0; $i < count( $available_variations ); ++ $i ) {

$variation_id = $available_variations[ $i ]['variation_id'];

$variable_product = new WC_Product_Variation( $variation_id );

if ( ! $variable_product->is_on_sale() ) {

continue;

}

$regular_price = $variable_product->get_regular_price();

$sale_price = $variable_product->get_sale_price();

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

if ( $percentage > $maximumper ) {

$maximumper = $percentage;

}

$bubble_content = sprintf( __( '%s', 'woocommerce' ), $maximumper );

// Cache percentage for variable products to reduce database queries.

if ( apply_filters( 'flatsome_sale_bubble_percentage_cache_enabled', true ) ) {

flatsome_percentage_set_cache( $post_id, $bubble_content );

}

} else {

// Set default and return if the product type doesn't meet specification.

$bubble_content = __( 'Sale!', 'woocommerce' );

return $bubble_content;

}

return flatsome_percentage_format( $bubble_content );

}

function flatsome_percentage_format( $value ) {

$formatting = get_theme_mod( 'sale_bubble_percentage_formatting' );

$formatting = $formatting ? $formatting : '-{value}%';

return str_replace( '{value}', $value, $formatting );

}

function flatsome_percentage_get_cache( $post_id ) {

return get_post_meta( $post_id, '_flatsome_product_percentage', true );

}

function flatsome_percentage_set_cache( $post_id, $bubble_content ) {

update_post_meta( $post_id, '_flatsome_product_percentage', $bubble_content );

}

Chúc bạn thành công <3.

Tham gia Group để chung vui cùng bọn mình Flatsome Group

Nguồn: https://thietkewebgiarehcm.com/tao-label-sale-up-to-percent-cho-san-pham-dang-giam-gia-cuc-dep-flatsome/

Flatsome

Tạo label “Sale Up To Percent” cho sản phẩm đang giảm giá CỰC ĐẸP – [Flatsome]

Trả lời Hủy

Trả lời Hủy

Đăng ký nhận báo giá & khuyến mãi

Đăng nhập