Skip Navigation

[Closed] Switch between list & grid view on frontend

This support ticket is created 8 years, 5 months ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Our next available supporter will start replying to tickets in about 0.07 hours from now. Thank you for your understanding.

This topic contains 3 replies, has 2 voices.

Last updated by Caridad 8 years, 5 months ago.

Assigned support staff: Caridad.


Hi there,

I'd like to offer visitors to switch between list & grid view on the frontend, is that possible? Important is that not just another view is loaded where the visitor has to search again but that the current search is transferred (including the search query, pagination, sorting etc.).

Maybe there's a way to link to another view and to "transfer" the URL query from the current view to the new one? Basically just replacing the current view's page slug with the page slug of the additional view but maintain the URL query...?



Dear Thomas,

There is no direct support for switching layout but we could use one of these workarounds:

1) a custom php shortcode that reads the url parameters to build the link to change from one view to another

2) this could also be done with some javascript code. Read the URL parameters and redirect accordingly

3) it would also be possible to change the look of the data using CSS and switch from one style to another using javascript too.

Let me know what solution suits you better.



Hi Caridad,

Thanks for trying to implement this, I think this will be an interesting feature for a lot of other users as well (tutorial?!).

I think both 1) and 2) seem to be the most promising and compatible solutions. 2) probably the most convenient for the visitors depending on how the swithc looks (no page refresh necessary) - any chance we can try both?



Dear Thomas,

Let start with two pages. Each with a different View inside. One would be the grid view and the other one would be the list view and they both have identical query section.

Add a link like this in the HTML output section of both Views, pointing to each other:

<a href="/grid-view/" class="switch">Grid</a> | <a href="/list-view/" class="switch">List</a>

And then use this javascript (you need it in both Views):

jQuery( function( $ ) {
  $( 'a.switch' ).click( function() {
    var url = this.href + '?' + window.location.href.split('?')[1];
    window.location.href = url;
    return false;
  } );
} );

Please let me know if you are satisfied with my answer and if I can help you with any other questions you might have.


The topic ‘[Closed] Switch between list & grid view on frontend’ is closed to new replies.