More information products in WooCommerce by Meta Box – WooCommerce is an eCommerce plugin on WordPress. The plugin helps you create an online website that incorporates all the necessary tools to handle sales-related and delivery-related tasks such as email notifications, shipping, online payments, order management, automated collection, tax. According to recent data analysis, WooCommerce provides more than 23% of e-commerce websites globally.
Although it has been created with all types of e-commerce websites, WooCommerce only meets the basic needs of online websites. If your product is specific, you need more product information at WooCommerce. In this post, you'll show you how to add additional information to your WooCommerce store. For introductory purposes, let's assume the online pharmacy website needs more product information (except for default information such as name, SKU, size), such as:
- Unit: box, pack, blister, bottle
- Dosage form: capsules, tablets, liquid, ointment
- Specification: how many capsultes per blister, how many packs per box
- Manufacturer
- Distributor
- Expiration date
In order to add this information to WooCommerce products, it is best to use “custom fields” that need tools that help handle all the work with “custom fields”, the tool that best suits our needs is Meta. Box.
Meta Box is a WordPress plugin that helps users quickly add “custom fields” at a post or any type of post. The plugin provides API with many features and options to adjust accordingly. By default, Meta Box has no GUI, so it is more suitable for developers who want a solid foundation. However, if you want a GUI, use the Meta Box Builder extension (Meta Box is quite flexible, easy to expand with many useful utilities).
See more: How to create a form in wordpress
Add custom fields to WooCommerce products with Meta Box
Let's get back to the problem of adding product information to an online pharmacy. For more information, we will create small plugins. The use of specific plugins based on our customizations ensures that product data does not change when switching from one interface to another at our online eCommerce website.
Our plugin starts with the default WordPress plugin title:
- / **
- Plugin name: Pharmacy
- Plugin URI: http://domain.com
- Description: Add additional information to the pharmaceutical product
- Author: Your name
- Author URI: http: // domain.com
- Version: 1.0
- /
To add additional information to the WooCommerce product (post type product), we created a new meta box named “Extra Product Info” with 6 custom fields:
- Unit: input text with predefined value boxes, packages, blisters, bottles. Users can add more units if not in the list.
- Specification: input text
- Dosage form: input text with predefined values capsules, tablets, liquid, ointment. Users can add more dosage forms if not on the list.
- Producer: input text
- Distributor: input text
- Expiry date: the field chooses the date
Using the Meta Box plugin, the code should look like this:
Note:
– A meta box with a custom field created through a filter, that's how WordPress wants it. This is a very flexible solution to edit later.
– Each meta box is an array with the same custom header field
– Each custom field is an array with the same parameters:
- The field ID is used as the meta key when archiving into the post meta table
- School name (label)
- Field type
- List of options with a text field (datalist)
Registering the meta box and custom field as an array gives us a quick debug overview, specifying the clarity of the data structure to be used later. In this example, we only use two types of fields: text, data. Meta Box provides more than 35 types of fields such as file upload, image upload, editor, video, checkbox list, google map, etc. Each type of school has its own options list.
After saving the plugin, upload it to your server, activate it, test it and see how it works. Go to your Dashboard and edit the product on WooCommerce, you will see the new meta box below the editor:
As you can see, Meta Box automatically handles custom field display pretty well. It also handles data saving. You do not need to write any code with that complicated process anymore.
Display custom field values at the product page
After adding additional information to the product, we need to display it on the frontend. To do that, we need to use WooCommerce at the product page with the rwmb_meta help function to get custom field values.
The code will look like this:
When viewing the unique product page, you will see:
You can find the complete code inside this plugin on Github Gist.
summary
WooCommerce is very useful tool to Create website online commerce. When using WooCommerce with a plugin like Meta Box, you can customize your website with specific products and then provide more information to customers, thereby increasing your revenue.
Along with presenting your product in a way that is appropriate for your visitors, you must ensure that your website loads quickly. No one buys anything from slow-loading online stores.