How To Add Custom Fields on A WooCommerce Product Page?

Posted on Aug 28, 2020
How To Add Custom Fields on A WooCommerce Product Page?

If you want to customize your products for your clients, then you should consider WooCommerce Product Add-Ons. In this guide, you will learn about why, when, and how to add custom fields to a product.

If your online business includes personalizing the products, then the easiest way to add these customization fields to the product options is using WooCommerce Product Add-ons.

For example, If you make and sell gift cards online, your customers would want to include personal details while placing the order. These can include individual names or messages, etc., and your website must be able to support this.

WooCommerce Product Add-ons is a lightweight and performance-optimized plugin that instantly adds these custom fields to your products.

add-custom-fields


Here we will discuss how you can add various types of WooCommerce custom fields to your product, but first, let’s take a look at why you should consider adding custom fields in your products.

Why Should You Add Custom Fields To Your Product?

Adding custom fields to your product can dynamically change your online store such as it will

Boost Sales

Adding custom fields will give your customers the liberty to choose from a lot of different options or customize it according to their desire. The more the customers feel connected to the product, the more they are likely to purchase it.

The interest of the customers will help to increase the sales of your online store.

Personalize Products

Custom fields in a product make sure that the customers are purchasing exactly what they like as if they are standing in an outlet.

For instance, the customer ordering a pizza likes to personalize according to his preferences of toppings and sauces. Adding the custom fields in your online pizza parlor will help your customer personalize it online, too, just the way he likes.

Increase Variations

The addition of custom fields is a great way to increase variations in any product. You can list all the possible variations in a drop-down list, and the customer can visualize it right there on the product page. The customers can select and choose whatever variations they like.

Provide Customer Satisfaction

The customers feel satisfied when their product is personalized according to their likings. The custom fields will allow your customers to achieve that and develop trust in your business.

Enhance Reviews

The customized online shopping experience achieved through the custom fields in products please customers. Happy customers leave good reviews and increase your revenue.

What Are Some Examples Of WooCommerce Custom Fields?

The WooCommerce custom Addon fields include a range of options such as text areas, checkboxes, drop-downs, etc. which help the customer personalize the product.

Here are some examples to give you a better idea of how you can fit custom addons in your products

  • An online gift store adds a text box for “Add a Name” to customize it for the sender 
  • A restaurant adds a text area for “Special Instructions,” e.g., No mayo and extra olives for its customers
  • A clothing brand adds a Colour group in the T-shirt section according to the available color choices in any design 
  • A jewelry store uses a select field for a drop-down box of available charms in a bracelet 
  • An online shoe store makes use of a radio field for choosing the size of shoes

What Are Different Types Of WooCommerce Custom Fields?

As I briefly described above, the WooCommerce custom fields can include any type of form field. Some of them are

Text Field

It is an input field to collect data in the form of a text.

Radio Field

This field is used where the customer selects one option among the multiple options available.

Checkbox Field

A checkbox allows customers to select one or more options from multiple options.

Select Field/Drop-down

A list of available options to select the best one

Number Field

It is an input field to accept data in the form of numbers.

Textarea Field

The input field for longer than one line text

Colour Picker

Displays various colors to choose from

Date Picker

Allows to pick any date from the calendar

woocommerce-custom-fields

These custom fields are available on the product page at the front end to help customers personalize their products and services.


Can I Use Attributes Instead Of Custom Fields?

You might be wondering if you can use the variations and attributes in WooCommerce to add custom fields in products. But the answer is, not really. Every WooCommerce product is substantially fixed even if it is variable.

The attributes you add to the product would remain similar for every customer and cannot cater to every form of personalization.

For instance, if you want customers to add a name, you cannot achieve it through attributes in WooCommerce. On the other hand, adding custom fields is an excellent way of customizing every product for your customers.

How To Add WooCommerce Custom Fields Without Coding?

Now that you know what different types of custom fields you can add to your products, I will proceed to how you can add them without any complicated coding.

The most efficient and straightforward way to add Woocommerce custom fields is using “WooCommerce Product Addons”, a lightweight plugin with a range of features.

WooCommerce Product Addons allows you to add extra options for your products with many fields such as text inputs, number fields, checkboxes, radio fields, and drop-down boxes.

