The Compare Products widget by Ultimate Store Kit Pro allows customers to view and compare multiple products in a dedicated comparison table, making it easier to evaluate differences in features, specifications, pricing, and other important details. By presenting product information side by side, the widget helps customers make informed purchasing decisions without having to switch between multiple product pages. This streamlined comparison experience can improve user satisfaction, increase engagement, and encourage conversions. In this documentation, we will show you how to customize the Compare Products Widget by Ultimate Store Kit Pro.
Enable the Compare Products Widget
To use the Compare Products widget by Ultimate Store Kit, first, you have to enable the widget.
- Go to WordPress > Ultimate Store Kit Plugin dashboard.
- Then, click the WooCommerce Tab.
- Search the Compare Products Widget Name.
- Enable the Compare Products Widget.
- Hit the Save Settings Products.
Things That Must Be Done
1. Go to the WP Dashboard and then click on the Ultimate Store Kit.
2. Below, inside the Ultimate Store Kit dashboard, you will find the Template Builder section. Now click on it.
3. After that, click on the Add New Template to create a new template.
4. Choose Template Type: You can select the template type with this option. You need to find the template type named compare products and select that.
5. Name Your Templates: In this field, you have to name the template.
6. Switcher: Enable the switcher to make the template active with this option.
7. Update Template: Click on this Products to save the settings that you have changed above.Product
After clicked on the update template Products, the settings will change and it will redirect to the Elementor editor page where you can customize the template. Let’s see what we have to do here –
8. Go to the Elementor Editor Page and Hit the “+” (Add Element) icon Products.
9. Search the Compare Products widget.
10. Drag the widget and drop it on the editor page and publish the page.
11. Now, you have to go back to the WP Dashboard and then click on the WooCommerce Tab.
12. After that, click on the settings option of the WooCommerce Tab.
13. Now, click on the Advanced Tab.
14. Now, scroll below, and you will find the compare page field. Here, you have to select the page that you just clicked.
15. Click on the ” Save Settings ” Products to apply the changes you have made.
How the user compares counts on the Compare Products
You must enable the compare feature on the grid widget that you are using to showcase your products. You need to follow this –
1. Select the Grid widget. Here, we have used the Florence Grid, so we have selected the Florence Grid and then navigated to the content tab.
2. Click on the Settings section to open the settings options.
3. Now, move to the Action Products tab of the settings section.
4. Now, enable the switcher of the compare to display the compare icon on the products.
All done, now the product will display the compare icon, and let’s see how we can connect the Compare Products with this appeared compare icon.
5. Click on the compare icon on the grid widget.
6. The number of clicks on the compare icon of the products will count on the Products.
Note: You can see this preview when you publish the page, and on the live page, you will click on the compare icon and it will count the products quantity on button. After that when you click on the button it will redirect you to the compare product page that you have created from the template builder.
You will see this page redirected when you click on the compare button.
Configuring the Style Tab
Compare Table Section
Go to Style > Compare Table
1. Border Type: You can add and change the border types with this option.
2. Border Width: You can set the thickness of the border with this option
3. Border Color: You can make changes to the border color with this option.
4. Cell Padding: You can adjust the inner space of the cells with this option.
In this section, we have two more tabs. These are ODD & EVEN. Let’s start with the ODD Tab first –
1. Background Type: You can change the background type to be classic or gradient with this option.
2. Color: You can make changes to the background color with this option.
3. Image: You can change the background image with this option.
Now, let’s proceed to the EVEN tab now –
4. Background Type: You can change the background type to be classic or gradient with this option.
5. Color: You can make changes to the background color with this option.
6. Image: You can change the background image with this option.
Remove Button Section
Go to Style > Remove Button
In this section, we have two more tabs. These are Normal & Hover. Let’s start customizing the Normal Tab first –
1. Color: You can change the remove button text color with this option.
2. Background Type: You can change the background type to be classic or gradient with this option. Here we have selected the background type as Classic.
3. Color: You can make changes to the button background color with this option.
4. Border Type: You can add and change the border types with this option.
5. Border Radius: You can set the thickness of the border with this option.
6. Padding: You can adjust the inner space of the button with this option.
7. Margin: You can adjust the space around the button with this option.
8. Space Between: You can adjust the space between the remove button text and the icon with this option.
9. Box Shadow: You can add a shadow effect to the button with this option.
10. Typography: Change the font family, size, weight, transform, style, decoration, line height, letter spacing, and word spacing from here.
Now, let’s proceed to the Hover Tab –
11. Color: You can make changes to the remove button text hover color with this option.
12. Background Type: You can change the background type to be classic or gradient with this option. Here we have selected the background type as classic.
13. Color: You can change the button’s background hover color with this option.
14. Box Shadow: You can add a hover shadow effect to the button with this option.
Image Section
Go to Style > Image
1. Background Type: You can change the background type to be classic or gradient with this option.
2. Color: You can change the background color with this option.
3. Image: You can change the background image with this option.
4. Border Type: You can add and change the border types with this option.
5. Border Radius: You can control the roundness of the border with this option.
6. Padding: You can adjust the inner space of the image with this option.
7. Spacing: You can adjust the space between the image and the content with this option.
8. Size: You can control the image size with this option.
9. Box Shadow: You can add a shadow effect to the image with this option.
Title Section
Go to Style > Title
1. Color: You can make changes to the title text color with this option.
2. Hover Color: You can make changes to the title text hover color with this option.
3. Margin: You can adjust the space around the title field with this option.
4. Typography: Change the font family, size, weight, transform, style, decoration, line height, letter spacing, and word spacing from here.
5. Text Shadow: You can add a shadow effect to the title text with this option.
Price Section
Go to Style > Price
1. Spacing: You can adjust the space between the regular and sale price with this option.
2. Color: You can make changes to the sale price color with this option.
3. Typography: Change the font family, size, weight, transform, style, decoration, line height, letter spacing, and word spacing from here.
4. Color: You can make changes to the regular price color with this option.
5. Typography: Change the font family, size, weight, transform, style, decoration, line height, letter spacing, and word spacing from here.
Action Button Section
Go to Style > Action Button
1. Border Type: You can add and change the border types with this option.
2. Border Radius: You can control the roundness of the border with this option.
3. Padding: You can adjust the inner space of the action buttons field with this option.
4. Space Between: You can adjust the space between cart and quick view action button with this option.
5. Typography: Change the font family, size, weight, transform, style, decoration, line height, letter spacing, and word spacing from here.
In this section, we have two more tabs. These are Cart & Quickview. Let’s start customizing the Cart tab first –
1. Color: You can make changes to the cart icon color with this option.
2. Background Color: You can make changes to the background color of the cart action field with this option.
3. Color: You can make changes to the cart icon hover color with this option.
4. Background Color: You can make changes to the cart action button background hover color with this option.
Now, let’s proceed to the Quick View tab –
1. Color: You can make changes to the quickview icon color with this option.
2. Background Color: You can make changes to the quick view action button’s background color with this option.
3. Color: You can make changes to the quick view icon’s hover color with this option.
4. Background Color: You can make changes to the quick view button’s background hover color with this option.
Additional Info Section
Go to Style > Additional Info
In this section, we have two more tabs. These are Label & Value. Let’s start describing the Label tab first –
1. Color: You can make changes to the additional information label’s text color with this option.
2. Typography: Change the font family, size, weight, transform, style, decoration, line height, letter spacing, and word spacing from here.
Now let’s proceed to the Value tab –
1. Color: You can make changes to the value text color with this option.
2. Typography: Change the font family, size, weight, transform, style, decoration, line height, letter spacing, and word spacing from here.
All done! You have successfully customized the Compare Products widget on your website.
Video Assist
The demo and video will come soon.
Thanks for being with us.
