How to Edit Shipping and Billing Fields in the SellKit Checkout Form

The SellKit Checkout Form widget provides an intuitive interface for customizing the shipping and billing fields according to your e-commerce site's requirements. These fields are crucial as they collect essential information from the customer necessary to process and fulfill orders. Here’s how you can manage these fields effectively.

Accessing Shipping and Billing Fields

To begin editing the shipping and billing fields:

1. Insert the Checkout Form widget into the page in Elementor editor.
2. On the left sidebar, navigate to the Content tab.
3. Scroll to the Shipping Fields or Billing Fields section, which you can expand by clicking on it.

Adding a New Field

1. To add a new field, click on the + Add Item button located at the bottom of the respective section (Shipping or Billing Fields).
2. A new field will appear where you can enter details such as the field's name and properties.

Removing a Field

1. To remove a field, click on the X button next to the field you wish to delete in the Shipping or Billing Fields section.

Editing an Existing Field

1. Click on the existing field that you want to edit.

   You will see options to modify various properties of the field:

   • Field Role: Designates the role of the field, such as 'Shipping Address' or 'Billing Phone'.
   • Width: Determines the width of the field on the form. It can be set to a percentage to adjust to different screen sizes.
   • Field Label: The visible name of the field on the form.
   • Field Class: Allows you to add custom CSS classes for additional styling options.
   • Validation: Sets the criteria that the entered data must meet for the form to be submitted.
   • Field Required?: Toggle whether the field must be filled out or can be left optional.
   • Field Clear: Applies a clear fix to the field, which can be useful for layout purposes.
2. After making the necessary changes, make sure to click on the Update button to save the modifications.

Considerations for Editing Fields

• Field Label: This should be clear and descriptive to ensure the customer knows exactly what information to provide.
• Validation: Proper validation ensures the data collected is accurate. For example, 'Email Address' fields should validate for the presence of an '@' symbol.
• Field Required?: Critical fields like 'Country' or 'Postal Code' should typically be required to ensure you can fulfill the order.

Best Practices

• User Experience: Keep the number of fields to a minimum to streamline the checkout process.
• Consistency: Ensure that the labels and format are consistent across both shipping and billing fields.
• Testing: Always test the checkout process after making changes to ensure that all fields function correctly and the form is submitted without errors.