[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.

1. Vì sao cần thay đổi hiển thị giá sản phẩm biến thể?

Cách hiển thị giá mặc định theo khoảng giá min – max của Woocommerce theo mình là khá tiện lợi và dễ hiểu. Nhưng nó cũng những hạn chế nhất định khiến nhiều người muốn thay đổi cách hiển thị giá cho trực quan và dễ hiểu hơn.

Hiển thị mức giá cao có thể khiến khách hàng e ngại

Nếu sản phẩm hiển thị một khoảng giá rộng – chẳng hạn 500.000 – 10.000.000 sẽ khiến nhiều khách hàng e ngại vì họ chỉ chú ý đến mức giá cao nhất. Việc này sẽ khiến khách hàng không muốn bấm vào xem chi tiết, làm giảm tỉ lệ chuyển đổi, giảm doanh số bán hàng.

Thay vào đó, chúng ta có thể hiển thị giá của biến thể rẻ nhất, ví dụ: “Giá từ 500.000” hoặc “500.000+”, để giúp khách hàng tập trung vào mức giá thấp, đồng thời vẫn thông rằng có những biến thể sẽ có giá cao hơn.

Hoặc bạn cũng có thể chơi chiêu “lừa đảo” như Shopee, chỉ hiển thị giá thấp nhất “5.000”, đến khi bấm vào xem mới ngã ngửa ra 5.000 chỉ mua được cọng dây thun, còn sản phẩm có giá cao gấp 10 lần. Không khuyến khích chơi chiêu này!

Khách hàng khó xác định chính xác số tiền họ sẽ phải trả

Một hạn chế khác khi hiển thị giá theo khoảng min – max là khách hàng sẽ không biết chính xác số tiền họ phải chi trả khi đặt mua. Khi sản phẩm có nhiều loại biến thế, ví dụ: Màu sắc (Đỏ – Cam – Vàng), Kích thước (S – M – L), có thể có đến 9 biến thể khác nhau với giá tiền khác nhau. Khách hàng phải bấm chọn đúng biến thể thì mới biết được chính xác số tiền cần phải thanh toán.

Hiện thị khoảng giá gây mất thẩm mỹ

Với nhiều shop ưu tiên tính thẩm mỹ thì việc hiển thị khoảng giá 500.000 – 5.000.000 làm trang sản phẩm trở nên dài dòng. Hiển thị một giá duy nhất sẽ giúp giao diện web gọn gàng hơn.

Để thay đổi cách hiển thị giá cho sản phẩm nhiều biến thể trên Woocommerce, các bạn có thể tham khảo các đoạn code snippet dưới đây để tùy biến cho website của mình.

Bạn cần copy các đoạn code này vào file functions.php của theme đang sử dụng. Hoặc cách tốt hơn là cài đặt plugin Code Snippet để bổ sung các đoạn code snippet.

2. Chỉ hiện thị giá của biến thể rẻ nhất

Để 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;
}
Code language: PHP (php)

Trang sản phẩm giờ đã được cập nhật với cách hiển thị giá mới

3. Hiển thị thông báo khi chưa chọn biến thể

Để hiện thị thêm thông báo yêu cầu khách hàng chọn biến thể (màu sắc / kích thước / quy cách …) để xem chính xác giá sản phẩm, bổ sung thêm đoạn code sau

add_action('woocommerce_single_product_summary', 'add_message_before_add_to_cart_button', 20);
function add_message_before_add_to_cart_button() {
    global $product;

    if ($product->is_type('variable')) {
        $attributes = array_keys($product->get_variation_attributes());
        $attribute_names = array_map(function ($attribute) {
            return wc_attribute_label($attribute); // Get the display label of the attribute
        }, $attributes);

        $attributes_list = implode(' / ', $attribute_names);

        echo '<p class="select-variation-message" style="color: red; margin-bottom: 10px;">Quý khách vui lòng chọn ' . strtolower($attributes_list) . ' để xem giá sản phẩm chính xác. Xin cảm ơn!</p>';
    }
}

add_action('wp_enqueue_scripts', 'toggle_variation_message');
function toggle_variation_message() {
    if (is_product()) {
        wc_enqueue_js("
            jQuery(document).ready(function($) {
                $('.select-variation-message').show();
                $('form.variations_form').on('found_variation', function() {
                    $('.select-variation-message').hide();
                });
                $('form.variations_form').on('reset_data', function() {
                    $('.select-variation-message').show();
                });
            });
        ");
    }
}
Code language: PHP (php)

Thông báo sẽ hiện ra khi khách hàng chưa chọn biến thể, và sẽ tự động biến mất sau khi đã chọn.

4. Hiển thị danh sách giá của tất cả các biến thể

Với cách trên, khách hàng cần phải chọn từng biến thể thì mới biết được giá chính xác là bao nhiêu. Trường hợp sản phẩm có nhiều biến thể sẽ khiến việc kiểm tra giá trở nên mất thời gian cho khách hàng.

Để giải quyết vấn đề này, chúng ta có thể hiển thị danh sách giá của tất cả các biến thể trực tiếp trên trang sản phẩm để khách hàng nhanh chóng nắm bắt được giá của từng biến thể.

Sử dụng đoạn code sau

add_action('woocommerce_single_product_summary', 'display_variation_prices_list', 15);
function display_variation_prices_list() {
    global $product;

    // Check if the product is variable
    if ($product->is_type('variable')) {
        // Get variations
        $available_variations = $product->get_available_variations();
        $variation_list = '';

        // Build a list of variation names and prices
        foreach ($available_variations as $variation) {
            $variation_obj = wc_get_product($variation['variation_id']);
            $attributes = $variation['attributes'];
            $variation_name_parts = [];

            // Convert slugs to readable names
            foreach ($attributes as $attribute_key => $attribute_slug) {
                $taxonomy = str_replace('attribute_', '', $attribute_key);
                $term = get_term_by('slug', $attribute_slug, $taxonomy);
                if ($term) {
                    $variation_name_parts[] = $term->name;
                }
            }

            $variation_name = implode(' / ', $variation_name_parts); // Combine readable names
            $variation_price = $variation_obj->get_price_html(); // Get formatted price
            
            // Add to the list
            $variation_list .= '<li>' . esc_html($variation_name) . ': ' . $variation_price . '</li>';
        }

        // Display the list
        if (!empty($variation_list)) {
            echo '<div class="variation-price-list" style="margin-bottom: 30px;">';
            echo '<ul>' . $variation_list . '</ul>';
            echo '</div>';
        }
    }
}Code language: PHP (php)

Danh sách giá của toàn bộ biến thể giờ đã hiện ra trên trang sản phẩm.

5. 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();
            });
        });
    ");
}Code language: PHP (php)

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.

Chúc bạn thực hiện thành công. Nếu cần hỗ trợ thêm về Woocommerce, tham khảo dịch vụ kỹ thuật của mình bên dưới

Hỗ trợ kỹ thuật Woocommerce

800,000 ₫
(~ 4.896 JPY)

Đăng Ký