Before you begin, make sure that you have installed and activated Sastra Addons Pro plugin on your website. Without the Sastra Addons Pro activated, you cannot use this elements.
How to Configure and Style Compare Table #
Compare Table 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 Compare Table:
How to Activate Compare Table #
Note: Before you begin, make sure that you have the ‘WooCommerce‘ Plugin activated.
To use this Sastra Addons element, find the ‘Compare Table‘ element from the Search option under the ‘ELEMENTS‘ tab. Simply just Drag & Drop the ‘Compare Table’ into the ‘Drag widget here‘ or the ‘+’ section.
After you have successfully done with step 1, this is how the element is going to look like.
How to Configure the Content Settings #
Under the content tab, you will see several options like ‘Settings’ . You can configure these settings to customize the content of your Compare Table.
Settings #
From this section, you can set remove text and empty text. Also you can set add to cart button text for simple item, grouped item and variable item.
Click to See Live Demo #
How to Style Compare Table #
To customize Compare Table, click on the ‘Style’ tab, and you will find many different options here.
General #
From here, you can set border color and styling to border.
Headings #
From this section, you can set heading color, background color, typography, padding and heading horizontal & vertical alignment as well.
Others #
In the settings for ‘Content’, you can specify the color scheme for odd and even items, background colors for odd and even items, typography, alignment, product title color, removal icon styling, and many additional customization choices.
Through the ‘Add to Cart’ settings, you can adjust the color, background color, border color, and box shadow for the add to cart button, with options for both hovered and normal states. Additionally, you can apply styling to borders and explore a range of other customization possibilities.
From ‘Remove Button’ section, you can change remove button color, background color and border color with hovered and normal options. Moreover, you styling to border and many more.
Final Outcome #
By following the basic steps and a bit more modifying, you can style your Compare Table as per your preference.
This is how you can simply showcase your WooCommerce Products comparison in a beautiful table layout for your eCommerce website by using Compare Table.
If you need any help, feel free to contact our dedicated support team for further assistance.
