Chat with us, powered by LiveChat

This website uses cookies

Our website, platform and/or any sub domains use cookies to understand how you use our services, and to improve both your experience and our marketing relevance.

How to Add Extra Product Information in WooCommerce Using Meta Box (Giveaway)

April 20, 2016

5 Min Read
woocommerce using meta box
Reading Time: 5 minutes

WooCommerce is an E-commerce plugin based on WordPress. It helps you to create online stores that incorporate all the necessary tools for handling sales and shipment related tasks such as email notifications, shipping, online payment, order management, auto fees collection and tax calculations. According to recent data analysis, WooCommerce powers more than 23% of the E-commerce websites across the globe.

Although it has been created for all kinds of E-commerce websites, WooCommerce satisfies only the basic needs of an online store. If your products are specific, you might need to add product information in WooCommerce. In the following post, I will show you how to add extra information to your WooCommerce store. For demonstration purposes, let’s assume that we have an online pharmacy store which needs extra product info (except the default info like name, SKU, size) such as:

  • Unit: box, packet, blister pack,  bottle
  • Dosage form: could be capsule, tablet, liquid, ointment
  • Specification: how many capsultes per blister pack, how many packets per box
  • Manufacturer
  • Distributor
  • Expiry date

In order to add this information to a WooCommerce product, the best way is to use custom fields. We need a tool that can help us to handle all the work with the custom field. Well, a tool which fits perfectly to our needs is Meta Box.

Meta Box is a WordPress plugin that helps users to add custom fields in a post or any custom post type quickly. The plugin provides an API with lots of features and options for customizing custom fields. By default, Meta Box doesn’t have a GUI, so it’s more suitable for developers who want a solid and lightweight platform. However, if you want GUI, you can use the Meta Box Builder extension (Meta Box is quite flexible and easy to extend with lots of useful extensions).

Meta Box WordPress Plugin Giveaway

Adding Custom Fields to WooCommerce Products with Meta Box

Let’s go back to the problem with adding extra product information to our online pharmacy store. In order to add extra information, we will create a small plugin. The use of our custom based specific plugin ensures that the product data remains unchanged while switching from one theme to another on our E-commerce online store.

Our plugin starts with the default WordPress plugin header:

<?php
/**
* Plugin Name: Pharmacy
* Plugin URI: http://domain.com
* Description: Add extra info for pharmacy products
* Author: Your name
* Author URI: http:// domain.com
* Version: 1.0
*/

To add extra info to a WooCommerce product (post type product), we will create a new meta box called “Extra Product Info” with 6 custom fields:

  • Unit: an input text box with predefined values box, packet,  blister pack,  bottle. Users can add more units if that’s not in the list.
  • Specification: an input text box
  • Dosage form: an input text box with predefined values capsule, tablet, liquid, ointment. Users can add more dosage forms if that’s not in the list.
  • Manufacturer: an input text box
  • Distributor: an input text box
  • Expiry date: a date picker field

Using Meta Box plugin the code will look like this:

add_filter( 'rwmb_meta_boxes', 'pharmacy_meta_boxes' );
function pharmacy_meta_boxes( $meta_boxes ) {
            $meta_boxes[] = array(
            'title'  => __( 'Extra Product Info', 'pharmacy' ),
            'fields' => array(
                        array(
                        'id'        => 'unit',
                        'name'   => __( 'Unit', 'pharmacy' ),
                        'type'    => 'text',
                        'datalist' => array(
                                    'options' => array(
                                    __( 'Box', 'pharmacy' ),
                                    __( 'Blister pack', 'pharmacy' ),
                                    __( 'Packet', 'pharmacy' ),
                                    __( 'Bottle', 'pharmacy' ),
                                    ),
                        ),
                        ),
                        array(
                        'id'   => 'dosage_form',
                        'name' => __( 'Dosage form', 'pharmacy' ),
                        'type' => 'text',
                        'datalist' => array(
                                    'options' => array(
                                    __( 'Capsule', 'pharmacy' ),
                                    __( 'Tablet', 'pharmacy' ),
                                    __( 'Liquid', 'pharmacy' ),
                                               __( 'Ointment', 'pharmacy' ),
                                    ),
                        ),
                        ),
                        array(
                        'id'   => 'specification',
                        'name' => __( 'Specification', 'pharmacy' ),
                        'type' => 'text',
                        ),
                        array(
                        'id'   => 'manufacturer',
                        'name' => __( 'Manufacturer', 'pharmacy' ),
                        'type' => 'text',
                        ),
                        array(
                        'id'   => 'distributor',
                        'name' => __( 'Distributor', 'pharmacy' ),
                        'type' => 'text',
                        ),
                        array(
                        'id'   => 'expiry_date',
                        'name' => __( 'Expiry date', 'pharmacy' ),
                        'type' => 'date',
                        ),
            ),
            );
            return $meta_boxes;
}

