In this documentation, we will show you how to customize the Checkout Coupon Form widget by Ultimate Store Kit.

Enable the Checkout Coupon Form Widget

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

Inserting the Checkout Coupon Form widget

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

Work with The Style Tab

Meta Section

Go to Style > Meta

Come to the Meta section, you will get two subsections; Info and Description.

Lets explore the Info subsection-

1. Color: This option lets you change the Meta text color.

2. Link Color: This option lets you change the Meta text link color.

3. Link Hover Color: This option lets you change the Meta text link hover color.

4. Background Color: This option lets you change the Meta text background color.

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

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

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

8. Border Color: This lets you change the Border color.

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

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

Lets explore the Description sub section-

11. Color: This option lets you set the description color.

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

Form Section

Go to Style > Form

Come to the Form section, you will get two subsections; Input and Button.

Lets explore the Input subsections-

1. Padding: You can set the Padding from here for the Input field.

2. Color: This option lets you set the input text color.

3. Background Type: you can change the color of any object background to classic or gradient. Here we choose the Background type Classic.

4. Background Color: This lets you change the input Background color. If you want, you also can change an image to the Background.

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

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

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

8. Border Color: This lets you change the Border color.

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

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

Let’s explore the Button subsections-

1. Color: This option lets you set the Button text color.

2. Background Type: you can change the color of any object background to classic or gradient. Here we choose the Background type Classic.

3. Background Color: This lets you change the button Background color. If you want, you also can change an image to the Background.

4. Color: This options lets you change the Button hover text color.

5. Background: This options lets you change the Button hover text background color.

6. Padding: You can set the button hover padding.

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

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

9. Border Color: This lets you change the button hover border color.

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

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

12. 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.

All done! You have successfully customized the Checkout Coupon Form widget on your website.

Video Assist

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

Thanks for being with us.