How to Create Product Tables with WooCommerce Product Comparison Buttons
Have you ever wanted to list WooCommerce products in a table with quick product comparison buttons? This article will explain how to do this by combining the WooCommerce Product Table and YITH WooCommerce Compare plugins.
There are lots of reasons to add WooCommerce product comparison buttons to your product tables:
- If you sell lots of products then customers need an easy way to see them alongside one another.
- Product comparison buttons are especially important if you sell technical products where customers use factual data to make buying decisions. (E.g. TV’s or mobile phones).
- Maybe you sell visual products such as clothing, and customers need to compare images of each product to choose which they like best.
By combining these two plugins, your customers can view some or all of your products in a space-saving table layout. They can click the WooCommerce product comparison buttons for the items they’re interested in. This opens up a neat comparison table, with each product in a separate column. Customers can view the products side by side and add their favorites straight to the cart.
How to add WooCommerce product comparison buttons to your product tables
Before you start, I’m assuming that you have already set up WooCommerce Product Table to list products in a space-saving table view. If not, get the plugin now and set it up according to the instructions in the ‘Getting Started’ email. Next, come back and follow these instructions:
- Go to the WooCommerce Product Table plugin settings page (WooCommerce -> Settings -> Products -> Product Tables) and enable the ‘Shortcodes’ button. This tells the product comparison buttons to display correctly in the table. Also ensure that the ‘lazy load’ box is not ticked (see Limitations, below).
- Decide which column of the table you want the product comparison buttons to appear in. This needs to be one of the fields on the ‘Edit Product’ screen. For example, you could use the short or long description, or a custom field.
- Use these instructions to choose which columns appear in the product table. Make sure your list of columns include the column where you’ll be adding the ‘Compare’ buttons. These instructions also tell you how to rename the column – for example, you might want to change the column name to ‘Compare’.
- Go to the ‘Edit Product’ screen for each product. Add the shortcode
[yith_compare_button type="button"]to the field you chose in step 2.
WooCommerce Product Table
The easy way to list products in your WooCommerce store.GET THE PLUGIN
Can I add the shortcode dynamically?
The above instructions are aimed at non-coders and provide an easy way to add a ‘Compare’ button alongside every product in the table.
If you want an easy way to automatically add the compare button for each product, then I recommend adding the
[yith_compare_button type="button"] shortcode as a default value for the custom field that you are displaying in the table. Most custom field plugins, such as Advanced Custom Fields, allow you to add a default value for each product. (Note: If you’ve added your products before setting up the custom field and default content then you need to edit each product and click ‘Update’ before the default content will be stored for that product).
Alternatively, if you have developer-level skills, then you can write some custom code to do it for you. If you don’t have a developer, then I recommend that you post a job on Codeable. Their pre-approved WordPress experts will send you a quote. Codeable is a fantastic place to find good WordPress developers who specialize in customizing plugins.
Here are some tips to get started with adding the product comparison buttons dynamically:
- Use the following code or similar to insert the ‘Compare’ buttons into one of the fields in the product table:
<?php echo do_shortcode('[yith_compare_button product="' . $product_id .' type="button"]' ); ?>
- Here’s a link to our developer documentation on how to add a custom column to the table programatically.
Woo Product Table and YITH WooCommerce Compare worked nicely together in our tests. The only limitation is that you can’t use the ‘Compare’ buttons in tables that are loaded using the lazy load method.
To avoid this limitation, simply disable lazy load in the product table.
Where to get the plugins
You can get WooCommerce Product Table from our website, and YITH WooCommerce Compare from the YITH website: