How to Add/Edit Custom Sections in WooCommerce Checkout Page?

To add a section:

1. Navigate to the Checkout Field Editor settings page (WooCommerce → Checkout Form)
2. Click on the Add new section button.
3. Enter a Name/ID, Display Position, Title, and other details for your section.
4. Set Display Styles if required.
5. Set Display Rules if required.
6. Set Repeat Rules if required.
7. Click on the Save button.

All these tabs are explained below.

This tab contains fields to capture all the basic details of the section. Given below are the fields available in the Basic Info tab. Configure these properties based on your needs.

Set display condition from this tab. Read the article Display Rules to know more about display rules and their configuration.

Set repeat rules from this tab. Read the article Repeat Rules to know more about repeat rules and their configuration.

You can change the properties of a section, all properties except Name/ID of a section can be modified.

Note: The properties of default sections(ie, Billing, Shipping, and Additional) are not editable. Only custom sections can be edited.

To edit a section:

1. Navigate to Checkout Field Editor settings page (WooCommerce → Checkout Form)
2. Click on the pencil icon near the section you want to edit.
3. A popup form will be displayed, you can edit the section properties.
4. Once done with the edit, click on the Save button to save the changes.

Note: The properties of default sections(ie, Billing, Shipping, and Additional) are not customizable. Only custom sections can be edited.

Note: The “Shipping Details” and “Billing Details” titles are customizable by using the below hook.

function wc_additional_field_strings( $translated_text, $text, $domain ) {
    switch ( $translated_text ) {
        case 'Section Name':
        $translated_text = __( 'Your Title Here', 'woocommerce' );
        break;
    }
    return $translated_text;
}
add_filter( 'gettext', 'wc_additional_field_strings', 20, 3 );
test
Click to copy code

Replace the text’s Section Name with the corresponding section name (Billing details, Ship to different Address and Additional Information) and Your Title Here with the required title.

Removing a section will also remove all the fields inside that section. Once a section is deleted it cannot be restored.

To remove a section:

1. Navigate to Checkout Field Editor settings page (WooCommerce → Checkout Form)
2. Click on the X icon near the section you want to delete.
3. A confirmation popup with the message “Are you sure you want to delete this section?” will be shown. Click on the OK button to confirm.

The display position of a section on the checkout page is determined by the two properties Display Position & Display Order. Display Position property determines where the section should be displayed and Display Order property determines in which order the sections should be arranged when there are multiple sections for a given position.

To set Display Order:

1. Navigate to Checkout Field Editor settings page (WooCommerce → Checkout Form)
2. Click on the pencil icon near the section you want to edit.
3. From the edit dialogue box, provide a number in the Display Order field according to the order you want to arrange the sections.

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.

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 the same as that of the duplicated field. All you have to do is to assign a new section name and Save the changes.

To duplicate a section:

1. Navigate to Checkout Field Editor settings page (WooCommerce → Checkout Form)
2. Click on the copy icon near the section you want to make a copy.
3. Enter a new Name/ID for the new section. Feel free to modify other properties of the section based on your need.
4. Click on the OK button to save the new section.

Following are the steps to add a custom section to a newly created step:

1. Navigate to Checkout Field Editor via Dashboard → WooCommerce → Checkout Form.
2. Click on the Add New Section button which is displayed above the field list.
3. Fill the properties and choose the step name from the Display Position pull-down.
4. Once new fields are added to the section, it will be displayed in the newly created step.
   

   ---