Code Giá Mặc định Và Giá Biến Thể Woocommerce

Để hiển thị giá mặc định của sản phẩm khi chưa chọn biến thể và chỉ hiển thị giá biến thể đã chọn khi người dùng chọn một biến thể (trong Woocommerce), bạn có thể sử dụng JavaScript kết hợp với hook của Woocommerce.

Code value mặc định và giá biến thể Woocommerce

Xem thêm: Hướng dẫn Custom giá sản phẩm Woocommerce

Thêm code giá mặc định và sau khi nhấn vào biến thể

Chèn đoạn mã hóa vào tập functions.php của chủ đề:

add_action('woocommerce_single_product_summary', 'add_vat_text_to_prices', 15);
function add_vat_text_to_prices() {
    global $product;
    echo '<div class="custom_price">';
    if ($product->is_type('variable')) {
        // Giá mặc định
        echo '<div class="default-price" style="display: block;"><div class="flex-price">' . $product->get_price_html() . ' <span class="vat-text">*Giá đã bao gồm VAT</span></div></div>';

        // Giá biến thể
        echo '<div class="variation-price" style="display: none;"></div>';
        
        // Thông báo liên hệ khi không có giá hoặc hết hàng
        echo '<div class="variation-contact" style="display: none; color: red;">Liên hệ</div>';
    } else {
        // Giá mặc định cho sản phẩm đơn giản
        if ($product->get_price() > 0 && $product->is_in_stock()) {
            echo '<div class="default-price"><div class="flex-price">' . $product->get_price_html() . ' <span class="vat-text">*Giá đã bao gồm VAT</span></div></div>';
        } else {
            echo '<div class="default-contact" style="color: red;">Liên hệ</div>';
        }
    }
    echo '</div>';
}

add_action('woocommerce_single_product_summary', 'add_vat_text_to_prices', 15);

function add_vat_text_to_prices() {

global $product;

echo '<div class="custom_price">';

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

// Giá mặc định

echo '<div class="default-price" style="display: block;"><div class="flex-price">' . $product->get_price_html() . ' <span class="vat-text">*Giá đã bao gồm VAT</span></div></div>';

// Giá biến thể

echo '<div class="variation-price" style="display: none;"></div>';

// Thông báo liên hệ khi không có giá hoặc hết hàng

echo '<div class="variation-contact" style="display: none; color: red;">Liên hệ</div>';

} else {

// Giá mặc định cho sản phẩm đơn giản

if ($product->get_price() > 0 && $product->is_in_stock()) {

echo '<div class="default-price"><div class="flex-price">' . $product->get_price_html() . ' <span class="vat-text">*Giá đã bao gồm VAT</span></div></div>';

} else {

echo '<div class="default-contact" style="color: red;">Liên hệ</div>';

}

echo '</div>';

}

JavaScript để kiểm tra biến thể

Cập nhật JavaScript để thêm đoạn văn bản “Giá đã bao gồm VAT” khi hiển thị giá biến thể:

add_action('wp_footer', 'variation_price_vat_script');
function variation_price_vat_script() {
    if (is_product()) : ?>
        <script>
            jQuery(function($) {
                // Khi một biến thể được chọn
                $('form.variations_form').on('show_variation', function(event, variation) {
                    $('.default-price').hide(); // Ẩn giá mặc định
                    $('.variation-contact').hide(); // Ẩn thông báo liên hệ

                    if (variation.is_in_stock) {
                        if (variation.display_price > 0) {
                            // Hiển thị giá biến thể và thêm VAT text
                            $('.variation-price').html(variation.price_html + ' <span class="vat-text">(Giá đã bao gồm VAT)</span>').show();
                        } else {
                            // Nếu giá = 0, hiển thị thông báo liên hệ
                            $('.variation-price').hide();
                            $('.variation-contact').show();
                        }
                    } else {
                        // Nếu hết hàng, hiển thị thông báo liên hệ
                        $('.variation-price').hide();
                        $('.variation-contact').show();
                    }
                });

                // Khi không có biến thể nào được chọn
                $('form.variations_form').on('reset_data', function() {
                    $('.variation-price').hide(); // Ẩn giá biến thể
                    $('.variation-contact').hide(); // Ẩn thông báo liên hệ
                    $('.default-price').show(); // Hiển thị giá mặc định
                });
            });
        </script>
    <?php endif;
}

add_action('wp_footer', 'variation_price_vat_script');

function variation_price_vat_script() {

if (is_product()) : ?>

jQuery(function($) {

// Khi một biến thể được chọn

$('form.variations_form').on('show_variation', function(event, variation) {

$('.default-price').hide(); // Ẩn giá mặc định

$('.variation-contact').hide(); // Ẩn thông báo liên hệ

if (variation.is_in_stock) {

if (variation.display_price > 0) {

// Hiển thị giá biến thể và thêm VAT text

$('.variation-price').html(variation.price_html + ' <span class="vat-text">(Giá đã bao gồm VAT)</span>').show();

} else {

// Nếu giá = 0, hiển thị thông báo liên hệ

$('.variation-price').hide();

$('.variation-contact').show();

}

} else {

// Nếu hết hàng, hiển thị thông báo liên hệ

$('.variation-price').hide();

$('.variation-contact').show();

}

});

// Khi không có biến thể nào được chọn

$('form.variations_form').on('reset_data', function() {

$('.variation-price').hide(); // Ẩn giá biến thể

$('.variation-contact').hide(); // Ẩn thông báo liên hệ

$('.default-price').show(); // Hiển thị giá mặc định

});

</script>

<?php endif;

}

Xem thêm bài viết khác

Kết quả:

1.Sản phẩm đơn giản:

Hiển thị giá mặc định với văn bản đoạn: “Giá đã bao gồm VAT” .
Nếu giá = 0 hoặc hết hàng: Hiển thị thông tin liên hệ.

2.Sản phẩm biến thể:

Khi chọn biến thể:
Nếu biến có thể có giá > 0 và còn hàng: Hiển thị giá biến có thể kèm theo đoạn văn bản “Giá đã bao gồm VAT” .
Nếu giá = 0 hoặc hết hàng: Hiển thị thông tin liên hệ.
Khi biến chưa được chọn: Hiển thị giá mặc định với văn bản đoạn “Giá đã bao gồm VAT” .

Theo dỗi tên trên Fanpage và Youtube của mình nhé.

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