Code chuyển khoảng giá sản phẩm biến thể trong Woocommerce thành 1 giá

Xin chào các bạn

Trong quá trình triển khai website bán hàng có sản phẩm biến thể trên Woocommerce, mình có gặp yêu cầu của khách kiểu: em ơi ! phần sản phẩm hiển thị khoảng giá nhìn nó không đẹp lắm, em đưa giúp anh về một giá thấp nhất thôi được không?

gia san pham bien the 2

Khi bạn chọn sản phẩm biến thể có các giá khác nhau (như ví dụ dưới từ 9.600.000đ – 11.500.000đ) thì Woocommerce sẽ show khoảng giá trên trang sản phẩm…

gia san pham bien the 1

…và trang chi tiết sản phẩm như hình sau:

gia san pham bien the 3

Bây giờ theo yêu cầu của khách, cũng như theo nhu cầu của nhiều anh em làm website, chúng ta sẽ thực hiện thay đổi những phần sau đây:

  • Bỏ đi khoảng giá từ min đến max
  • Thay vào đó sẽ hiển thị một giá duy nhất (giá thấp nhất = min)

gia san pham bien the 4

Thay đổi kiểu giá trong khoảng min – max sang: Giá từ…

Do ngày chủ nhật, cuối tuần nghỉ ngơi nên lười code. Vì vậy lên Google gõ tìm xem có anh em nào chia sẻ đoạn code có sẵn hay không, thì thấy khá nhiều anh em chia sẻ. Trong đó thấy cậu em Lê Văn Toản chia sẻ đoạn code sau đây:


function wc_wc20_variation_price_format( $price, $product ) {
 //Main Price
 $prices = array( $product->get_variation_price( 'min', true ), $product->get_variation_price( 'max', true ) );
 $price = $prices[0] !== $prices[1] ? sprintf( __( 'Giá từ: %1$s', 'woocommerce' ), wc_price( $prices[0] ) ) : wc_price( $prices[0] );
 
 // Sale Price
 $prices = array( $product->get_variation_regular_price( 'min', true ), $product->get_variation_regular_price( 'max', true ) );
 sort( $prices );
 $saleprice = $prices[0] !== $prices[1] ? wc_price( $prices[0] ) : wc_price( $prices[0] );
 
 if ( $price !== $saleprice ) {
 $price = '<del>' . $saleprice . '</del> <ins>' . $price . '</ins>';
 }
 return $price;
}
add_filter( 'woocommerce_variable_sale_price_html', 'wc_wc20_variation_price_format', 10, 2 );
add_filter( 'woocommerce_variable_price_html', 'wc_wc20_variation_price_format', 10, 2 );

Tại bảng điều khiển Admin, bạn vào menu Giao diện => Chọn Theme File Editor => Chọn functions.php

gia san pham bien the 5

Các bạn chỉ việc thêm đoạn code trên vào cuối file functions.php của child theme mà bạn đang sử dụng là được.

Tuy nhiên nếu chỉ làm đến đây thì sẽ xảy ra một số hiển thị sau không mong muốn:

  • Nếu bạn có sản phẩm giảm giá, nó sẽ show giá niêm yết và giá khuyến mãi
  • Và trước giá sẽ có chữ “Giá từ:” nó nó nằm trong code (nếu bạn không muốn hiển thị chỉ việc xoá là xong)
Xem thêm:  Chèn nút chat Zalo lên website bằng code đơn giản

gia san pham bien the 7

Để bỏ chữ “Giá từ:” hoặc bỏ luôn phần show giá niêm yết, bạn sửa đoạn code trên thành như sau:

function wc_wc20_variation_price_format( $price, $product ) {
 //Main Price
 $prices = array( $product-&gt;get_variation_price( 'min', true ), $product-&gt;get_variation_price( 'max', true ) );
 $price = $prices[0] !== $prices[1] ? sprintf( __( '%1$s', 'woocommerce' ), wc_price( $prices[0] ) ) : wc_price( $prices[0] );
 
 if ( $price !== $saleprice ) {
 $price = '&lt;del&gt;' . $saleprice . '&lt;/del&gt; &lt;ins&gt;' . $price . '&lt;/ins&gt;';
 }
 return $price;
}
add_filter( 'woocommerce_variable_sale_price_html', 'wc_wc20_variation_price_format', 10, 2 );
add_filter( 'woocommerce_variable_price_html', 'wc_wc20_variation_price_format', 10, 2 );

Và đây là kết quả trên trang sản phẩm:
gia san pham bien the 9

Kết quả trên trang chi tiết sản phẩm:
gia san pham bien the 8

Liệt kê toàn bộ giá theo thuộc tính của từng sản phẩm

