1BANNER 123
5/5 - (166 bình chọn)

Update code mới ở cuối bài

Biến thể sản phẩm là một trong những phần hay nhất của woocommerce, tuy nhiên mình cực kì ghét thằng này ^^.

Sau đây mình sẽ hướng dẫn các bạn cách để thay thế giá của sản phẩm biến thể vào đúng vị trí hiển thị khoản giá nhé.

Ban đầu giá biến thể sẽ hiển thị như thế này:

Hiển thị khoản giá biến thể

Khi chọn biến thể thì nó sẽ hiển thị như thế này

Giá biển thể hiển thị vị trí mặc định

Thay đổi vị trí hiển thị giá biến thể.

Để thay đổi vị trí hiển thị giá biến thể thì đầu tiên chúng ta phải remove cái kiểu hiển thị giá cũ đi, bằng đoạn function sau:

add_action( 'woocommerce_before_single_product', 'check_variable' );
function check_variable(){
    if ( is_product() ) {
        global $post;
        $product = wc_get_product( $post->ID );
        if ( $product->is_type( 'variable' ) ) {
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_price', 10 );

Mình chưa đóng function trên nên mọi ng phải copy 2 function theo thứ tự nhé

Sau đó chúng ta sẽ tạo một template hiển thị giá mới bằng đoạn function sau:

add_action( 'woocommerce_single_product_summary', 'custom_wc_template_single_price', 10 );
function custom_wc_template_single_price(){
    global $product;

if($product->is_type('variable')):

    // Main Price
    $prices = array( $product->get_variation_price( 'min', true ), $product->get_variation_price( 'max', true ) );
    $price = $prices[0] !== $prices[1] ? sprintf( __( '%1$s', 'woocommerce' ), wc_price( $prices[0] ) ) : wc_price( $prices[0] );

    // Sale Price
    $prices = array( $product->get_variation_regular_price( 'min', true ), $product->get_variation_regular_price( 'max', true ) );
    sort( $prices );
    $saleprice = $prices[0] !== $prices[1] ? sprintf( __( '%1$s', 'woocommerce' ), wc_price( $prices[0] ) ) : wc_price( $prices[0] );

    if ( $price !== $saleprice && $product->is_on_sale() ) {
        $price = '<del>' . $saleprice . $product->get_price_suffix() . '</del> <ins>' . $price . $product->get_price_suffix() . '</ins>';
    }

    ?>
    <style>
        div.woocommerce-variation-price,
        div.woocommerce-variation-availability,
        div.hidden-variable-price {
            height: 0px !important;
            overflow:hidden;
            position:relative;
            line-height: 0px !important;
            font-size: 0% !important;
        }
    </style>
    <script>
    jQuery(document).ready(function($) {
        $('input.variation_id').change( function(){
            //Correct bug, I put 0
            if( 0 != $('input.variation_id').val()){
                $('p.price').html($('div.woocommerce-variation-price > span.price').html()).append('<p class="availability">'+$('div.woocommerce-variation-availability').html()+'</p>');
                console.log($('input.variation_id').val());
            } else {
                $('p.price').html($('div.hidden-variable-price').html());
                if($('p.availability'))
                    $('p.availability').remove();
                console.log('NULL');
            }
        });
    });
    </script>
    <?php

    echo '<p class="price">'.$price.'</p>
    <div class="hidden-variable-price" >'
.$price.'</div>';

endif;
}

        }
    }
}
add_filter( 'woocommerce_variation_is_active', 'desactivar_variaciones_sin_stock', 10, 2 );
function desactivar_variaciones_sin_stock( $is_active, $variation ) {
    if ( ! $variation->is_in_stock() ) return false;
    return $is_active;
}

Như vậy là xong.

Kết quả sẽ như thế này

Hiển thị giá biến thể vào vị trí khoản giá biến thể

6 thoughts on “Hướng dẫn thay thế variable price range bằng giá biến thể.

  1. Tony says:

    Thanks bác, đang cần cái này.
    Bác hướng dẫn thêm cách hiển thị: tên + giá của biến thể dùng button giống như trang clickbuy đi bác. 😀

  2. Cedar says:

    Cảm ơn bạn đã chia sẻ.
    Mình không hiểu gì về Code nhưng có thử add vào thì thấy có 1 nhược điểm là đối với website có quản lý hàng hóa theo số lượng thực tế thì, ví dụ: 1 sản phẩm có 3 biến thể, 2 biến thể hết hàng chẳng hạn thì không click vào mấy biến thể đó để nhìn giá & tình trạng hàng của sản phẩm được, phải click vào biến thể còn hàng mới hiện.
    Khắc phục được cái này thì tuyệt vời!

Trả lời

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 *