Get Early Access to GutenKit Page Builder Blocks

Checkout Form – Shipping

ShopEngine’s Checkout Form- Shipping is a pretty useful widget as with it you can add an appeal to your shipping checkout form. You can make all the necessary changes to the form elements right from the font to the appearance.

How to Use Checkout Form- Shipping Widget? #

Creating a Checkout Shipping form involves two major steps. 1. Create a template and 2. Design shipping form on Elementor.

Create a template #

First of all, log in to your WordPress dashboard and navigate to ShopEngine > Builder Templates.

Then, click the “Add New” button on the top right corner.

Immediately after that, a popup window will show up for template settings. In the Template Settings window:

  1. Enter a template Name.
  2. Select the template Type: Checkout.
  3. Activate the template.
  4. Choose a Sample Design or start designing from scratch.
  5. Finally, hit the “Save Changes” button.
create templat for checkout shipping form

Your template is created and you can see it on top of the list. Now, click “Edit with Elementor” to switch to the Elementor window.

Edit Checkout-shipping template with Elementor

Design Shipping form on Elementor #

In this step, you will design a shipping form for the checkout page. In the Elementor editor, drag & drop the Checkout Form Shipping widget into the design area.

Drag and drop checkout form- shipping widget

The shipping checkout form will show up instantly after that.

Under the Content tab

You can change the layout and title of the checkout shipping form.

In the Layout section, you can sort the input field and manually change the sequence of the fields.

You can edit the checkbox title from the Style tab using the parameters like color, font size, and margin.

checkout shipping sort input field

In the General section, you can add a Form Title for the Checkout shipping form.

Enter title for checkout shipping form

Under the Style tab

You can customize the Checkbox Title by changing the color, font size, typography, and margin.

Checkout form- shipping is on display with the checkbox title section

You can also show or hide different elements in the form like first name, last name, company name, street address, etc. by turning on toggles in the Field Visibility section.

Checkout form- shipping is on display with field visibility section

In the Form Container section, you can set the container Alignment, choose Form Container Background, and Padding.

Form Container settings for Checkout shipping form

In the Label section, you can choose the Color, Required Indicator Color, Font Size, and Margin.

Form Label settings for Checkout shipping form

You can customize the Input field and its appearance from the given options like Input Color, Background, Border Color, Font Size, and so on.

Input field customization for Checkout shipping form

With the Global Font section, you can adjust the text typography from Primary and Secondary Typography parameters for the checkout shipping form.

Global Font settings for Checkout shipping form

From the screenshot below, you can view the checkout form-shipping with all the shipping details.

Checkout shipping form shows up on checkout page

This is how you can leverage the Checkout Form- Shipping widget and give your customers a smooth experience.

To get access to additional fields of checkout, enable the checkout-additional fields module and take a look at the checkout additional fields. Then, make your necessary changes in the additional fields.

What are your feelings
Updated on January 28, 2024