Thu gọn biến thể woocomerce | View More / Collapse Variations in WooCommerce

Bạn có nhiều biến thể nhưng muốn thu gọn để tăng trải nghiệm cho người dùng.

English: You have many variations but want to condense them to enhance the user experience

Hãy chép đoạn code dưới đây vào file function nhé:

English: Please copy the following code into the function file

function thugon_xem_them_bien_the(){
?>
<script>
document.addEventListener('DOMContentLoaded', function() {
var chon_swatches = document.querySelectorAll('.ux-swatches');
chon_swatches.forEach(function(chon_swatches_con) {
var swatches = chon_swatches_con.querySelectorAll('.ux-swatch');
if (swatches.length > 3) {
for (var i = 3; i < swatches.length; i++) {
swatches[i].classList.add('hidden');
}
var nutxemthem = document.createElement('div');
nutxemthem.textContent = 'More';
nutxemthem.classList.add('show-more-btn');
nutxemthem.style.cursor = 'pointer'; 
chon_swatches_con.appendChild(nutxemthem);
nutxemthem.addEventListener('click', function(event) {
event.stopPropagation();
for (var i = 3; i < swatches.length; i++) {
swatches[i].classList.toggle('hidden');
}
this.textContent = (this.textContent === 'More') ? 'Less' : 'More';
});
}
});
});
</script>
<?php
}
add_action('wp_footer','thugon_xem_them_bien_the');

Trong đoạn code trên mình đang để giới hạn là 3 biến thể, nếu quá 3 cái thì nó sẽ xuất hiện nút More . Nếu bạn muốn giới hạn bằng số khác ví dụ 7 thì thay số 3 trong code thành số bạn muốn.

English: In the above code snippet, I am setting the limit to 3 variations. If there are more than 3, a ‘More’ button will appear. If you want to limit it to a different number, for example 7, replace the number 3 in the code with your desired number