Skip to main content

Adding custom fields for WooCommerce

WooCommerce is a popular platform for eCommerce in WordPress which provides numerous features and functions, but you still may need some things further that it does not provide, such as custom fields for extra information about products. That’s when custom fields created with Meta Box will come in handy. But how can we add those fields to the products which are in an online store built with WooCommerce?

These are two custom fields that I created with Meta Box and added to a product in WooCommerce.

Example of a product page provided by WooCommerce and custom fields created with Meta Box

Video Version​

Preparation​

In this practice, we absolutely need tools to create and customize the online store:

  • Meta Box core plugin: to have a framework to create custom fields;
  • MB Views: to display value from custom fields on the product pages easily;
  • Meta Box Builder: to has a UI in the backend to create custom fields;
  • WooCommerce: to create and customize the online store.

You can install them individually or use Meta Box AIO.

1. Creating custom fields​

Go to Meta Box > Custom Fields > Add New to create some custom fields.

Go to Meta Box > Custom Fields > Add New to create some custom fields.

I will create two fields, as I said, one is cloneable and one is normal. It is just to help you see the difference clearer when displaying them on the product page.

There are two fields are created. Color fields is clonable and Guaranty field is normal.

After having all the fields, move to the Settings tab, choose Location as Post type, and select Product to apply these fields to it. Pay attention that this post type is auto-generated by WooCommerce. It is not the post type created with Meta Box.

Move to the Settings tab, choose Location as Post type, and select Product to apply these fields.

Now, when editing a product in WooCommerce, you will see the created fields.

These are created fields in WooCommerce

Just input some data.

Fill some information for Product Information

2. Adding action to display fields’ values​

The fields are in the backend so far. If you want to display data saved in the fields on the product page, you should use a hook provided by WooCommerce: 'woocommerce_product_meta_end'.

Normally, you should add that hook to the theme’s file. If you have MB Views from Meta Box, you can add the hook without touching any theme’s files.

Go to Meta Box and create a new view.

Go to Meta Box and create a new view.

2.1. Getting and displaying data from fields​

In the Template tab, click the Insert field button and look for the field’s name from the list on the right sidebar to get and display information on the product page. Just click on the name of the fields.

Click the Insert field button and choose name of the fields to get and display information on the product page.

The code will be added to the template automatically. You can see the difference in code between the normal field and the cloneable one.

The code added to the template.

The first line is for the normal field, which is not cloneable. And the three next lines if for the Color field. Since it is cloneable, there will be a loop. This loop also is auto-generated when you insert the Color field.

We will use CSS to improve the displaying of the data from the field. But, before that, you should separate code lines in Div tags and name some classes.

Add some div tags and classes to use CSS for styling later

Next, go to the CSS tab of the view, add some code to style the template. There’s also another tab for JavaScript in the event that you need it for some advanced display.

Go to the CSS tab of the view, add some code to style the template.

2.2. Setting the action​

Now, scroll down to the Settings section of the view.

Scroll down to the Settings section of the view

As I said, we will use a hook provided by WooCommerce. So, we will add this template as an action to that hook.

Set the Type of the view as Action. In the Action name box, as 'woocommerce_product_meta_end' which is the name of the hook. You can read more about this hook in WooCommerce documentation for more details.

Set the Type of the view as Action. In the Action name box, as 'woocommerce_product_meta_end' which is the name of the hook

Now, go back to the page on the frontend, you’ll see the data saved in the fields created with Meta Box displayed on the page.

The product page on the frontend