Videos

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 side so that a visitor can easily compare them
    Selected products are displayed side by side so that a visitor can easily compare them

Adding product comparison with Toolset

To add product comparison to your WooCommerce site:

  1. Create the “Products to compare” View, displaying all products with basic fields. Insert this View into a page with the same name.
  2. Create the “Comparison Results” View, displaying products side by side with the fields that will be compared. Insert this View into a page with the same name.
  3. Connect the “Products to Compare” with the “Comparison Results” by:
    • adding a form and 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.

The images below illustrate the look and function of a product comparison:

Products to compare page
Products to compare page
Comparison Results page
Comparison Results page

Part 1 – Building the “Products to compare” page

Step 1 – Creating a View

Go to Toolset->Views and add a new View. Give it a name. We will call ours “Products to Compare”. Choose the “Display all results” option. In the “Content Selection” section, choose Products.

Step 2 – Designing the output

Scroll down to the Loop Output section. In the loop section, you can choose what will be displayed for a single product entry. For each product we will output:

  • the product’s name with a link
  • the product’s thumbnail image
  • an Add to Cart button

Position the cursor after the line with the wpv-loop and insert the following code:

<div>
<h3>[wpv-post-link]</h3>
[wpv-woo-product-image size="thumbnail"]
  [wpv-woo-buy-or-select]</div>

In our example, we will add these shortcodes directly to a Loop Output section rather than using a Content Template. Later, we will add an input field to the list, and, for security reasons, this input field will be forbidden from use in Content Templates except to the super admin of the site.

Step 3 – Adding the View to a page

  1. Add a new page and name it. We will call ours “Products to compare”.
  2. Press the “Fields and View” button and locate the View you have just created (e.g., “Products to compare”). Insert it into the page.
  3. Publish the page.

Your page should look similar to this:

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

Part 2 – Building the “Comparison Results” page

Now let’s build the “Comparison Results” page.

Step 1 – Creating a View

Go to Toolset->Views and add a new View. Give it a name. We will call ours “Comparison Results”. Choose the “Display all results” option. In the “Content Selection” section, choose Products.

Step 2 – Designing the output

The “Comparison Results” page displays the products side by side. In this tutorial, we will use a table-based grid, which is an HTML that displays multiple products in a row.

  1. Scroll down to the “Loop Output” section. We want our products to be displayed as a grid-table, so in the Loop Wizard choose Table-based grid and set the number of columns to 4
  2. .

  3. Select the following fields to be included in the loop:
    • Product image
    • Post title with a link
    • Product price
    • Product On Sale Status
    • Product In Stock Status
    • Add to cart button – product listing pages

    Make sure that the “Use a Content Template to group the fields in this View loop” option is checked and press Finish.

  4. Scroll down to the Content Template. Your fields have been added as shortcodes. You can add some additional HTML to customize the style and look.

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 the imagescreenshot below:

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

Step 3 – Adding the View to a page

  1. Add a new page and name it. We will call ours “Comparison Results”.
  2. Press the Fields and View button and locate the View you have just created (e.g., “Comparison Results”). Insert it into the page.
  3. Publish the page.

Your page should look similar to this:

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 first View. When the visitor submits this form, the other page will be called and the selected product IDs will be transferedtransferred to it.

Step 1 – Adding a form to the “Products to compare” View

Go to Toolset->Views and open your “Products to compare” View for editing.

We need to wrap our output 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 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 in the “Comparison Results” page will load only products with these IDs.

The screenshot below summarizes the changes we will make in the Loop Output section:

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. In the Loop Output section, position the cursor after the [wpv-items-found] shortcode and add the following line:
    <form id="wpv-product-comparison" action="[wpv-bloginfo show='url']/comparison-results/">
    

    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.

  2. Add a form submit button immediately after the line with the form:
    <input id="compare" type="submit" value="Compare">
  3. Position the cursor after the shortcode displaying your product image ([wpv-woo-product-image size=”thumbnail”]) and add the following code:
      <input type="checkbox" name="post_ids[]" value="[wpv-post-id]">
    <label>Add to compare</label>

    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.

  4. Position the cursor before the [/wpv-items-found] shortcode, and complete the form by adding the form closing tag: </form>.If you now view your “Product to compare” page, it should now 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. Go to Toolset->Views and open the “Comparison results” View for editing.
  2. In the “Query filter” section, add a new filter. From the filter dropdown, select Post ID filter. 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.
  3. Adding a filter to your View
    Adding a filter to your View
  4. Save the filter

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 in 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

A fully-styled reference site

Planning to build custom WooCommerce sites yourself? Check out our Toolset WooCommerce reference site. It’s a fully featured, fully designed reference site, that you can use as the basis of your client projects.

Get inspired by fully designed WooCommerce with Toolset
Get inspired by fully designed WooCommerce with Toolset