Woocommerce filters with icons and swatches

Anonymous

#240499

Hi.

I have seen a website which uses search & filter pro (based on analysing the code through chrome inspector), however they have neat little icons and swatches for various filters, see here:

https://orgreenoptics.com/products/

aside from the obvious css styling, they have additional HTML in the DOM where the checkboxes are created, e.g

<span style="background-image: url(https://orgreenoptics.com/wp-content/uploads/2018/01/01_CatEye.png);"></span>

which produces the small icons of glasses which is also loaded into the DOM, and not simply a class – therefore they must have been able to specify the icon for the particular taxonomy they are using to filter.

for the likes of the colour swatches, they also have an additional <span> in the code, which allows separation from the label.

any thoughts on how this has been achieved with your plugin?

Anonymous

#240500

in addition, they also have a custom “loading” animation, which is a horizontal bar going across the screen as the ajax filter works. again. how?

Trevor

#240582

It appears to have been done using custom javascript, in that the HTML is being modified after the document is loaded (you can see it is missing in the HTML source). In this file:

https://orgreenoptics.com/wp-content/themes/orgreen/js/app.min.js

Around line 443 you will see function filter() defined, and then this is run on line 1776 of the page HTML.

Anonymous

#240584

Thanks Trevor. ive been investigating the hooks S&F hooks etc, are we saying that this cant be done via the function, and that only attributes and label etc can be added / edited using the function hooks. e.g, no additional html can be added using this method and it can only be done via JS?

Trevor

#240589

For the time being, what they have done has to be done this way. There is a hook, that allows limited changes, but not on this level:

https://searchandfilter.com/documentation/action-filter-reference/#filter-input-object

We are changing this for V3, to allow the type of changes you will want. But, that version is still some weeks away from release.

Anonymous

#240591

ok, understood.
I’ll decipher the JS and see if I Can get it working
thanks

Trevor

#240597

Can I close this thread for now?

Anonymous

#240599

sure.

[Author]

Posts