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

Enhance your store’s product page by adding in Extra Product Fields rather than default fields. You can now add over 24+ field types to your product page like:

1. TEXT
2. HIDDEN
3. PASSWORD
4. NUMBER
5. TELEPHONE
6. EMAIL
7. URL
8. SLIDER/RANGE
9. TEXT AREA
10. MULTI-SELECT
11. SELECT
12. RADIO
13. CHECKBOX
14. CHECKBOX GROUP
15. COLOUR PALETTE
16. IMAGE PICKER
17. DATE PICKER
18. DATE &TIME RANGE PICKER
19. TIME PICKER
20. COLOUR PICKER
21. FILE UPLOAD
22. HEADING
23. PARAGRAPH
24. HTML
25. SEPARATOR FIELD
26. SWITCH FIELD
27. PRODUCT GROUP

To add a new field:

1. Navigate to WooCommerce → Extra Product Option → Product Options.
2. Click on the Add field button.
3. Enter a Name, Field Type, Title, and other details of your field.
4. Set display styles from the Display Styles tab if required.
5. Set display rules from the Display Rules tab if required.
6. Save the Field.

This tab contains fields to capture all the basic details of the product field. All the properties available in the General Properties tab are listed below. Depending on the field type selected, the properties of the field may change.

Properties specific to the field types Select, Multiselect, Radio, and Checkbox Group.

Properties are specific to the field types Slider/Range.

Properties specific to the field type Color Palette and Image Group.

Properties specific to the field type Multiselect

Properties specific to the field type Datepicker

Properties specific to the field type Timepicker

Properties specific to the field type Date & Time Range Picker

Properties specific to the field type File Upload

Here, the customer gets a preview of the uploaded list on the product page. So, they can verify the uploaded files and remove the unwanted files from the preview option itself.

Properties specific to the field types Heading and Label

Properties specific to the Product Group

Properties specific to the field type HTML

<h5>Suit Size Chart</h5>
<table style=\"border-top: 1px dotted black\">
  <thead>
    <tr>
      <th>Chest Size</th>
      <th>Waist Size</th>
      <th>Suit Size</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>34</td>
      <td>28</td>
      <td>XS</td>
    </tr>
    <tr>
      <td>36</td>
      <td>30</td>
      <td>S</td>
    </tr>
    <tr>
      <td>38</td>
      <td>32</td>
      <td>M</td>
    </tr>
    <tr>
      <td>40</td>
      <td>34</td>
      <td>L</td>
    </tr>
    <tr>
      <td>42</td>
      <td>36</td>
      <td>XL</td>
    </tr>
    <tr>
      <td>44</td>
      <td>38</td>
      <td>XXL</td>
    </tr>
    <tr>
      <td>46</td>
      <td>40</td>
      <td>XXXL</td>
    </tr>
  </tbody>
</table>

Properties specific to the field type Separator

Properties specific to the field type Switch

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

You can change the properties of any field including default fields. To edit a field:

• Navigate to the WooCommerce → Extra Product Options → Extra Product Fields page.
• Click on the pencil icon near the field you want to edit.

• A popup form will be displayed, you can edit any field property from this form.
• Once done with the edit, click on the Save button to save the changes.

Once a field is deleted it cannot be restored. To delete a field:

• Navigate to the WooCommerce → Extra Product Option → Extra Product Fields page.
• Select the fields you want to delete using the check-boxes on the left side of each field.
• Click on the Remove button from the action bar.

• The deleted fields will be highlighted with a red color background.
• Click on the Save changes button to confirm the delete.

To rearrange fields:

• Navigate to the WooCommerce → Extra Product Option → Extra Product Fields page.
• Move the field up or down using the move handle at the leftmost side of each field.
• Once fields are rearranged, click on the Save changes button to save the changes.

This option provides you with an easy way to create a new field by duplicating an existing field. This is helpful when you want to create a new field that is almost similar to an existing one. To duplicate a field:

• Navigate to the WooCommerce → Extra Product Option → Extra Product Fields page.
• Click on the copy icon near the field you want to duplicate.

• A popup to create a new field will appear with all the property except the field name, filled the same as that of the duplicated field.
• Enter the new field name, then click on the Save changes button to save the changes.