Quickly Adding HTML Types to WooCommerce Products Filter – WOOF plugin

The WooCommerce Products Filter - WOOF plugin seems super helpful for normal sorting scenarios. On a client’s category page I’ve built a Vue.js experience so their filters appear and work the exact way they want them to. I want them to be able to use the WOOF plugin to determine filter order, component types, and some other options. With that in mind I needed to figure out how to add the custom components to the WOOF structure dropdowns.

It turns out it’s extremely easy as long as you don’t need views along with it, which since I’m using Vue.js for the frontend I don’t. All it takes is just adding the HTML types to the WOOF global in your functions.php file and they will show up in the admin.

...
$GLOBALS['WOOF']->html_types['swatch'] = "Swatch";
$GLOBALS['WOOF']->html_types['slider'] = "Slider";

Leave A Comment