Skip to content
Advertisement

WooCommerce – Turning the product tag cloud into a complex refine feature

QUESTION: How am I able to combine these two blocks of code so they work as one?

I do not require any shortcode solutions, I prefer the function format used in the first block of code, however the second block has some essential functionality.

The first block of code I have managed to construct allows for the WooCommerce product tag cloud to benefit from the following advanced features:

  • Alphabetised list.
  • Display product quantity totals.
  • Dynamic sizing and scrollable overflow box used if list becomes too long.
  • If a product archive level becomes empty (i.e. no ‘in stock’ products to show) then the whole tag level becomes hidden.
  • Hidden product tag levels then automatically 302 redirect themselves to the top level ‘shop’ page.

The code to achieve this is as follows:

JavaScript

The second block of code allows the product tag cloud to work dynamically in the same way you would expect a refine block to work – only showing relevant product tags at each product category level.

The shortcode is as follows:

JavaScript

The code is as follows:

JavaScript

Advertisement

Answer

Try the below code Snippet:

JavaScript
User contributions licensed under: CC BY-SA
4 People found this is helpful
Advertisement