In this documentation, we will show you how to customize the Add To Cart Widget by Ultimate Store Kit.

Enable the Add To Cart Widget

To use the Add To Cart 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 Add To Cart Widget Name.
4. Enable the Add To Cart Widget.
5. Hit the Save Settings Button.

Inserting The Add To Cart widget

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

Configuring the Content Tab

Layout Section

Go to Content > Layout

1. Show Quantity Field: Enable or disable the switcher button to visible or invisible the quantity field.
2. Space Between: You can add or remove spaces between the quantity field &  the button by using this option.
3. Text: You can add/remove text to your add to cart button by using this option.

4. Icon: You can add an icon to your button by using this option.
5. Icon Position: You can select the icon position to left or right by using this option.
6. Icon Spacing: This option allows you to adjust the space between the icon and the text.
6. Alignment: You can set the position of the button & quantity field to left, right, center & justified by using this option.

Work with the Style Tab

Add to Cart Section

Go to Style > Add to Cart

In this section, we have two tabs. One is Normal and the other is Hover. Let’s start with the Normal tab –1. Color: This option allows you to change the button’s text color.
2. Background Type: You can change the color of any object background to classic or gradient. In Classic, you can change the background color and also set an image to the background. In the gradient option, you can also set the background color along with locations and the angle for each breakpoint to ensure the gradient adapts to different screen sizes. Also, you can change the gradient type (Radial & Linear) and positions.
3. Color: You can select the background color by using this option.

4. Border Type: This option allows you to add borders to your items. You can select various border types from this option. Such as Solid, Double, Dotted, Dashed, Groove.
5. Border Width: Set the thickness of the border by selecting the width.
6. Border Color: You can change the border color by this option.
7. Border Radius: The Border Radius controls the roundness of the border.

8. Padding: Add spaces around an object to increase the inner area. Padding allows you to control the internal space within an element.
9. Typography: Change the text’s font family, size, weight, transform, style, decoration, line height, letter spacing, and word spacing from here.
10. 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. Position: You can set the Box Shadow position, Outline and Inset. Here we set the Box Shadow position as Outline. You can also change the Box Shadow color from here.

 Let’s Proceed to the Hover Tab –

11. Color: You can change the text & icon hover color by this option.

12. Border Color: You can change the border hover color by this option.

13. Background Type: You can select the background type to classic & gradient. Here we selected classic.

14. Color: You can change the background color by using this option.

Quantity Field Section

Go to Style > Quantity Field

1. Width: You can adjust the width of the quantity field box by using this option.

2. Color: You can set color to the number by using this option.

3. Background Type: You can select the background type to classic & gradient. Here we selected classic.

4. Color: You can select the background color by using this option.

5. Border Type: This option allows you to add borders to your items. You can select various border types from this option. Such as Solid, Double, Dotted, Dashed, Groove.
6. Border Width: Set the thickness of the border by selecting the width.
7. Border Color: You can change the border color by this option.
8. Border Radius: The Border Radius controls the roundness of the border.

9. Padding: Add spaces around an object to increase the inner area. Padding allows you to control the internal space within an element.
10. Margin: This option allows you to adjust the space & create gaps around the quantity field button.
11. Typography: Change the font family, size, weight, transform, style, decoration, line height, letter spacing, and word spacing from here.
12. Box Shadow: You can add the box shadow around the button by using this option.

All done! You have successfully customized the Add To Cart widget on your website.

Video Assist

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

Thanks for being with us.