[Woocommerce] Thay đổi cách hiển thị giá cho sản phẩm nhiều biến thể
Trong WooCommerce, khi thiết lập sản phẩm có nhiều biến thể (variation products), giá sản phẩm mặc định sẽ hiển thị dưới dạng khoảng giá. Ví dụ khi sản phẩm có các biển thể giá 349.000, 399.000 và 449.000 thì Woocommece sẽ hiển thị giá sản phẩm là 349.000₫ – 449.000₫ như hình bên dưới
Tuy nhiên, trong một số trường hợp, chúng ta muốn thay đổi cách hiển thị khoảng giá này để tránh gây nhầm lẫn cho khách hàng, hoặc để trang sản phẩm nhìn gọn gàng hiện đại hơn.
Dưới đây mình sẽ hướng dẫn thay đổi cách hiển thị giá của sản phẩm biến thể (variation products) trong Woocommerce.
Để thay đổi cách hiển thị giá của sản phẩm biến thể thành dạng “Giá từ: xxx.xxx”, sử dụng đoạn code sau:
add_filter('woocommerce_variable_price_html', 'custom_variable_price_format', 10, 2);
function custom_variable_price_format($price, $product) {
// Get all variation prices
$prices = $product->get_variation_prices(true);
// Get the minimum price
$min_price = !empty($prices['price']) ? min($prices['price']) : '';
// Format the price to display "From: XXX"
if ($min_price) {
$price = sprintf(__('Giá từ: %s ++', 'woocommerce'), wc_price($min_price),);
//$price = sprintf(wc_price($min_price),' ++');
}
return $price;
}Trang sản phẩm giờ đã được cập nhật với cách hiển thị giá mới
Cập nhật giá của sản phẩm sau khi chọn biến thể
Sau khi chọn biến thể, trang sản phẩm giờ sẽ hiện ra 2 mức giá:
- Giá của sản phẩm chính: “Giá từ 349.000đ ++”
- Giá của biến thể: “449.000đ”
Việc này sẽ khiến nhiều khách hàng bối rối, không biết giá nào mới là giá cần thanh toán.
Phương án giải quyết: Khi khách hàng chọn biến thế, phần giá sản phẩm chính (Giá từ: 349.000đ ++) sẽ được thay thế thành giá của biến thể “449.000đ”, đồng thời phần giá của biến thể nằm ở dưới (449.000đ) sẽ được ẩn đi.
add_action('woocommerce_variable_add_to_cart', 'update_variation_price_on_select');
function update_variation_price_on_select() {
global $product;
// Get the default price for fallback
$price = $product->get_price_html();
// Enqueue JavaScript to update the price dynamically
wc_enqueue_js("
jQuery(document).ready(function($) {
// Update the price when a variation is found
$('form.variations_form').on('found_variation', function(event, variation) {
if (variation.price_html) {
$('.summary > p.price').html(variation.price_html).show();
$('.woocommerce-variation-price').hide(); // Hide variation price wrapper
$('.select-variation-message').hide();
}
});
// Revert to the main product price if no variation is selected
$('form.variations_form').on('reset_data', function() {
$('.summary > p.price').html('" . $price . "').show();
$('.select-variation-message').show();
});
});
");
}Lúc này trên trang sản phẩm sẽ luôn hiển thị 1 giá duy nhất:
- Khi chưa chọn biến thể: hiển thị giá 349.000đ ++
- Khi chọn biến thể: hiển thị giá của biến thể
Tùy chỉnh cách hiển thị giá của sản phẩm biến thể không chỉ giúp khách hàng nhanh chóng nắm bắt thông tin giá cả mà còn nâng cao trải nghiệm mua sắm, đồng thời tăng tỷ lệ chuyển đổi.
