List view / grid view option or method (something like advanced toggle switch)

Hi all,

I have found only some info (older articles or incomplete) online about making a toggle switch or method for visitors to change from grid view to list view. I would want to use this for Woocommerce product archives/caregory pages.

I have seen this being used in many templates, but not sure where to start. I am not expecting an A to Z explanation, but maybe someone could point me into the right directions and best methods.

I think this could be possible with the Bricks Builder interactions? loading different css/divs? Only i don’t know if this is the best way when applying this to a Woocommerce product archive regarding speed performance and optimization.




You mean you have seen this one already?



1 Like

No, also weird why i didn’t see that before. Thanks! I am gonna watch it tomorrow. I sipped true it a little.

I did experiment with the ‘nested tabs element’ in which i could get this also easily. Only then replacing the tab style to the icons and no borders and such, but that was fairly simple. Of course i dunno what would be better when having more to load.

once i was in this situation i used tabs, duplicating the loop and set one to list and the other to grid, but i knew that it was not the best solution.

I think if there isn’t too much loaded this is perfect simple solution.

I can also achieve something with the interactions feature. Like make 2 buttons and then create click interactions to show or hide a div based on the click.

Only big downside is that it doesn’t set this info in a cookie. So if people change the view, then this get’s lost after refresh or going to another page. So this is not suitable for things like a Woocommerce product archive.

The tutorial in the video is also nice, but i somehow couldn’t get it to work. Although that didn’t matter, because in my case i would need a solution to control and change multiple queries/repeaters on a page (+ save state in a cookie). Most Woocommerce shops have just one query with all the product categories, but in my case i wanted to split them up and give some categories more attention in a different styled section.
If anyone has already a solution for my case like a plugin, please let me know. I already lost too much time on some problem solving, but i still want to add this to my client site.

You can set a cookie (browser storge) togeter with other click button interactions. Make one button click add class (attribute with class as a key) to article and a cookie, the other to remove both.

Then it’s just setting ‘content loaded’ trigger on article with that cookie as a condition to also add/remove that class.

New video:

1 Like

Thanks for the update. Trying to do too many things at once, so this is going to help me. I wish we get a lot more Woocommerce stuff out of the box. Going to check it out soon.

1 Like

I just want to refresh this topic.

Has anyone managed to set up such a layout switch? Is such an option planned to be added to the builder in the future?

A similar topic: Change list view to grid and vice versa by clicking on icons