Thay thế giá sản phẩm biến thể bằng giá của biến thể được chọn trong WooCommerce

Thật bất ngờ, các sản phẩm biến thể với khoảng giá lại hiển thị hai mức giá: ở góc trên bên phải, bạn sẽ thấy giá của sản phẩm “gốc”, được hiển thị dưới dạng một phạm vi; nhưng khi bạn chọn một biến thể cụ thể, một mức giá thứ hai xuất hiện ngay phía trên nút “Thêm vào giỏ hàng” cho biến thể đó. Điều này có thể gây nhầm lẫn.

Trong giải pháp hôm nay, chúng ta sẽ tìm hiểu cách thay thế giá sản phẩm biến thể ở góc trên bên phải bằng giá của biến thể hiện tại, đồng thời ẩn đi giá của biến thể. Nhờ đó, bạn sẽ chỉ thấy một mức giá duy nhất trên trang sản phẩm cho các sản phẩm biến thể. Hãy cùng khám phá!

image post 12

Đoạn mã PHP: Cập nhật động giá sản phẩm biến thể theo giá của biến thể được chọn

Lưu ý: Các câu lệnh jQuery trong đoạn mã này nhắm đến các lớp CSS cụ thể để thay thế phần HTML hiển thị giá. Nếu giao diện (theme) của bạn sử dụng HTML tùy chỉnh với các lớp CSS khác, mã có thể không hoạt động. Bạn có thể điều chỉnh jQuery để phù hợp với các lớp CSS tùy chỉnh của mình.

<?php
// Thêm hành động vào footer
add_action( 'wp_footer', 'custom_update_variation_price_display' );

function custom_update_variation_price_display() {
    if ( ! is_product() ) {
        return;
    }

    global $product;

    // Lấy giá sản phẩm mặc định
    $default_price_html = $product->get_price_html();

    // Ẩn giá biến thể
    echo '<style>
    .woocommerce-variation-price {
        display: none;
    }
    </style>';

    // Enqueue JavaScript để cập nhật giá động
    wc_enqueue_js( "
        jQuery(function($) {
            $(document).on('found_variation', 'form.cart', function(event, variation) {
                if (variation.price_html) {
                    $('.summary > .price').html(variation.price_html);
                }
            });
            $(document).on('hide_variation', 'form.cart', function() {
                $('.summary > .price').html('" . $default_price_html . "');
            });
        });
    " );
}

Nếu bạn gặp khó khăn hoặc có bất kỳ thắc mắc nào, đừng ngần ngại liên hệ mình. Mình luôn sẵn sàng hỗ trợ miễn phí để giúp bạn hoàn thành tốt nhất. Chúc bạn thành công! 🚀

Đánh giá bài viết
Subscribe
Notify of
guest
0 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments