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á!

Đ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! 🚀