Add Sold out to Category list

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>

1 Like