Using WooCommerce Checkout Field Editor plugin, you can also add new sections in the WooCommerce checkout form. Sections are used to separate fields according to their divisions. Default sections in WooCommerce are the Billing Section, Shipping Section and Additional Fields Section. WooCommerce Checkout Field Editor allows you to add new sections and define new fields to them.
Following are the operation that can be performed on newly created sections:
- Edit new sections — Properties of new sections can be edited later.
- Duplicate new sections — A copy of an existing new section can be made.
- Remove created sections — The sections cannot be disabled, but can be removed if necessary.
Following are the entry fields in Add new section:
- Name/ID*: This is the unique html ID for the created section. No two sections can have the same section name.
- CSS Class: Here, you can add a CSS class for the section. You may need to define the styles for this class in your stylesheet.
- Display Position*: Using this field, you can arrange the created section in various positions in the default checkout form. Options are available to display sections before of after customer details, billing details, shipping details, registration form, order notes, etc.
- Display Order: This is the display order based on the newly created sections other than default. But, it should be noted that the display positions set earlier can override this order. This order will be considered when rearranging the sections in the same display position.
- Show section title in Checkout page: This is a checkbox when ticked shows the section title in the checkout page.
- Show section title in My Account page: Similarly, this checkbox displays the section title in My Account page.
- Title: This is the title of the section. The title will be displayed as the display name of the section in the plugin settings page, and when enabled, in the Checkout page and My Account page as well.
- Title Type: It defines the type of HTML tag for the title.
- Title Color: Use the color picker to give color to the title.
- Title Class: In case you want the title to be styled differently, you can add required CSS classes for the title. You may need to define the styles for this class in your stylesheet. Classes are separated with commas.
- Subtitle: Subtitle will be shown on the checkout page near to the title, once you have enabled displaying it.
- Subtitle Type: It defines the type of HTML tag for the subtitle.
- Subtitle Color: Use the color picker to give color to the subtitle.
- Subtitle Class: In case you want the subtitle to be styled differently, you can add required CSS classes for the title. You may need to define the styles for this class in your stylesheet. Classes are separated with commas.
Once all these fields are filled (some of the fields are optional), you can add the section by clicking the Save button.
Adding a new Custom section
You can create a new section by going to Dashboard → WooCommerce → Checkout Form → Add New Section. The ‘Add new section’ button is displayed above the fields list in the plugin settings.
Editing Custom Sections
It should be noted that the properties of default sections, ie, Billing, Shipping and Additional, cannot be edited. But the newly created sections can be edited by clicking on the Pencil icon displayed on the side of the section in the plugin settings page in the Dashboard.
Rearranging Custom Sections
Display order in sections is based on the newly created sections other than the default. To rearrange the sections,
- Go to the plugin settings page, and click on the Pencil icon near the section’s display name to edit it.
- In the edit dialogue box, you can see a field named ‘Display Order’. Provide a number in this field according to the order you want to arrange the sections.
- Edit all sections and give a particular number in the Display Order field to bring all sections to order.
It should be noted that the Display Positions set earlier in the section properties can override the Display Order. Even if the sections are arranged according to display numbers, sections coming under the same display position will display first according to the display order assigned. For example, suppose that A and C are two sections coming before billing details, and B and D come after the billing details. If the Display Order assigned to A, B, C and D are 1, 2, 3 and 4 respectively, the sections will be arranged as A → C → B → D.
Duplicating Custom sections
A duplicate of an existing section can be created by clicking on the ‘Copy’ button next to the pencil icon for editing. Then, a popup to create a new section will appear with all the fields except the section name, filled same as that of the duplicated field. All you have to do is to assign a new section name and Save the changes.
Removing Custom sections
To remove a section, click on the Remove button on the top of the field list.
Add a Custom Section to a Custom step Created using a Multistep Plugin
Following are the steps to add a custom section to a newly created step:
- Navigate to Checkout Field Editor via Dashboard → WooCommerce → Checkout Form.
- Click on the Add New Section button which is displayed above the field list.
- Fill the properties and choose the step name from the Display Position pull-down.
- Once new fields are added to the section, it will be displayed in the newly created step.
