How to: Use query parameters to explore a Woocommerce shop with faux tabs

Loops & Logic
1

My continuing efforts to Tangibleize now allow me to control my Woocommerce shop page.

My shop page shows a row of ‘Category’ buttons like this
image

The ‘All’ button links to the bare shop page url which shows four items from each category with links to see more.

The other buttons link to the shop page with a query parameter, for example: /shop/?type=Drinkware

When a query parameter exists: The ‘Category’ button for that query is highlighted and I show twelve of those items, paginated. It works well and obviates the need to crawl down the dark, dark hole that is FacetWP (for me).

Hope this is useful for someone.

 <div class="mb-6">
   <div class="fs-09 fw-700 ">Explore by Category</div>

 <Note> Show current category button in highlighted color </Note>

   <If check='{Url query=type}' not_exists>
     <span class="rs-btn small-btn my-2"><a class="cb-yellow-bright" href="/shop/">All</a></span>
   <Else />
     <span class="rs-btn small-btn my-2"><a class="cb-gold-med" href="/shop/">All</a></span>
   </If>  
   <Loop items=Clothing,Containers,Donate,Drinkware,Fun>
    <If check='{Url query=type}' value='{Field}'>
      <span class="rs-btn small-btn my-2"><a class="cb-yellow-bright" href="/shop/?type={Field}"><Field /></a></span>
    <Else />
      <span class="rs-btn small-btn my-2"><a class="cb-gold-med" href="/shop/?type={Field}"><Field /></a></span>
    </If>
   </Loop>
 </div>

<If check='{Url query=type}' not_exists>

  <Note> Bare page - Show four of every type </Note>
  
  <Loop items=Clothing,Containers,Donate,Drinkware,Fun>
    <div class="rs-btn small-btn my-2"><a class="cb-gold-med" href="/shop/?type={Field}">See All <Field /></a></div>    
    <div class="grid-cols-inner grid-xl-col-4 grid-md-col-4 grid-sm-col-2 grid-xs-col-2 mb-6">
     <Loop type="product" paged=4 taxonomy=product_tag terms='{Field}' orderby_field=order >
      <Template name=product-core-web />
     </Loop>
    </div>  
  </Loop>  
<Else />

 <Note>Query exists - Show 12 of selected type </Note>
  
 <div class="grid-cols-inner grid-xl-col-4 grid-md-col-4 grid-sm-col-2 grid-xs-col-2">
  <Loop type="product" paged=12 taxonomy=product_tag terms='{Url query=type}'>
      <Template name=product-core-web />
 </Loop>
 </div>

 <div class="ta-c my-4">
  <PaginateButtons scroll_top=true />
 </div>
</If>
3 Likes