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?
- The Uses of WooCommerce Custom Fields
- Add WooCommerce Custom Fields to Product Page
What Are WooCommerce Custom Fields?
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:
- 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.
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.
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.
Next, you’ll see the ‘Include New Field Group‘ page.
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.
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.
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.
Complete any additional fields for the custom field including a default placeholder esteem.
Lastly, click the ‘Create Distribute‘ button.
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.
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.
Save all changes by tapping on the Update button. The custom field will not display after this step yet.
To display a custom field on the product page, go to Plugins > Installed Plugins & select WooCommerce > Edit.
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 ); ?>
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.
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.
