Add product comparison function in WooCommerce

Tutorials 0 lượt xem
Add product comparison function in WooCommerce thumbnail

Hello everyone!

Buyers often have the need to compare products to find the best product for them. For example, when buying a phone, at the same price, they want to compare which product has more superior features, suitable for their needs. Usually, customers have to open many product tabs and click back and forth to compare, which is very inconvenient. In order to compare products conveniently, the website needs to have a product comparison function right on the page.

Add product comparison function

To , we can use a support plugin called YITH WooCommerce Compare , developed by YITH. Find, install and activate this plugin from the WordPress plugin repository! This is a free version only, limited to comparing two products and showing a comparison table. However, that is enough. If you want to be more professional, you can compare the free and paid versions of this plugin here .

product comparison function

After installing & activating, you will see a new menu appear in the Dashboard, YITH, go to the menu  YITH > Compare . In the  General Settings section , you set the following:

  • Link or Button : choose to display the comparison as a button or a link.
  • Link/Button text : title of link/button.
  • Show button in single product page : select to show compare button in product detail page.
  • Show button in products list : select to show compare button in product list page.
  • Open automatically lightbox : the comparison table will automatically appear after pressing the compare button.

product comparison function

Next you set up  Table settings

  • Table title : the title of the comparison table.
  • Fields to show : choose what information should appear in the comparison table. You can also select the attributes you add to the product for comparison.
  • Repeat “Price” field : displays the product price at the bottom of the table.
  • Remeat “Add to cart” field : display the purchase button at the bottom of the table.
  • Image size : set the image size.

Finally, save these settings!

Table settings

Compare products

Now I go out the homepage, go to the product view, I will see the  Add to compare  button like this. You press this button, the table will immediately appear in the form of a popup.

Compare products

The comparison table will look like this. You can add more products to compare. If you want to remove any product, click the Remove button . You will see that the subject lines on the left are in English, which is not very nice, because my website is in Vietnamese. I will guide Vietnamese translation for themes and plugins in another post.

Compare products

summary

Compare products is an extremely necessary feature for sales pages using Woocommerce . Especially electronic sales sites such as phones, laptops, etc. Through this article, you can add a comparison feature to your website. Good luck!

Bài viết liên quan