Remove Empty WooCommerce Filters
How do I make an remove empty woocommerce filters?
This is a simple jquery script to hide all WooCommerce product filters/attributes that have zero products associated with them. . What is a remove empty woocommerce filters? How do you make a remove empty woocommerce filters? This script and codes were developed by Chris Steurer on 08 December 2022, Thursday.
Remove Empty WooCommerce Filters - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Remove Empty WooCommerce Filters</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <section id="woocommerce_layered_nav-2" class="widget-4 widget woocommerce widget_layered_nav"> <div class="widget-inner"> <h3>Filter by Color</h3> <p>Without empty filter</p> <ul> <li> <span>Beige</span> <small >20</small> </li> <li> <a href="#">Black</a> <small >22</small> </li> <li> <span>Blue</span> <small>10</small> </li> <li> <span>Cherry</span> <small >0</small> </li> <li> <span>Chrome</span> <small >50</small> </li> <li> <span>Ebony</span> <small >70</small> </li> <li> <span>Green</span> <small >40</small> </li> <li> <a href="#">Grey</a> <small >2</small> </li> <li> <span>Orange</span> <small >0</small> </li> <li> <span>Pink</span> <small >0</small> </li> <li> <span>Purple</span> <small >0</small> </li> <li> <span>Red</span> <small >0</small> </li> <li> <span>White</span> <small >0</small> </li> </ul> </div>
</section>
<section id="woocommerce_layered_nav-2" class="widget-4 widget woocommerce widget_layered_nav"> <div class="widget-inner"> <h3>Filter by Color</h3> <p>With empty filter</p> <ul> <li> <span>Beige</span> <small class="count">10</small> </li> <li> <a href="#">Black</a> <small class="count">22</small> </li> <li> <span>Blue</span> <small class="count">0</small> </li> <li> <span>Cherry</span> <small class="count">20</small> </li> <li> <span>Chrome</span> <small class="count">50</small> </li> <li> <span>Ebony</span> <small class="count">0</small> </li> <li> <span>Green</span> <small class="count">70</small> </li> <li> <a href="#">Grey</a> <small class="count">2</small> </li> <li> <span>Orange</span> <small class="count">0</small> </li> <li> <span>Pink</span> <small class="count">30</small> </li> <li> <span>Purple</span> <small class="count">0</small> </li> <li> <span>Red</span> <small class="count">0</small> </li> <li> <span>White</span> <small class="count">0</small> </li> </ul> </div>
</section> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Remove Empty WooCommerce Filters - Script Codes CSS Codes
section { width: 40%; float: left;
}
Remove Empty WooCommerce Filters - Script Codes JS Codes
/*///////////////////////////////////////////////////////////// // Hide Empty Product Filters In Side Menu \\
///////////////////////////////////////////////////////////// */
$('small.count').filter(function() { return $(this).text() === "0";
}).parent("li").remove();
/*///////////////////////////////////////////////////////////// // Hide & Show Excessive Product Filter Options \\
///////////////////////////////////////////////////////////// */
//For each layered nav widget, run this function
$('.widget_layered_nav > div').each(function() { var ul = $(this).children('ul'); var hiddenElements = ul.children('li:gt(4)', this).hide(); var showCaption = '...' + hiddenElements.size() + ' More Choices'; var hideFilterOptions = "...Fewer Choices"; if(ul.children('li').size() <= 5) return; ul.append( $('<li class="toggler">' + showCaption + '</li>') ); $('li.toggler').click( function() { if( $(this).html() === hideFilterOptions ) { hiddenElements.hide(); $(this).html(showCaption); } else { hiddenElements.show(); $(this).html(hideFilterOptions); } });
});
Developer | Chris Steurer |
Username | stoypenny |
Uploaded | December 08, 2022 |
Rating | 3 |
Size | 2,583 Kb |
Views | 4,048 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Social Icon Buttons | 3,362 Kb |
Arrow Button Hover Effect | 2,963 Kb |
Button Hover Effects | 1,993 Kb |
Simple CSS Progress Bars | 3,021 Kb |
Side Scroll Image Gallery | 2,517 Kb |
Simple Contact Cards | 2,985 Kb |
Sign Up Form with live validation | 3,712 Kb |
Delayed Modal Popup | 4,480 Kb |
Stylish Credit Card Form | 5,979 Kb |
CSS3 Image Filters Template | 3,025 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Simple personal profile | Miroot | 2,856 Kb |
A Pen by Xand0r | Xand0r | 1,928 Kb |
Sticky notes with CSS3 | HaiNguyen007 | 2,146 Kb |
Font stack | Adrianjacob | 1,868 Kb |
Awesome | Samarthpd | 2,901 Kb |
Sencha Touch 2.3.1 Basic Grid Example | Trozdol | 2,770 Kb |
Experiments with Vertical Centering | KatieK2 | 3,924 Kb |
Simple animated hover effect | Pobee-norris | 3,044 Kb |
HTM5 picture dropzone | Jaysalvat | 2,576 Kb |
Blackberry Mock | Zacharyolson | 1,865 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!