Với WooCommerce, chúng ta có thể dễ dàng thêm sản phẩm có nhiều biến thể thay đổi giá như màu sắc, kích thước, dung tích hay trọng lượng, kiểu dáng,.. Tuy nhiên, giá sản phẩm có nhiều biến thể được trình bày trong WooCommerce lại không rõ ràng, hiển thị một khoảng giá. Và đây là cách xử lý vấn đề với sản phẩm hiển thị khoảng giá. Các bạn hãy thêm đoạn code này vào file function.php của theme/child theme đang kích hoạt là được.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | //Thay thế giá cho sản phẩm có biến thể add_action( 'woocommerce_before_single_product', 'move_variations_single_price', 1 ); function move_variations_single_price(){ global $product, $post; if ( $product->is_type( 'variable' ) ) { add_action( 'woocommerce_single_product_summary', 'replace_variation_single_price', 10 ); } } function replace_variation_single_price() { ?> <style> .woocommerce-variation-price { display: none; } </style> <script> jQuery(document).ready(function($) { var priceselector = '.product p.price'; var originalprice = $(priceselector).html(); $( document ).on('show_variation', function() { $(priceselector).html($('.single_variation .woocommerce-variation-price').html()); }); $( document ).on('hide_variation', function() { $(priceselector).html(originalprice); }); }); </script> <?php } |
Chúc các bạn thành công!
Copyright protected by Digiprove © 2022Chào ! Bạn thấy nội dung này thế nào?
![[Hướng dẫn] Thêm Custom Fields vào Simple Products cho WooCommerce](https://huanvm.com/wp-content/uploads/2022/08/huanvmdotcom-add-custom-field-for-woocommerce.png "[Hướng dẫn] Thêm Custom Fields vào Simple Products cho WooCommerce 4")
![[Hướng dẫn] Hiển thị thông tin sản phẩm dạng Tooltip cho Woocommerce](https://huanvm.com/wp-content/uploads/2022/08/huanvmdotcom-display-products-info-tooltip-for-woocommerce.png "[Hướng dẫn] Hiển thị thông tin sản phẩm dạng Tooltip cho Woocommerce 11")
![[Hướng dẫn] Auto title, alt text, caption & description cho hình ảnh upload](https://huanvm.com/wp-content/uploads/2022/08/huanvmdotcom-alt-image.jpg "[Hướng dẫn] Auto title, alt text, caption & description cho hình ảnh upload 13")
