Suppose you want to add a “Sold Out” to the category list, like this
and when users click “Sold Out” it will show Sold out products only, like this
If code doesn’t work, you can comment below, message or email me.
#1. Use this code to Code Injection – Footer
<li class="nested-category-breadcrumb-list-item tp-sold-out">
<a href="#sold-out" class="nested-category-breadcrumb-link">Sold Out</a>
<span class="breadcrumb-separator" aria-hidden="true">|</span>
</li>
#2. Use this code to Custom CSS box
li.tp-sold-out {
display: none!important;
}
body[class*="type-products"].view-list li.tp-sold-out {
display: block !important;
}
#3. Use this code to [Code Injection – Footer], under #1 code
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('li.tp-sold-out').appendTo('ul.nested-category-children');
$('li.tp-sold-out').click(function(){
$('div.grid-item:not(.sold-out)').hide();
});
});
</script>