Notes:

–        Meta box and custom fields are created via filters, which is the desired WordPress way. It’s a very flexible solution for editing later.

–        Each meta box is an array with title and custom fields

–        Each custom field is an array with parameters:

  • Field ID which is used as meta key when storing into the post meta table
  • Field name (label)
  • Field type
  • List of options for text field (datalist)

Registering meta boxes and custom fields as arrays may help us to have a quick debug overview and specify the clarity of the data structure which can be used later. In this example, we use only 2 field types: text and data. Meta Box offers more than 35 field types such as file upload, image upload, editor, video, checkbox list, google map, etc. and each field type has its own list of options. You can see more details about supported fields in the following documentation.

After saving the plugin, upload it to your host, activate it, test it and see how it works. Go to your Dashboard and edit a WooCommerce product, you will see a new meta box below the editor:

Extra Product Info

As you can see, Meta Box automatically handles the display of custom fields quite well. It also handles data saving. You don’t need to write any code for that complicated process anymore.

Showing Custom Field Values in the Product Page

After adding extra information to products, we need to show it on the frontend. To do that, we need to use a WooCommerce hook in a single product page and the helper function rwmb_meta to get custom field value.

The code will look like this:

add_action( 'woocommerce_product_meta_end', 'pharmacy_extra_info' );
function pharmacy_extra_info()
{
            if ( $meta = rwmb_meta( 'unit' ) )
            {
            echo '<strong>' . __( 'Unit:', 'pharmacy' ) . "</strong> $meta<br>";
            }
            if ( $meta = rwmb_meta( 'dosage_form' ) )
            {
            echo '<strong>' . __( 'Dosage form:', 'pharmacy' ) . "</strong> $meta<br>";
            }
            if ( $meta = rwmb_meta( 'specification' ) )
            {
            echo '<strong>' . __( 'Specification:', 'pharmacy' ) . "</strong> $meta<br>";
            }
            if ( $meta = rwmb_meta( 'manufacturer' ) )
            {
            echo '<strong>' . __( 'Manufacturer:', 'pharmacy' ) . "</strong> $meta<br>";
            }
            if ( $meta = rwmb_meta( 'distributor' ) )
            {
            echo '<strong>' . __( 'Distributor:', 'pharmacy' ) . "</strong> $meta<br>";
            }
            if ( $meta = rwmb_meta( 'expiry_date' ) )
            {
                       echo '<strong>' . __( 'Expiry date:', 'pharmacy' ) . "</strong> $meta<br>";
            }
}

To understand how rwmb_meta function works, please follow this documentation.

When viewing the single product page, you will see:

Add to Cart

You can find the complete code of this plugin on Github Gist.

Wrapping up!

WooCommerce is a very helpful tool to create an online E-commerce website quickly. When using WooCommerce with a plugin like Meta Box, you can customize your website for your specific products and offers more information to your customers and thus, increase your sales and revenue.

Well, along with presenting your products in the proper manner to entice visitors, you have to make sure your website runs fast. Nobody buys anything from a slow online store. To experience the best Managed WooCommerce Hosting Platform, sign up for a free trial on Cloudways today.

Share your opinion in the comment section. COMMENT NOW

Share This Article

Your WooCommerce Store Needs A Reliable Host

With no compromise on Performance, Security & Support.

Mustaasam Saleem

Mustaasam is the WordPress Community Manager at Cloudways - A Managed WordPress Hosting Platform, where he actively works and loves sharing his knowledge with the WordPress Community. When he is not working, you can find him playing squash with his friends, or defending in Football, and listening to music. You can email him at mustaasam.saleem@cloudways.com

Get Our Newsletter
Be the first to get the latest updates and tutorials.

Do you like what you read?

Get the Latest Updates

Share Your Feedback

Please insert Content

Thank you for your feedback!