Display Custom Fields on WooCommerce Product Page

WooCommerce, without a doubt, proves a clear-cut winner in creating online stores for WordPress-based websites. One of the most interesting WooCommerce statistics shows that 30% of all online stores are empowered by this platform.

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. Plus, WooCommerce has developed into an extremely capable internet business solution for WordPress-based sites.

WooCommerce provides various ways to store item information. Some standard fields include name, value, classifications, labels, and measurements. There are likewise some alternatives to shape your product qualities. However, the capability to store additional 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

WooCommerce custom fields allow you to add extra fields to the product screen and at the same time sort standalone data. The following cases show you how a custom field is used in WooCommerce:

Before you read further.... Free Download (PDF)

Secret Side Door

Secret Google Search Tactic That Will Skyrocket Your Sales, Connect You to the Perfect Partners, Influencers & Affiliates and Send Your Google Rankings Soaring! FREE when you sign up for Digital Creators Edge, a free newsletter for Digital Creators who wish to take their business to the next level.

  • Store barcodes of any specific product
  • Add additional options for customers to connect with the product
  • Show multimedia content about the item like audios or videos
  • Include shortcodes given by different modules, for example, 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 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.  You can also add custom fields about important information to the WooCommerce one-page checkout for customers to review before they make a purchase.

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 their 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 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 in to 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 fields. 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 learned 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 the 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.