In this documentation, we will show you how to customize the Checkout Additional Info widget by Ultimate Store Kit.
Enable the Checkout Additional Info Widget
To use the Checkout Additional Info 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 Additional Info Widget Name.
- Enable the Checkout Additional Info Widget.
- Hit the Save Settings Button.
Inserting the Checkout Additional Info widget
- Go to the Elementor Editor Page and Hit the “+” (Add Element) icon button.
- Search the Checkout Additional Info 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 additional info.
2. Heading Text: You can change the heading text to your working demand.
3. Title HTML Tag: You can set the Title HTML Tag from here to – H1-H6, Div, Span ,and P.
4. Alignment: You can set the heading alignment – left, center, and right.
Work with The Style Tab
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.
Label Section
Go to Style > Label
1. Color: This option lets you set the label 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 label.
Text Area Section
Go to Style > Text Area
1. Color: This option lets you set the Textarea color.
2. Placeholder Color: This option lets you set the Textarea placeholder color.
3. Background Type: You can change the color of textarea background to classic or gradient. Here we choose the Background type Classic.
4. Background Color: This lets you change the textarea 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. Margin: Adjusts the position of an object over the canvas.
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 Border color.
10. Focus Border Color: This lets you change the Focus Border color.
11. Border Radius: Customizes the border corners for roundness.
12. 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 Additional Info widget on your website.
Video Assist
The video will come soon. Please visit the demo page for examples.
Thanks for being with us.
