How to make a grid/list toggle button and display
Here is a new how to on a feature we implemented on our shop : The possibility to change the display of the Virtuemart products from a Grid layout to a list layout without reloading the page and having multiple templates.
You can see a live sample there
Let's start with a common grid layout by default.
In order to display 3 items per row, you can update the category and set the "Number of Products per Row" to 3.
Please note that this sample relies on Virtuemart default layout. If your template already has Virtuemart templates overloads, you might want to start from those instead.
So first of all, we will create a new layout that will be compatible with this grid / list layout.
Copy the file from
Find a good placement for the toggle buttons. A natural one is nect to the sort by and pagination buttons
We will add our togglers that consist of 2 links with ids "list" and "grid":
If you have Bootstrap loaded, you could quickcly design your buttons:
It will then look like this :
We will use custom css classes to change the layout of the page depending on whether the 'list-group-item' class is applied or not.