Display Custom Fields on WooCommerce Product Page

WooCommerce is the most well known web based business answer for WordPress. As indicated by BuiltWith, WooCommerce controls over 42% of every single online store. On the off chance that you are searching for an online store that is anything but difficult to set up and oversee, WooCommerce is an astounding choice that is both free and open source. Moreover, WooCommerce has developed into an extremely capable internet business solution for WordPress based sites.

WooCommerce provides many ways to store item information. Some standard item fields are: name, value, classifications, labels, and measurements. There’s likewise some alternatives to shape item qualities. However, the possibility to store additional item fields, such as checkboxes or text fields, should be taken into account. All things considered, that is when WooCommerce custom fields come in.

What are WooCommerce Custom Fields?

custom product text area

For the addition of extra fields in the product screen and sorting standalone data in WooCommerce, custom fields are usually used. Following are various ways in which a custom field is used:

  • Store barcodes of any specific product
  • Add additional options for customers to connect with the product
  • Show multimedia content about the item like audio or video
  • Include shortcodes given by different modules, like a WooCommerce Add to  Wishlist module.
  • Store extra notes about the costs or substitute value choices

The Uses of WooCommerce Custom Fields

Basically, there are 2 types of WooCommerce custom fields as listed below.

custom text field title

Adding Extra Information About the Product

This is the most common utilization of custom fields. In WordPress, custom fields are utilized to add extra fields to posts, pages or items which helps to store & show additional data like additional content fields, dates, pictures, and more. Specifically, WooCommerce Product Table makes it simple to show custom fields made by any module in a table, anywhere on your site.

Selling Extra Product Options, as an Alternative to using Variations

You can provide more options for your WooCommerce products including drop down lists, text fields, etc. This section is basically added up for customers to complete the procedure before adding the product to cart.

How to Add WooCommerce Custom Fields to Product Page

Creating a WooCommerce custom field is not much difficult. You can simply adopt the following steps. There is a complete guide along with critical points that helps you set up WooCommerce custom fields with ease.

How to Create WooCommerce Custom Fields in the Back End

To begin with, you’ll need a custom field’s module. There are a lot of decent free modules to make custom fields in WooCommerce available, including Advanced Custom Fields and Toolset.

You can likewise utilize a devoted WooCommerce custom field’s module according to the desired folder.

How to Create WooCommerce Custom Fields with Advanced Custom Fields plugin

Log into WordPress and go to Plugins > Add New. Quest for ‘Cutting edge Custom Fields‘, then initiate this free module.

WooCommerce edit field group

Select ‘Custom Fields‘ on the left hand side of the WordPress dashboard.

Then, click ‘Add New‘ by the ‘Field Group‘ at the top of the page.

WooCommerce add new field groups

Next, you’ll see the ‘Include New Field Group‘ page.

WooCommerce drop down menu

Include a name for the gathering of custom fields you’re making. Nobody else will be able to see this but you.

Location – Choose Show this field gathering if Post Type is equivalent to Product. This discloses Advanced Custom Fields to show the custom field on the Add/Edit WooCommerce item screen.

WooCommerce menu structure

Press the blue ‘Include Field‘ button. Presently it is an ideal opportunity to make the individual custom fields where you’ll store the additional item information.

Add a Label for the custom field. This is how the custom field will be marked on the Add/Edit Product screen.

WooCommerce product data

Choose a Name for the custom field. This ought to be one word in lowercase. You’ll need this to show the WooCommerce custom field in the front end later.

Choose a Field Type from the accessible sorts of custom field. You can pick text, text region, numbers, checkbox, radio catch, and so on.

WooCommerce Course custom fields

Complete any additional fields for the custom field including a default placeholder esteem.

Lastly, click the ‘Create Distribute‘ button.

WooCommerce create distribute

How to Show WooCommerce Custom Fields on Product Page

From the previous steps, you’ve learnt how to add extra fields in the back end of your WordPress site. Now we will see how to show custom fields on any WordPress page of your site.

You can easily add up many columns as you like for each of the products. One of the most amazing things is that you can add up custom fields in the tables as well. This is more adaptable than the default store design, which just records essential data like the item name and cost. This is an extremely simple approach to show the additional item information.

How to Add Custom Fields to WooCommerce Product Page

WooCommerce allows you to add custom fields to the particular item in case you need to include additional data/fields for your products. Notwithstanding, WooCommerce doesn’t display custom fields on the item page.

To do this, we have to add a custom field to an item by going to the administrator dashboard, look for the items and snap on the desired item to make alterations. Then again, you can include another item as well.

Along these lines, include a custom field on the item screen.

WooCommerce items screen

Enter a preferred name and price, then snap on the Add Custom Field button. Subsequent to including the custom field, everything will be recorded under the custom fields as below.

WooCommerce add custom fields

Save all changes by tapping on the Update button. The custom field will not display after this step yet.

WooCommerce product page

To display a custom field on the product page, go to Plugins > Installed Plugins & select WooCommerce > Edit.

WooCommerce edit plugin

Find the content-single-product.php file and add the following code to the desired line.

<?php echo get_post_meta( get_the_ID(), ‘tes_custom_field’, true ); ?>

WooCommerce content single product

Replace the custom field name with the desired name and click Update File.

Now you will see the custom field displayed on the product page.

WooCommerce custom field under product page

Show a Custom Field above the Add to Cart Button

Up until now, you’ve figured out how to make an item table with every custom field shown as a different segment. If you just need to show a custom field on the single item page, there is an easier option.

You can use a straightforward yet compelling module called WooCommerce Lead Time. While many people utilize this module to show item holding up times, you can likewise utilize it as an overall custom field module. The ‘lead time‘ field is in fact a WooCommerce custom field. It shows up over the add to truck button. Hence, you can utilize it to show any content based data rather than lead times.

To set it up, look for the module, add the custom field data to the ‘lead time’ field in the ‘Stock‘ tab on the ‘Altar Product‘ screen. This content will show over the add to truck button, under the short depiction on the single item page.

Can you Display WooCommerce Custom Fields without a Plugin?

You can also show custom fields without the utilization of a module, but it’s only if you’re a designer. That is why the technique depicted above is a superior choice for most storekeepers.

With an automatic methodology, you can add custom data legitimately to your item Meta information & incorporate your custom field as a feature of the current WooCommerce item information.