In this tutorial, you will learn how to implement a product comparison in your WooCommerce site using the Toolset plugins, without PHP.

How product comparison works

Product comparison allows you to select a few products and display them together, side by side, to compare their attributes.

  1. A visitor enters the “Products to compare” page, which displays all products. Each product entry includes an additional checkbox field, called “Add to compare”, allowing the visitor to choose that product for comparison.The visitor then clicks these checkboxes to select a few products for comparison before submitting the form. The checkbox values are the IDs of the products. By selecting checkboxes, the visitor adds the product IDs to the submitted form.
    Select products to compare and press the compare button
    Select products to compare and press the compare button
  2. Upon submitting the form, the visitor is sent to the “Comparison Results” page. Since the checkbox values are the IDs of the products, the form’s parameters include all the IDs of the products selected for comparison.
  3. The “Comparison Results” page loads the products with the selected IDs from the database and displays them side by side.
    Selected products are displayed side by sid
    Selected products are displayed side by sid

Adding product comparison with Toolset

To add product comparison to your WooCommerce site:

  1. Create the Products to compare page, displaying all products with basic fields.
  2. Create the Comparison Results page, displaying products side by side with the fields that will be compared.
  3. Connect the Products to compare page with the Comparison Results page by:
    • adding a form and a submit button outside the loop of the Products to compare view.
    • adding checkboxes inside the loop of the Products to compare view.
    • adding a product ID filter to the Comparison Results view.

Part 1: Building the Products to compare page

Step 1: Creating a Layout with a View cell

In your training site

  1. Go to Pages -> Add new and add a new page.
  2. Give it a name: Products to compare
  3. Save your page as a draft.
  4. Click the Content Layout Editor button to begin designing the body of your page with Layouts.
  5. Draw a full column cell.
  6. On the screen that opens, locate the View cell and insert it.

Step 2: Setting up a View

  1. In the Content Selection section, choose Products.
  2. Scroll down to Loop Output Editor.
  3. Use Loop Wizard to display your products in a 4-column grid.
  4. For each product, display the product fields of your choice; examples follow:
    • a. Product image
    • b. Product title with a link
  5. Click Save and Close this view and return to the layout.
  6. Save your layout.
  7. Publish your page.

Your page should look like the following picture:

Outcome of the steps completed so far
Outcome of the steps completed so far

Part 2: Building the Comparison Results page

Step 1: Creating a Layout with a View cell

  1. Go to Pages ->Add new and add a new page.
  2. Give it a name: Comparison Results.
  3. Save your page as a draft.
  4. Click the Content Layout Editor button to begin designing the body of your page with Layouts.
  5. Draw a full column cell
  6. On the screen that opens, locate the View cell and insert it.

Step 2: Setting up a View

  1. In the Content Selection section, choose Products.
  2. Scroll down to Loop Output Editor.
  3. Use Loop Wizard to display your products in a 4-column grid.
  4. For each product display the product fields of your choice (examples below):
    • Product image
    • Post title with a link
    • Product price
    • Product On Sale Status
    • Product In Stock Status
    • Add to cart button: product listing pages

Content template displaying a single WooCommerce product after completing the steps presented so far
Content template displaying a single WooCommerce product after completing the steps presented so far
Hint: if you want to display the “On Sale” and “In Stock” fields with Yes/No values, rather than the default 1/0, replace the Types shortcodes with a conditional output, as shown in this screenshot.

  1. Click Save and Close this view and return to the layout.
  2. Save your layout.
  3. Publish your page.

Your page should look like the following picture.

Comparison Results page after completing the steps presented so far
Comparison Results page after completing the steps presented so far

Part 3: Connecting the pages

Two pages with basic Views are now ready. It is time to connect them. We will add a form to the Compare products View. When the visitor submits this form, the other page, Comparison Results, will be called and the selected product IDs will be transferred to it.

Step 1: Adding a form to the Products to compare View

We need to wrap the output of the Products to compare page in an HTML form. The action of the form will be the URL of the Comparison Results page. We also need to add a checkbox to each of the products displayed by the Products to compare View. The value of each of the checkboxes should be the ID of the product (post_id). This way, the selected checkboxes will transfer the product IDs for comparison. The View on the Comparison Results page will load only products with these IDs.

  1. Open your Compare products View for editing.
  2. Scroll down to Loop Output Editor
  3. Position the cursor after the [wpv-items-found] shortcode and add the following line:

The form now has the action attribute set to the URL of the Comparison Results page. The [wpv-bloginfo show=’url’] shortcode returns the URL of the site, to which we add the slug from the Comparison Results page.

  1. Add a form submit button immediately after the line with the form:
  1. Position the cursor before the [/wpv-items-found] shortcode, and complete the form by adding the form closing tag:

Changes to be made (highlighted in blue) in the Loop Output section
Changes to be made (highlighted in blue) in the Loop Output section

  1. Scroll down to the Templates for this View section.
  2. Position the cursor after the shortcode displaying your product title and add the following code:

This is an input field to collect the product IDs selected by the visitor for comparison. The name of the checkbox field needs to be post_ids[]. The value needs be the [wpv-post-id] shortcode, which returns the ID of the product in the View loop. This selection of the name and value attributes will result in the submitted form generating an array for all of the product IDs selected for comparison.

Adding input fields
Adding input fields
If you view your Products to compare page now, it should look like this:
Products to compare page after the changes
Products to compare page after the changes

Step 2: Adding a filter to the Comparison Results View

Now, we want to limit the results displayed by the Comparison Results page to products whose IDs were selected in the Products to compare section.

  1. Open your Comparison Results View for editing.
  2. Scroll down to the Query Filter section.
  3. Add a new filter.
  4. From the filter dropdown, select Post ID filter.
  5. When the filter is added, select the Posts with IDs set by this URL parameter radio box in the How to filter section. Retain the default value in the input field, which is post_ids.

Adding a filter to your View
Adding a filter to your View
You have just instructed the View to display only those products whose IDs are received via the post_ids parameters of the URL. In our case, these IDs will be transferred by the form used on the Products to compare page. Learn more about passing post IDs via URLs in the documentation page.

Step 3 – Testing it all together

Let’s test how the product comparison works.

  1. Visit your “Products to compare” page.
  2. Select 3 or 4 products for comparison by checking the “Add to compare” field.
  3. Press the “Compare” button.
  4. You should be redirected to the “Comparison Results” page where you will see your selected products displayed side by side:

Comparison Results page: Final version
Comparison Results page: Final version

Questions? Ideas? Suggestions?

If you have any questions on how to add product comparison to your WooCommerce site, add your comments and we’ll get back to you. Toolset clients can also create tickets in our technical support forum, where are support team works 6 days / week, 19 hours / day.