Phần này bạn copy đoạn code sau của Lê Văn Toản vào chèn vào cuối file functions.php trong theme bạn đang sử dụng nhé:


function find_valid_variations() {
 global $product;
 
 $variations = $product->get_available_variations();
 $attributes = $product->get_attributes();
 $new_variants = array();
 
 // Loop through all variations
 foreach( $variations as $variation ) {
 // Peruse the attributes.
 
 // 1. If both are explicitly set, this is a valid variation
 // 2. If one is not set, that means any, and we must 'create' the rest.
 
 $valid = true; // so far
 foreach( $attributes as $slug => $args ) {
 if( array_key_exists("attribute_$slug", $variation['attributes']) && !empty($variation['attributes']["attribute_$slug"]) ) {
 // Exists
 
 } else {
 // Not exists, create
 $valid = false; // it contains 'anys'
 // loop through all options for the 'ANY' attribute, and add each
 foreach( explode( '|', $attributes[$slug]['value']) as $attribute ) {
 $attribute = trim( $attribute );
 $new_variant = $variation;
 $new_variant['attributes']["attribute_$slug"] = $attribute;
 $new_variants[] = $new_variant;
 }
 
 }
 }
 
 // This contains ALL set attributes, and is itself a 'valid' variation.
 if( $valid )
 $new_variants[] = $variation;
 
 }
 
 return $new_variants;
}
function list_price_variable(){
 global $product, $post;
 
 $variations = find_valid_variations();
 
 // Check if the special 'price_grid' meta is set, if it is, load the default template:
 if ( get_post_meta($post->ID, 'price_grid', true) ) {
 // Enqueue variation scripts
 wp_enqueue_script( 'wc-add-to-cart-variation' );
 
 // Load the template
 wc_get_template( 'single-product/add-to-cart/variable.php', array(
 'available_variations' => $product->get_available_variations(),
 'attributes' => $product->get_variation_attributes(),
 'selected_attributes' => $product->get_variation_default_attributes()
 ) );
 return;
 }
 
 // Cool, lets do our own template!
 ?>
 <table class="variations variations-grid" cellspacing="0">
 <tbody>
 <?php
 foreach ($variations as $key => $value) {
 if( !$value['variation_is_visible'] ) continue;
 ?>
 <tr>
 <td>
 <?php foreach($value['attributes'] as $key => $val ) {
 $val = str_replace(array('-','_'), ' ', $val);
 $category_slug = str_replace('attribute_', '', $key);
 $category = get_term_by('slug', ucwords($val), $category_slug);
 $categoryName = $category->name.'&nbsp;';
 printf( '<span class="attr attr-%s">%s</span>', $key, $categoryName);
 } ?>
 </td>
 <td>
 <?php echo $value['price_html'];?>
 </td>
 </tr>
 <?php } ?>
 </tbody>
 </table>
 <?php
}
function wc_wc20_variation_price_format( $price, $product ) {
 $price = list_price_variable();
 return $price;
}
//add_filter( 'woocommerce_variable_sale_price_html', 'wc_wc20_variation_price_format', 10, 2 );
add_filter( 'woocommerce_variable_price_html', 'wc_wc20_variation_price_format', 10, 2 );

Kết quả như sau đây

Xem thêm:  WP Rocket là gì? Hướng dẫn cài đặt và sử dụng plugin WP Rocket
gia san pham bien the 10
Hình ảnh nguồn từ website: Lê Văn Toản

Chúc các bạn thành công !

Ghi chú: Bài viết này sử dụng đoạn Code được chia sẻ bởi bạn Lê Văn Toản, và có một số chỉnh sửa cũng như hướng dẫn lại cho phù hợp với một số yêu cầu thêm của khách hàng bên BALICO cũng như theo nhu cầu của các bạn.

Để tôn trọng quyền tác giả, nếu các bạn có đăng lại bài viết này vui lòng ghi nguồn. Các bạn cũng có thể xem code gốc được chia sẻ tại: Lê Văn Toản

Xem bài viết khác về Woocommerce: Hướng dẫn hiển thị số lượng sản phẩm đã bán trên Woocommerce

avata-web

Tốt nghiệp CNTT và bắt đầu công việc Thiết kế web, SEO, Adwords,… từ 2008, với hơn 15 năm kinh nghiệm của mình, tôi thành lập BALICO với mục tiêu mang đến những giải pháp chuyển đổi số trong kinh doanh dành cho doanh nghiệp vừa và nhỏ (SME), nâng cao năng lực cạnh tranh, đồng hành cùng khách hàng tự tin bước vào kỷ nguyên công nghệ 4.0

Kết nối với tôi:  Facebook | Tiktok | Twitter | Linkedin | Youtube | Blog

Hotline
Telegram
Messenger
Chỉ đường