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

Enable the Checkout Shipping Form Widget

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

Inserting The Checkout Shipping Form widget

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

Work with the Style Tab

Container Section

Go to Style > Container

1. Enable the Full Form: Click on the blank spot to get the full view of the checkout shipping form.

2. Background: You can change the background color with this option.
3. Alignment: This option allows you to move the content position to the left or right.
4. Padding: You can adjust the inner space of the form with this option.
5. Margin: You can adjust the space around the form with this option.

6. Border Type: Set the border type of the form. Different types of borders are available: Solid, Dashed, Dotted, Double, Groove.
7. Border Width: Set the thickness of the border with this option.
8. Border Color: You can change the border color with this option.
9. Border Radius: This option allows you to control the roundness of the border.

Heading Section

Go to Style > Heading

1. Color: You can change the heading color by using this option.
2. Margin: This option allows you to adjust the space & create gaps around the heading.
3. Alignment: You can change the position of the heading to left, center or right with this option.
4. Typography: Change the heading’s font family, size, weight, transform, style, decoration, line height, letter spacing, and word spacing from here.

Label Section

Go to Style > Label

1. Color: This option allows you to change the label color.
2. Required Indicator Color: You can change the Required Indicator Color with this option.
3. Margin: This option allows you to adjust the space & create gaps around the label.
4. Typography: Change the label text’s font family, size, weight, transform, style, decoration, line height, letter spacing, and word spacing from here.

Input Section

Go to Style > Input

In this section, we have two tabs. These are Normal & Focus. Let’s proceed to the Normal tab first –

1. Input Color: You can change the input text color with this option.
2. Background: You can change the background color with this option.
3. Border Type: You can add and change the border type with this option.
4. Border Width: Set the thickness of the border with this option.

5. Border Color: This option allows you to change the border color with this option.
6. Padding: This option allows you to adjust and create gaps in the input field.
7. Typography: Change the input text’s font family, size, weight, transform, style, decoration, line height, letter spacing, and word spacing from here.

Now, let’s proceed to the Focus Tab –

8. Input Color: You can change the input text color with this option.
9. Background: You can change the input background color with this option.
10. Border Type: You can add and change the border type with this option.
11. Border Width: Set the thickness of the border with this option.
12. Border Color: This option allows you to change the border color with this option.

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

Video Assist

The video and demo will come soon. Thanks for staying with us.