WooCommerce Product Category and Terms Select Filters [code snippet]


WooCommerce Product Category and Terms Select Filters [code snippet]

The code below will help you add a form select filter for Woocommerce online shop on WordPress.

<?php
$categories = get_terms( ['taxonomy' => 'product_cat', 'hide_empty' => true] ); ?>
<div class="product-categories">
    <h3>Categories</h3>
    <select class="form-control shop-filter" onchange="location = this.value;">
        <option selected value="/shop/">All</option>
        <?php foreach ( $categories as $category ) { ?>
        <option value="<?php echo get_term_link( $category->term_id  ); ?>"><?php echo $category->name; ?></option>
        <?php } ?>
      </select>
</div>

<?php
$terms = get_terms(array('taxonomy' => 'product_tag', 'hide_empty' => true)); ?>
<div class="product-tags" >
    <h3>Template Tags</h3>
    <select class="form-control shop-filter" onchange="location = this.value;">
        <option selected value="/shop/">All</option>
        <?php foreach ( $terms as $term ) { ?>
            <option value="<?php echo get_term_link( $term->term_id, 'product_tag' ); ?>"><?php echo $term->name; ?></option>
        <?php } ?>
      </select>
</div>

<script>
jQuery(document).ready(function() {
    var queryString = window.location.href;
    console.log(queryString);
    jQuery(".shop-filter > option").each(function() {
    if (this.value == queryString) {
    this.selected = 'selected';
    }
    });
});
</script>

 

 



Written by: Jake Lett
Jake Lett is a B2B marketing consultant with over 15 years of experience in the digital marketing industry. He specializes in SEO, HubSpot, and PPC campaign management. Jake has a proven track record of helping businesses increase their online visibility and drive more traffic, leads and sales. He is a Certified Google Ads Specialist and a Certified HubSpot Developer.

Topic:

Related posts

Tags: , ,

Want to Get Email Updates of New Articles?

Join My Email Newsletter