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

Enable the Checkout Payment Widget

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

Inserting the Checkout Payment widget

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

Work with The Style Tab

Content Section

Go to Style > Content

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

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

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

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

Payment Methods Section

Go to Style > Payment Methods

1. Checked Color: This option lets you change the checked color.

2. Label Color: This option lets you change the label color.

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 payment method border color.

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

9. Bottom Spacing: You can adjust the bottom spacing of the payment method.

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

Button Section

Go to Style > Button

Come to the Button section, you will get two subsections; Normal and Hover.

Lets explore the Normal subsections-

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

2. Background Color: This option lets you set the button text background color.

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

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

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

6. Border Color: This lets you change the button border normal color.

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

8. Full Width: Enable/disable the full width switcher button to show/hide the button full-width.

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

In the Hover subsection, you will get the below customization options-

10. Color: This option lets you set the Button hover color.

11. Background Color: This option lets you set the Button hover background color.

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

Video Assist

The video and demo page will come soon.

Thanks for being with us.