Thay đổi hiển thị giá sản phẩm biến thể woocommerce

Thông thường sản phẩm có biến thể là loại sản phẩm có nhiều đặc tính khác nhau như màu sắc, kích thước, dung lượng,… Điển hình như là các sản phẩm quần áo, giày dép, điện thoại. Cùng với việc có nhiều biến thể, thì giá thành của mỗi biến thể sẽ khác nhau. Ví dụ như điện thoại thì dung lượng màu sắc khác nhau thì giá sẽ khác nhau. WooCommerce mặc định hiển thị khá tù nên bài viết này sẽ hướng dẫn các bạn chỉnh lại giá hiện thị trực tiếp lên giá mặc định của sản phẩm mà khổng phải hiện thị 2 lần giá như ảnh khá là bất tiện và không đúng.

Bạn chèn đoạn code bên dưới vào file functions.php của child theme nhé,  để thay đổi hiển thị giá sản phẩm biến thể woocommerce.

// Woofocus - show variation price on pricing area snippet starts here
add_action( 'woocommerce_short_description', 'wf_move_variations_single_price', 1 );
function wf_move_variations_single_price(){
    global $product, $post;
    if ( $product->is_type( 'variable' ) ) {
        add_action( 'woocommerce_short_description', 'wf_replace_variation_single_price', 10 );
    }
}

function wf_replace_variation_single_price() {
    ?>
    <style>
        .woocommerce-variation-price {
            display: none;
        }
    </style>
    <script>
        jQuery(document).ready(function($) {
            var priceselector = '.product p.price';
            var originalprice = $(priceselector).html();

            $( document ).on('show_variation', function() {
                $(priceselector).html($('.single_variation .woocommerce-variation-price').html());
            });
            $( document ).on('hide_variation', function() {
                $(priceselector).html(originalprice);
            });
        });
    </script>
    <?php
}
// Woofocus - show variation price on pricing area snippet ends here

Nếu để dùng AJAX thay thế nhanh hơn thì bạn thay đoạn code trên bằng đoạn code này nhé

if( $product->is_type('variable') ):
?><style> .woocommerce-variation-price {display:none;} </style>
<script>
jQuery(function($) {
    var p = 'p.price'
        q = $(p).html();

    $('form.cart').on('show_variation', function( event, data ) {
        if ( data.price_html ) {
            $(p).html(data.price_html);

        }
    }).on('hide_variation', function( event ) {
        $(p).html(q);
    });
});
</script>
<?php
endif;