View Categories

Woo Product Compare

2 min read

EA Woo Product Compare lets you easily pick and compare any WooCommerce products anywhere your page with plenty of styling options. It comes with amazing ready theme layouts to make your product compare section interactive on your website. Let’s check out the step by step guidelines below to configure and style EA Woo Product Compare:

How To Activate EA Woo Product Compare #

Before you begin, make sure that you have the WooCommerce Plugin activated.

To use this Essential Addons element, find the ‘EA Woo Product Compare’ element from the Search option under the ‘ELEMENTS’ tab. Simply just Drag & Drop the EA Woo Product Compare’ into the Drag widget hereor the ‘+’ section.Woo Product Compare

How To Configure The Content Settings #

After you have completed adding the EA Woo Product Compare in your Elementor Editor, now all you need to do is to configure the ‘Content’ tab. It consists of  ‘Product Compare’, & ‘Compare Table Settings’ options. Woo Product Compare

Product Compare #

From the ‘Products’ option, you can add as many WooCommerce products as you want to add to your Woo Product Compare. Just add 3 or more characters of your product name, it will then automatically fetch and display your desired product. You have to check & add it in the ‘Products’ search panel.Woo Product Compare

If you want, you can change the default theme layout of EA Woo Product Compare from the ‘Presets’ section. It comes with six separate ready theme layouts. From the ‘Presets’ drop-down menu, Theme 3 & Theme 4 come up with the options highlight specific products. Woo Product Compare

Compare Table Settings #

From ‘Compare Table Settings’ section, you can change the Table Title, and Table Title HTML Tags. Woo Product Compare

‘Fields to show’ offers options such as Image, Title, Price, Description, Add to Cart, SKU, Availability, Weight, Dimension, Color, and Size. You can decide and configure which field you want to show in your EA Woo Product Compare. Woo Product Compare

Each of the ‘Fields to Show’ section consists of two options: ‘Types’ & ‘Label’. For example, from ‘Image’ field section you can choose the types to image, title, or pick other options and change the Label title anytime. If you want to add more fields, you can do that easily by using the ‘Add Item’ tab. Woo Product Compare

You can even repeat fields like “Price”, and “Add to cart”. Also if you want, you can link your product images by configuring Make Product Image Linkable options and add your preferred field icon.Woo Product Compare

How to Style EA Woo Product Compare  #

Switch to the ‘Style’ tab to style all the features of EA Woo Product Compare.Woo Product Compare

Compare Table General #

From the ‘Compare Table General’ section, you can set the width, margin, padding, border type, and border radius.Woo Product Compare

Besides, you can configure ‘Background Type’ in both actions ‘Classic’ & ‘Gradient’, and set your ‘Container Box Shadow’ to change the outlook of your product compare table layout, and style it as per your preference.Woo Product Compare

Others #

From the ‘Table Style’ section, you can enable or disable the ‘Style Content Column Separately’. If you go with the default ‘Style Content Column Separately’ section, all of the changes you will make, will be considered for the whole table layout style, product titles, headers, colors, columns, buttons, even & odd rows, title rows, and more. Woo Product Compare

On the other hand, if you enable ‘Style Content Column Separately’, you can separately set your Table Style, Header Column, and more. 

For the purpose of this documentation, we have added three products here, so it comes with three separate options ‘Product Column 1’, ‘Product Column 2’, & ‘Product Column 3’. 

Woo Product Compare

Besides, you can set your ‘Price Style’ section of your EA Woo Product Compare by configuring the ‘Normal Price Style’ & ‘Sales Price Style’ to make your pricing appealing the way you want. Woo Product Compare

Final Outcome #

By following the basic steps and a bit more modifying, you can style your EA Woo Product Compare as per your preference.Woo Product Compare

This is how you can simply showcase your WooCommerce Products comparison in a beautiful table layout for your eCommerce website by using EA Woo Product Compare.

Getting stuck? Feel to Contact Our Support for further assistance.

Powered by BetterDocs

  • 00Days
  • 00Hours
  • 00Mins
  • 00Secs

Wait... before you go!

Checkout now to Save