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

#1. Use this code to Code Injection – Footer

When you add code, you will see some text appear on top of the site. Don’t worry, we will remove it in the final steps.

<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>