Trong bài viết này sẽ hướng dẫn ae loại bỏ các biến thể của sản phẩm khi hết hàng, tiết kiệm thời gian…
Mặc định, WooC Commerce cho phép chọn một biến thể ngay cả khi nó hết hàng và kết quả là một khách hàng thất vọng khi nhìn thấy thấy thông báo”Out of Stock” này thay vì nút “Thêm vào giỏ hàng” đang hoạt động:
Định nghĩa về biến thể hết hàng:
- “Trạng thái còn hàng” được đặt thành “Hết hàng”,
- “Số lượng tồn kho” bằng 0 khi tồn kho được quản lý ở mức độ biến động,
- “Số lượng hàng tồn kho” bằng 0 khi hàng tồn kho được quản lý ở cấp độ sản phẩm.
Trong tất cả các trường hợp này, is_in_stock()
phương thức sẽ trả về false
và đó chính xác là những gì chúng ta cần sử dụng trong đoạn mã bên dưới.
Đừng quên rằng có một tùy chọn trong WooC Commerce > Cài đặt > Sản phẩm > Hàng tồn kho cho phép ẩn các biến thể hết hàng khỏi danh sách thả xuống:
Nhấn vào select box “Ẩn các mặt hàng hết hàng khỏi danh mục” và các biến thể hết hàng sẽ biến mất khỏi danh sách thả xuống.
1 2 3 4 5 6 7 8 |
add_filter( 'woocommerce_variation_is_active', 'rudr_variation_grey_out', 25, 2 ); function rudr_variation_grey_out( $active, $variation ) { // here we go if( ! $variation->is_in_stock() ) { $active = false; } return $active; } |
Trong trường hợp bạn để hiển thị nó dưới dạng Radio button thì add thêm đoạn mã js sẽ không cho khách hàng click chọn các sản phẩm có biến thể hết hàng
1 2 3 4 5 6 7 8 9 10 11 |
$( document ).on( 'woocommerce_update_variation_values', function() { $( '.rudr-variation-radios input' ).each( function( index, element ) { const radio = $(element) const radioName = radio.attr( 'name' ) const radioValue = radio.attr( 'value' ) radio.removeAttr( 'disabled' ) if( $( 'select[name="' + radioName + '"] option[value="' + radioValue + '"]' ).is( ':disabled' ) ) { radio.prop( 'disabled', true ) } }) }) |
Và đây là kết quả:
Chúc ae thành công!