[Resolved] Switch from grid view to list view

[Author]

Posts

[Raphael Franchi]

I am trying to:

Switch from Grid view to list view, with no page reload, in my Woocommerce customized Archive Page.

I visited this URL:

hidden link

and

hidden link

I expected to see:

a link at the bottom of the page switch the view, as u can see at the bottom of the page there is a Grid link in the List page and a List link in the Grid Page (at the bottom of the page)

I used this solution to make that but is not working

https://toolset.com/forums/topic/switch-between-list-grid-view-on-frontend/

Instead, I got:

It reloads the page into a not existing page.

[Luo Yang]

Dear Raphael,

There isn't such a built-in feature within Views plugin, and the thread you mentioned above only works for normal view in a wordpress page, it won't work for wordpress archive, you can not setup two different URL for same wordpress archive.

In your case, I suggest you try the Views filter hook wpv_filter_force_wordpress_archive, for example,
1) setup two different Views wordpress archive,
a) one is grid layout mode, display a link to pass URL parameter: my-layout-mode=list
b) another is list layout mode, display a link to pass URL parameter: my-layout-mode=grid
2) When user click the link, it will pass URL parameter "my-layout-mode" to the wordpress archive,
use filter hook wpv_filter_force_wordpress_archive to check the value of URL parameter "my-layout-mode":
if it is "grid", return the ID of wordpress Views wordpress archive a)
if it is "list", return the ID of wordpress Views wordpress archive b)

More help:
https://toolset.com/documentation/programmer-reference/views-filters/#wpv_filter_force_wordpress_archive
Filters the ID of the WordPress Archive to be used on a given archive loop.

[Raphael Franchi]

Hi Luo,

I actually setup two different Views not WordPress Archives, anyhow I have to admin that I'm not so familiar with PHP, and thus I understand a bit how should be done, I have no idea on how to setup the filter.

Should I have to insert it into child theme's functions.php? I'm also a bit confused on how should I write the function.

Can you help me further?

[Luo Yang]

As I mentioned above:
There isn't such a built-in feature, I suggest you try these:
1) setup two different Views
a) one is grid layout mode, put it in page A
b) another is list layout mode, put it in page B
2) In the page A ,add a link to page B
In the page A ,add a link to page B
https://toolset.com/documentation/user-guides/views-shortcodes/#wpv-post-link

It won't need any custom codes, but it will reload the page when you switch from one page to another.