In this guide, I will use the WooCommerce Product Addons plugin to tell you how to add any custom field to your product. Let’s go through the process step by step

Step 1

Installing The WooCommerce Product Addons Plugin

There are two ways you can install and activate the WooCommerce Product Addons plugin

  1. Go to your WordPress dashboard and click on plugins and then Add New (Plugins > Add New). Search for “WooCommerce Product Addons ( Custom fields to add extra product options )” and activate it.
  2. Go to WordPress.org and download the WooCommerce Product Addons plugin and save it in a zip file. Open your WordPress dashboard, click on Plugins, then Add New and navigate the Upload option (Plugins > Add New > Upload). Upload the zip file of the WooCommerce Product Addons plugin in that section and activate the plugin from the WordPress “Plugins” menu.
installing-the-woocommerce-product-addon-plugin


Step 2

Adding A Custom Field

Adding a custom field with the WooCommerce Product Addons plugin is very simple. The plugin lets you add every field with drag and drop. Here is how you can do it

Go to WordPress dashboard and select “Products”    

Choose the option of “Add New Form”

adding-a-custom-field

Enter the title of the form in the title bar

enter-title-of-the-form

You will see custom field options available on the right side of the box 

Drag and drop any type of custom field that you find suitable such as text area, checkbox, radio box, etc.

drag-and-drop-custom-field


Step 3

Setting Up The Custom Field 

When you add and select a custom field, there are many options for setting it according to your product. For example, you choose the text field for a product, then 

Click on the edit option on the top right corner of the field

setting-up-the-custom-field

Choose from various editing options

various-editing-options

You can set the field as “Required” if you wish to make it obligatory for the customers to give a response to this field.

You can choose a label for your custom field, e.g., if you want customers to enter their names in the field, you can select the label “Name” for it.

You can select a placeholder for your text field, e.g., for the label “name,” your placeholder can be, “Enter Your Name”.

Similarly, you can enter and edit various options such as “Type” and “Price” in any custom field.

add-custom-fields-of-your-desired-product

Finally, you can choose to add these custom fields to your desired products. You can either select all products, some products, or a single category from the list of product options displayed on the right side.

choose-the-custom-field-of-your-desired-product


Step 4

Adding Multiple Custom Fields

If you want to add multiple custom fields to your form, WooCommerce Product Addons makes it easy for you. Just drag and drop as many custom fields as you want and edit various options according to your products in the store.

After you have added and edited your custom fields, select the products you want to display it over.

adding-multiple-custom-fields


Step 5

Publishing Your Custom Fields

Now when you have added and edited custom fields for your desired products, it is time to publish your changes. All you need to do is hit the “Publish” button on the top of product categories.

 Your custom fields are now active. You can visualize them in the front-end of your website and make changes to them in the dashboard.

publishing-your-custom-fields


Example Of WooCommerce Custom Fields For A Product

Take a look at the screenshot below of a product page for an online clothing store

example-of-woocommerce-custom-field

For product Beanie, there are four custom fields. The first two are text fields with the label of “Name” and “Email” respectively. The placeholders used for these two fields are “enter your name” and “enter your email.”

The third field is the upload file, which asks customers to upload a file to it, and the last one is the select field with multiple options to choose from for customers.


Conclusion

Adding WooCommerce Custom Fields to a product can personalize them for your customers and boost sales. The simplest and efficient way of adding these custom fields is through a lightweight plugin like WooCommerce Product Addons.

The WooCommerce Product Addons plugin uses a straightforward drag and drop approach for adding various types of custom fields without any coding.

Now it is your turn to try the plugin and add custom fields to your products.


Acowebs are developers of WooCommerce plugins that will help you personalize your stores. It supports the additional option with feature-rich add-ons which is WooCommerce Product Addons, that are lightweight and fast. Update your store with these add-ons and enjoy a hassle-free experience.

WRITTEN BY
Rithesh Raghavan

Rithesh Raghavan, is a seasoned Digital Marketer with more than 17+ years in Digital Marketing & IT Sales. He loves to write up his thoughts on the latest trends and developments in the digital world, especially related to WordPress, Woocommerce and Digital Marketing.