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

Before Getting Started

In this practice, we absolutely need WooCommerce to create and customize the online store.

For custom fields, we need the Meta Box core plugin to have a framework to create them. You can download it directly from wordpress.org.

We also need some Meta Boxes extensions to have some advanced features:

  • 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.

You can install them individually or use Meta Box AIO.

Moreover, you may need some other extensions to have your own field group as you wish in some real cases. But in this case, I keep the field simplest for illustration purposes only. So just go with these two extensions only.

Create 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

Add 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.

Get and Display 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.

Set 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

That’s done!

Last Words

We have finished creating some typical custom fields to add more information to a product created with WooCommerce.

Normally, you should add code to the theme's file following this instruction to add that information to a product and display values saved in custom fields on the WooCommerce’s product page. But, you can see that MB Views from Meta Box can help you shorten and simplify the code much.

Let’s try and share the result with us in the comments.

If you want to suggest any tutorials, feel free to leave a comment and keep track of our blog. Thanks for reading!

  • How to Add Custom Fields for WooCommerce - P2 - Using MB Views

Other case studies you might be interested in

  1. Create A Dynamic Landing Page in WordPress Using Custom Field
  2. Create a Filter to Find Hotels by Location
  3. Create an OTA Website Like Booking.com with Meta Box Plugin - P1: Create a Page to Introduce Hotel Rooms
  4. Create an OTA Website Like Booking.com with Meta Box Plugin - P2: Create Filters on the Archive Page
  5. Create an OTA Website Like Booking.com with Meta Box Plugin - P3: Create Filters for Single Hotel Pages
  6. Create Dynamic Favicon in WordPress using Meta Box plugin
  7. Create Posts Series in WordPress Using Meta Box
  8. Display The Latest Products Section - P2 - Using Meta Box and Elementor
  9. Display The Latest Products Section - P3 - Using Meta Box And Oxygen
  10. How to Add Custom Fields for WooCommerce - P2 - Using MB Views
  11. How to Add Custom Fields to Display Banners using Meta Box Plugin
  12. How to Add Guest Authors and Guest Posts - Using Meta Box
  13. How to Add Related Posts - Using Custom Fields
  14. How to Build a Hotel Booking Website Using Meta Box - P1
  15. How to Build a Hotel Booking Website Using Meta Box - P2 - Booking Page in Backend
  16. How to Build a Hotel Booking Website Using Meta Box - P4 - Booking Management Page
  17. How to Build a Hotel Booking Website Using Meta Box – P3 – Booking Page for Customer
  18. How to Create a Classified Ads Website using Meta Box
  19. How to Create a Custom 404 Page in WordPress - P1 - Using Meta Box and Elementor
  20. How to create a FAQs page - P5 - Using Meta Box and Breakdance
  21. How to Create a Product Page - P2 - Using Meta Box and Oxygen
  22. How to Create a Product Page - P3 - Using Meta Box and Bricks
  23. How to Create a Product Page - P4 - Using Meta Box and Elementor
  24. How to Create a Product Page - P5 - Using Meta Box and Gutenberg
  25. How to Create a Product Page - P6 -Using Meta Box and Breakdance
  26. How to Create a Product Page - P7 - Using Meta Box + Kadence
  27. How to Create a Product Page - P8 - Using Meta Box and Brizy
  28. How to Create a Product Page - P9 - Using Meta Box and Divi
  29. How to Create a Product Page using Meta Box Plugin
  30. How to Create a Reading Progress Bar in WordPress Posts - P1 - Using MB Views
  31. How to Create a Recipe - P2 - Using Meta Box and Oxygen
  32. How to Create a Recipe - P3 - Using Meta Box and Elementor
  33. How to Create a Recipe - P4 - Using Meta Box and Bricks
  34. How to Create a Recipe - P5 - Using Meta Box and Zion
  35. How to Create a Recipe - P6 - Using Meta Box and Brizy
  36. How to Create a Recipe - P7 - Using Meta Box and Breakdance
  37. How to Create a Recipe - P8 - Using Meta Box and Kadence
  38. How to Create a Recipe - P9 - Using Meta Box and Divi
  39. How to Create a Recipe with Meta Box Plugin
  40. How to Create a Simple Listing - P2 - Using Meta Box and Bricks
  41. How to Create a Simple Listing - P3 - Using Meta Box and Breakdance
  42. How to Create a Simple Listing - P4 - Using Meta Box and Elementor
  43. How to Create a Team Members Page - P1- Using Meta Box and Elementor
  44. How to Create a Team Members Page - P2 - Using Meta Box and Oxygen
  45. How to Create a Team Members Page - P3 - Using Meta Box and Bricks
  46. How to Create a Team Members Page - P4 - Just Meta Box
  47. How to Create a Team Members Page - P6 - using Meta Box and Breakdance
  48. How to Create a Team Members Page - P7 - Using Meta Box and Kadence
  49. How to Create a Video Gallery Page - P2 - Using Meta Box + Bricks
  50. How to Create a Video Gallery Page - P3 - Using Meta Box and Breakdance
  51. How to Create a Video Gallery Page - P4 - Using Meta Box + Elementor
  52. How to Create a Video Gallery Page - P5 - Using MB Views
  53. How to Create a Video Gallery Page - P6 - Using Meta Box and Zion
  54. How to Create a Video Gallery Page Using Meta Box + Oxygen
  55. How to Create ACF Flexible Content Field with Meta Box
  56. How to Create an Auto-Updated Cheat Sheet in WordPress
  57. How to Create an FAQs Page - P1 - Using Meta Box and Elementor
  58. How to create an FAQs page - P2 - Using Meta Box and Oxygen
  59. How to create an FAQs page - P4 - Using Meta Box and Bricks
  60. How to Create an FAQs Page - P6 - Using MB Views
  61. How to Create an FAQs Page - P7 - Using Meta Box and Divi
  62. How to Create an FAQs Page - P8 - Using Meta Box and Kadence
  63. How to Create an FAQs Page - P9 - Using MB Blocks
  64. How to Create an FAQs Page -P3- Using Meta Box
  65. How to Create Buttons with Dynamic Link using Custom Fields
  66. How to Create Category Thumbnails & Featured Images Using Custom Fields
  67. How to Create Download and Preview Buttons - P1 - Using Meta Box and Bricks
  68. How to Create Download and Preview Buttons - P2 - Using Meta Box and Oxygen
  69. How to Create Download and Preview Buttons - P3 - Using MB Views
  70. How to Create Download Buttons in WordPress - Using Custom Fields
  71. How to Create Dynamic Landing Page in WordPress - P1 - Using Meta Box and Elementor
  72. How to Create Dynamic Landing Page in WordPress - P2 - Using Meta Box and Bricks
  73. How to Create Menus for Restaurants - P1 - Using Meta Box and Elementor
  74. How to Create Menus for Restaurants - P2- Using Meta Box and Bricks
  75. How to Create Notification Using Custom HTML Field
  76. How to Create Online Admission Form for School or University
  77. How to Create Online Reservation Form for Restaurants using Meta Box
  78. How to Create Reading Time to Your WordPress Posts - Using MB Views
  79. How to Create Relationships - P1 - Using Meta Box and Oxygen
  80. How to Create Relationships - P2 - Using Meta Box and Bricks
  81. How to Create Relationships - P3 - Using MB Views
  82. How to Create Relationships - P4 - Using Meta Box and Breakdance
  83. How to Create Taxonomy Thumbnails & Featured Images - P2 - Using Meta Box and Oxygen
  84. How to Create Taxonomy Thumbnails & Featured Images - P3 - Using Meta Box and Bricks
  85. How to Create Taxonomy Thumbnails & Featured Images - P4 - Using MB Views
  86. How to Create YouTube Video Timestamps on WordPress Website - P1 - Using MB Views
  87. How to Display a Video Playlist - P1- Using MB Views
  88. How To Display All Listings On A Map With Meta Box
  89. How to Display Author Bio in WordPress - P1 - Using Meta Box and Bricks
  90. How to Display Author Bio in WordPress - P2 - Using MB Views
  91. How to Display Dynamic Banners in WordPress - P3 - Using MB Views
  92. How to Display Images from Cloneable Fields - P1 - with Gutenberg
  93. How to Display Images from Cloneable Fields - P2 - Using Meta Box and Oxygen
  94. How to Display Images from Cloneable Fields - P3 - with Elementor
  95. How to Display Images from Cloneable Fields - P4 - with Bricks
  96. How to Display Opening Hours for Restaurants - P1 - Using Meta Box + Gutenberg
  97. How to Display Opening Hours for Restaurants - P2 - Using Meta Box and Oxygen
  98. How to Display Product Variations - P1 - Using Meta Box and Gutenberg
  99. How to Display Product Variations - P2 - Using Meta Box and Oxygen

Leave a Reply

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