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
I share digital marketing tips and HubSpot tutorials to help marketers and business owners grow their business.

Related posts

Tags: , ,

Want to Get Email Updates of New Articles?

Join My Email Newsletter