Custom Section

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.

Add New Section

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.

General Properties

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

Display Rules

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

Edit Section

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.

Copy a Section (Duplicate a section)

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.
   

Delete 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.

Rearranging Sections

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.
   
   
   
   

   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.