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.
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.
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.
