Code Snippets - Switch Between Grid and Table View in Shop/Category Archive Pages
Lots of people add the WooCommerce Product Table layout to their shop and category pages, in order to use product tables throughout their store. Others like to give shoppers a choice, so that they can switch between the default grid layout and the product table view.
This article will explain, with code snippets included, how this can be done using a custom archive template file and some code in functions.php. The code snippets are aimed at developers. If you don’t feel comfortable editing code, then you should ask your developer. If you don't have one then we recommend posting a job on Codeable, who we have partnered with to provide plugin customization services for our customers. Codeable developers are vetted and tested WordPress specialists from around the world.
Code snippets
The following code snippets will replace the standard archive-product.php template (whether it comes directly from WooCommerce or from your theme/child theme) with a custom template called archive-wpt.php. They also add a link enabling shoppers to toggle between the default view and product table view on all archive pages, including the link back to default coming from the custom archive-wpt.php template. This switching link has been given the class of wpt-archive-switcher to allow styling, but this can be changed as needed.
Warnings:
- If you're using an off-the-shelf theme and don’t have a child theme, then your changes can cause problems or get lost when you update the theme in future. We recommend adding these customizations to a child theme.
- When you use these code snippets, we recommend disabling the options on the WooCommerce Product Table settings page which automatically add the product table layout to your shop and category pages. The code snippets are not designed to work with these options, and you should follow the instructions below instead.
Step 1. Upload archive-wpt.php template file
First, download the file that suits your current setup and save it to your theme/child theme's woocommerce directory as archive-wpt.php.
| Scenario | File |
|---|---|
| I'm using the latest version of WooCommerce (3.3 or later) | DOWNLOAD |
| I'm using the Flatsome theme | DOWNLOAD |
- If you need more information on WooCommerce templates, please refer to the WooCommerce documentation.
- The template is also included in the plugin folder under the /templates/ directory.
The templates above should work for most themes, but you can find more on what to do if they don't work for you in the troubleshooting section below.
Step 2 - Add code snippet #1 (swap out template) to functions.php
Next, swap out the template with our custom template. This snippet should be placed in your theme/child theme functions.php file:
/**
* Swaps out standard/theme archive-product.php with custom archive-wpt.php template
* @param string $template - the template file found by locate_template
* @return string $short_description including WooCommerce Product Table shortcode
*/
function barn2media_product_table_switcher($template) {
if ((basename($template) != "archive-product.php" && basename($template) != "taxonomy-product-cat.php" && basename($template) != "taxonomy-product-tag.php") || absint($_GET['wpt_view']) !== 1) {
return $template;
}
$wpt_archive = trailingslashit(get_stylesheet_directory()) . "woocommerce/archive-wpt.php";
return file_exists($wpt_archive) ? $wpt_archive : $template;
}
//Better to go in with a high priority on filters to ensure control of the final output.
add_filter( 'template_include', 'barn2media_product_table_switcher', 300, 1 );
Step 3 - Add code snippet #1 (add switching link) to functions.php
Finally, add the switching link into functions.php - this will, thanks to the 2 hooks place it in both views:
/**
* Adds switching link just above the sorting dropdowns
*
*/
function barn2media_show_switch_links() {
if ( absint($_GET['wpt_view']) !== 1 ) {
$link = add_query_arg( 'wpt_view', true );
$text = "Table View";
printf( '<p style="text-align: right;margin-bottom:20px">Grid View | <a href="%s">%s</a></p>', $link, $text );
} else {
$link = remove_query_arg( 'wpt_view' );
$text = "Grid View";
printf( '<p style="text-align: right;margin-bottom:20px"><a href="%s">%s</a> | Table View</p>', $link, $text );
}
}
add_action( 'woocommerce_before_shop_loop', 'barn2media_show_switch_links' );
add_action( 'wc_product_table_switch_views', 'barn2media_show_switch_links' );
You may be wondering why the custom hook? This is because we don't want to show the other things attached to woocommerce_before_shop_loop on the product table view.
This snippet displays a link, depending on the current view. In the default view, a product table link will show; and in product table view, a normal link will show.
Troubleshooting
As stated, the archive-wpt.php template is built on the standard WooCommerce template so it should work for most people. However, some theme developers or child theme developers will sometimes make changes in these templates, in the form of template overrides. The ones most likely to affect the snippets above, are when custom HTML markup is brought into the archive-product.php template to display a custom wrapping structure or columns layout. In an ideal world, such markup is brought in using hooks and filters provided, which would still allow the snippets above to work, but we do not live in an ideal world.
If you are trying to do this yourself, you may find that the WooCommerce Product Table is displaying incorrectly, perhaps it is displayed in a narrow column, or your sidebar/footer is broken or some other layout problems. In these cases, unless you feel comfortable to fix it yourself, you should ask your developer for help, or again Codeable is full of developers waiting to help you.