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

Sections are collections of related fields. You can organize your product fields into sections and manage the display position and display order of those sections.

To add a section:

1. Navigate to the Extra Product Option plugin settings page. There will be a section named the default section. (WooCommerce → Extra Product Option → Product Options)
2. Click Add new section button.
3. Enter a Name/ID, Display Position, Title, and other details for your section.
4. Set display rules if required
5. Once the changes are done, save the changes. As you can see, there are three tabs Basic Tabs, Display Styles, and Display Rules in the popup form. All these tabs are explained below.
   Once you follow the above steps, the front end of your product page will be as shown as below.
   

This tab contains fields to capture all the basic details of the section. Given below are the fields available in the General Properties tab.

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

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

To edit a section:

1. Navigate to the Extra Product Options page (WooCommerce → Extra Product Option → Product Options)
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, save the changes made.

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, filling 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 the Extra Product Option settings page (WooCommerce → Extra Product Option → Product Options).
2. Click on the copy icon near the section you want to make a copy.
3. A popup appears where all field names inside the duplicated section are the same as that original section.
4. Enter a new Name/ID for the new section. Feel free to modify other properties of the section based on your need.
5. Click on the Save button to save the new section.

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 the Extra Product Options settings page (WooCommerce → Extra Product Options → Product Options)
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 product 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 Extra Product Options settings page (WooCommerce → Extra Product Options → Product Options)
2. Click on the pencil icon near to 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.
4. Next in the edit window, Display Order can be set using numerics. This could be used to arrange the sections on your product page based on your preference.
5. Display Position of a section is set in the basic info, this could also override the Display order. So, the section which are set according to display order (in numbers) and the sections which is set under the display position will be shown according to the display order assigned.