WooCommerce is the most popular eCommerce WordPress platform that accounts for more than 23% of the total number of eCommerce websites over the world. This platform helps users have online stores with common managing tools such as creating a cart, shipping management, order management, payment, order, tax, etc.

Although WooCommerce provides many features and tools, it just adapts the basic needs of an online store. If your product contains special but WooCommerce unsupported information, you have to use an extra tool to add custom fields. In this article, we will use Meta Box to help you do that.

What is Meta Box?

Meta Box is one of the top-notch plugins that help users create and configure custom fields for your WordPress website.


Meta Box has a free version in WordPress.org

If you just use the plugin above, you have to code yourself to have the desired custom fields.

But if you don’t want to code, a free UI from Meta Box – Online Generator is a solution. On the other hand, you can buy another extension from Meta Box, which is Meta Box Builder to have a UI to create custom fields in the back end.

We will give you all the instructions to use both in this article.

Create Custom Fields for WooCommerce using Meta Box

The first method: Create Fields using Online Generator

Step 1: Create Necessary Fields

Go to this link to create and configure the information for your needed fields.

First, fill in the general information (you can skip this step):

Create Necessary Fields

Then, move to the Meta Box tab and fill in the general information for meta boxes containing the fields you want to create.

Create Fields using Online Generator

Here, pay attention to the Post types. You can select Post or Page, or both are okay. Anyway, we have to correct this information on the code in the next step, so it doesn’t matter what you choose.

Finally, move to the Fields tab and create the fields you want:

move to the Fields tab and create the fields you want

In area 1, find the type of fields you need to create, click the type of field you want, then a corresponding field will appear in area 2 for you to name and edit information.

Just choose the field type with the number of fields you want here!

Finally, click the Generate Code button below to get the code of the entire meta box and the fields you just created.

Step 2: Adding Code of The Fields to Website

Traditionally, to add fields to your website, in this step, you’ll only need to copy the code you just received from the Online Generator tool into the functions.php file in your theme directory.

However, these are the fields for post or page. Products on your website are often different post types (for example, ‘product’), so if you want these field displays in a post that is marked as ‘product’ post type, you need to correct that code a bit.

 Adding Code of The Fields to Website

In the marked position in the above image, replace (‘post’, ‘page’) with the post type name of your product. For example, I will edit to (‘product’).

Right after you change and save the file, you will see the created field display right under the post having the post type as product.

The second method: Create Field Using Meta Box Builder

First, you need to install Meta Box Builder. After installing, you will have an interface to create custom fields right in the admin dashboard.

Find the menu Meta Box > Custom Fields and choose Add New to add custom fields for your website.

Create Field Using Meta Box Builder

choose the field type

In the interface to create custom fields, on the Fields tab (1), name the field group (ie the meta box containing your custom fields) in position (2), and then the Meta Box will automatically create the corresponding ID (3) or you can edit it yourself.

Next, choose the field type that you want (4) and a corresponding field will show up (5). And then, you just need to correct and fill in the information.

Repeat the manipulation (4) and (5) until you completely create all the fields you want.

Finally, move to the Settings tab and select the name of the post type that you want to display these fields in the Post types section.

the Post types section

Here, the post type of my product articles is Product, so I also choose Product in Post types.

Don’t forget to click Publish to save all the fields that you just created.

Now, return to the product information editing page (post type is Product), you will see the custom fields you just created display there.

the product information editing page

Displays The Value Of a Custom Field in Frontend

Add the following code to the functions.php file of the theme:

add_action( 'woocommerce_product_meta_end', 'extra_info' );
function extra_info() {
    echo "<div class='extra-info'>";
    if ( $meta = rwmb_meta( 'text_1' ) ) {
        echo '<div>' . __( 'Guaranty: ', 'twentytwenty' ) . $meta . '</div>';
    }
    if ( $meta = rwmb_meta( 'color_1' ) ) {
        echo '<div class="color">' . __( 'Color: ', 'twentytwenty' );
        foreach($meta as $value) {
            echo '<span style="background:'. $value .'"></span>';
        }
        echo '</div>';
    }
    echo "</div>";
}
  • woocommerce_product_meta_end ': is the hook of WooCommerce. This hook specifies the position to display the value of the field you are adding. You can refer to a few types of hooks with visual locations description here to find a hook that matches the position you want to place information.
  • 'text_1' and 'color_1': are the IDs of the custom field created above
  • 'Guaranty:' and 'Color:': are prefixes I added to display along with the field value
  • 'twentytwenty': is the name of the theme I am using

Note: My 'color_1' field has multiple values, so I need to use the loop to call out all the values. Other information fields that only have a unique value, you can use the code as the 'text_1' field.

After that, the values of the field I added display like this:

Displays The Value Of a Custom Field in Frontend

The color section of the product here is temporarily not shown, so I added some CSS to style this part.

.extra-info {
    display:flex;
    flex-flow: row wrap;
    margin-top: 10px;
}
.extra-info div {
    width: 100%;
    margin-top: 10px;
}
.extra-info span {
    width:40px;
    height:40px;
    display:inline-block;
    border:1px solid;
    margin: 0 10px;
}
.color {
    display: flex;
    align-items: center;
}

My information looks quite okay. Here is the result:

The result after setting dis[lay the value of custom field

Final Thought

As you can see, by using both WooCommerce and Meta Box, you can add any type of information for any product as you want. This work can become a lot easier with the help of Meta Box. Wish you a quality and great online booth with well-informed products.

Have Difficulty in Custom Fields

1 thought on “Add Custom Fields for WooCommerce Using Meta Box

  1. Hi! Thanks for this guide, it’s really useful. I have a problem when I tried to show the custom field in the product page. The options appears in the admin section when you edit a product, but in the public prodct page the value of the $meta variable is NULL. What i am doing wrong? Thanks in advance!

Leave a Reply

Your email address will not be published. Required fields are marked *