In this documentation, we will show you how to customize the Compare Button widget by Ultimate Store Kit.

Enable the Compare Button Widget

To use the Compare Button widget by Ultimate Store Kit, first, you have to enable the widget.

1. Go to WordPress > Ultimate Store Kit Plugin dashboard.
2. Then Click the WC Widgets Tab.
3. Search the Compare Button Widget Name.
4. Enable the Compare Button Widget.
5. Hit the Save Settings Button.

Inserting The Compare Button Widget

1. Go to the Elementor Editor Page and Hit the “+” (Add Element) icon button.
2. Search the Compare Button widget.
3. Drag the widget and drop it on the editor page.

Work with the Style Tab

Compare Button Section

Go to Style > Compare Button

Come to the Compare Button section, you will get two subsections; Icon and Badge.

In the Icon subsection, you will get the below customization options-

1. Alignment: You can set the Compare button alignment as – Left, Center and Right.

2. Color: This option lets you set the Compare Button Icon Color.

3. Background Color: This option lets you set the compare button icon background color.

4. Border Type: You can set the Border Type to Default, None, Solid, Double, Dotted, Dashed, or Groove. We choose here the Border Type Solid.

5. Border Width: The border width property allows you to control how thick or thin the border is.

6. Border Color: This lets you change the icon Border color.

7. Border Radius:  Customizes the border corners for roundness.

8. Padding: Add spaces around an object to increase the inner area. Padding allows you to control the internal space within an element.

9. Box Shadow: The Box Shadow property is used to create the shadow around the Category Button. It takes Four values: Horizontal offset, Vertical offset, blur, and Spread to customize the Box shadow.

• Box Shadow Color: This lets you change the Box Shadow color.
• Position: you can set the Box Shadow position Outline and Inset. Here we set the Box Shadow position Outline.

10. Icon Size: You can set the Compare button icon size from here.

Come to the Badge subsection, you will get the below customization options-

11. Color: This option lets you set the Badge Color.

12. Background Color: This option lets you set the Badge Background Color.

13. Border Type: You can set the Border Type to Default, None, Solid, Double, Dotted, Dashed, or Groove. We choose here the Border Type Solid.

14. Border Width: The border width property allows you to control how thick or thin the badge border is.

15. Border Color: This lets you change the badge Border color.

16. Border Radius:  Customizes the border corners for roundness.

17. Size: This option lets you set the Badge size from here.

18. Typography: Change the font family, size, weight, style, transform, decoration, line height, letter spacing, and word spacing from here.

19. Offset: The Offset property lets you set the position of the badge. Inside the Offset property, you will get the Vertical Offset, Horizontal Offset options to position the badge.

All done! You have successfully customized the Compare Button widget on your website.

Video Assist

The video will come soon. Please visit the demo page for examples.

Thanks for being with us.