In this documentation, we will show you how to customize the Checkout Billing Address widget by Ultimate Store Kit.
Enable the Checkout Billing Address Widget
To use the Checkout Billing Address widget by Ultimate Store Kit, first, you have to enable the widget.
- Go to WordPress > Ultimate Store Kit Plugin dashboard.
- Then Click the WC Widgets Tab.
- Search the Checkout Billing Address Widget Name.
- Enable the Checkout Billing Address Widget.
- Hit the Save Settings Button.
Inserting the Checkout Billing Address widget
- Go to the Elementor Editor Page and Hit the “+” (Add Element) icon button.
- Search the Checkout Billing Address widget.
- Drag the widget and drop it on the editor page.
Work with the Content Tab
Heading Section
Go to Conetent > Heading
1. Show Heading: Enable/disable the Show Heading swithcer button to show/hide the heading from the checkout billing address form.
2. Alignment: You can set the heading alignment – left, center, and right.
Work with The Style Tab
Container Section
Go to Style > Container
1. Background Color: This lets you change the Container Background color.
2. Alignment: You can set the container text as – left, and right.
3. Padding: Add spaces around an object to increase the inner area. Padding allows you to control the internal space within an element.
4. Margin: Adjusts the position of an object over the canvas.
5. Border Type: You can set the Border Type to Default, None, Solid, Double, Dotted, Dashed, or Groove. We choose here the Border Type Solid.
6. Border Width: The border width property allows you to control how thick or thin the border is.
7. Border Color: This lets you change the Border color.
8. Border Radius: Customizes the border corners for roundness.
Heading Section
Go to Style > Heading
1. Color: This option lets you set the heading color.
2. Typography: Change the font family, size, weight, style, transform, decoration, line height, letter spacing, and word spacing from here.
3. Bottom Spacing: This option lets you adjust the bottom spacing for the heading.
Form Section
Go to Style > Form
Come to the Form section, you will get two subsections; Label and Input.
Lets explore the Label subsections-
1. Color: This options lets you change the Label color.
2. Required Indicator Color: This options lets you change the Required Indicator color.
3. Bottom Spacing: This option lets you adjust the bottom spacing for the Label.
4. Typography: Change the font family, size, weight, style, transform, decoration, line height, letter spacing, and word spacing from here for the label.
Lets explore the Input subsections-
1. Color: This options lets you change the Input color.
2. Placeholder Color: This options lets you change the input Placeholer color.
3. Background Color: This options lets you change the input background color.
4. Padding: Add spaces around an object to increase the inner area. Padding allows you to control the internal space within an element.
5. Margin: Adjusts the position of an object over the canvas.
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 Radius: Customizes the border corners for roundness.
Lets explore the Focus subsection-
8. Color: This option lets you set the focus text color.
9. Background Color: This lets you change the focus Background color.
10. Border Type: You can set the Border Type to Default, None, Solid, Double, Dotted, Dashed, or Groove. We choose here the Border Type Solid.
11. Border Width: The border width property allows you to control how thick or thin the border is.
12. Border Color: This lets you change the Border color.
13. Typography: Change the font family, size, weight, style, transform, decoration, line height, letter spacing, and word spacing from here.
All done! You have successfully customized the Checkout Billing Address widget on your website.
Video Assist
The video will come soon. Please visit the demo page for examples.
Thanks for being with us.
