The product page is considered as the most essential page on a website, especially an e-commerce website. That is where your customers spend the most time and attention. It has the main impact on your customer’s buying decisions as well. That’s why creating a great product page always is the most principal thing in the website development progress.

Along with an optimal layout, a product page must display exactly dozens of product information. At the same time, it must be eye-catching and highlight some selling points. All of these requirements is to convince your customer to buy the product as soon as possible. Meanwhile, you can not just write all the information in the WordPress editor. So, how to enter the information and display all of them in the most effective way and, of course, automatically?

In this post, I am going to guide you to create a product page with custom fields using the Meta Box plugin.

What is the product page?

A product page is familiar to a business that sells something. This is the place to show off all about their product/service and persuade their customer to pay for it as well.

A product page usually has basic information about the product such as image, price, model, color, features, and so on. Each of them is an individual field. If you want to save time and make your product page be more professional, these kinds of data must be entered on the back end and automatically displayed on the front end. To do it, we need to use the Meta Box plugin.

Furthermore, any page needs a layout. The complicated layout asks you to pay more effort to interpret it on your website. It does not affect the way you input and output data of your product.

In this post, I will use a simple design for a product page of car rental.

How to Create a Product Page using Meta Box Plugin - a car rental page
A car rental page

Create a product page using the Meta Box plugin

Before getting started

First, we need to install the Meta Box plugin and its extensions. This is a free WordPress plugin that helps you to create and configure and custom fields in an easy and professional way. If you are not familiar with this plugin, read more about it here.

To practice as the instruction in this post, I'm using the Meta Box plugin and its two extensions Meta Box Builder and MB Custom Post Type:

  • Meta Box Builder: It provides you an intuitive interface to create and manipulate your custom fields without touching any code. It allows you to drag and drop fields, even with complicated and special fields. This extension is premium. In case you don't have it, you may code manually.
  • MB Custom Post Type: It allows you to create new custom post types. Product is a special post type that is not the same as the default blog post, so you need a new custom post type for it. This tool is free of charge. You can download it from WordPress.org. Otherwise, try this free tool to generate custom post types code.

Install and activate all the above three plugins on your website.

Step 1: Create a new custom post type

As I said, the product page is not the same as the blog post in WordPress. We need to create a new post type for it. It's used to manage, categorize, filter, … your products later. We'll use MB Custom Post Type to create it.

In the admin dashboard, go to Meta Box > Post Types > New post type.

How to Create a Product Page using Meta Box Plugin - Create a new custom post type
Create a new custom post type

Fill all the information to register a new post type (as below image), then press Publish.

How to Create a Product Page using Meta Box Plugin - Configure the new custom post type
Configure the new custom post type

My new post type has a name is “Car Rental” with the slug car-rental. We will use this information for the last step. I also un-tick the Editor option in the Support section (right bar) because the product page has content created using the default WordPress editor.

Just configure this post type as you want. In the event, you are not sure what you need to do, take a look at our instruction for creating a custom post type.

After creating a new post type, your menu bar in the admin dashboard will have one more section named “Car Rental”.

How to Create a Product Page using Meta Box Plugin - A new section in your menu
A new menu for the new custom post type in the WordPress admin menu

Step 2: Create custom fields for the new custom post type

Note: Besides Meta Box Builder, you can use the free Online Generator tool. It has a similar UI and generates codes for custom fields so you just need to insert the code to the functions.php file.

Create a custom meta box

Firstly, we need a custom meta box (field group) to hold all your custom fields. In the admin dashboard, go to Meta Box > Custom Fields > Add New.

A screen to edit your meta box named Edit Field Group will appear.

How to Create a Product Page using Meta Box Plugin - Create a custom meta box (field group) to contain the custom fields

I set this meta box with the name “Car Rental” in Title and ID is “car-rental”.

Now, go to its Settings tab, in the Post Types section, choose a name of the post type which you have just created (my post type named “Car Rental” in this case). This is to assign the meta box to display in the edit page of your post type.

How to Create a Product Page using Meta Box Plugin - Assign the meta box to display in the edit page of your post type
Assign the meta box to display in the edit page of your post type

Then, press Save and you will have a meta box - a frame - to hold your custom fields inside.

Create custom fields

In this stage, we are going to create one-by-one custom fields which correspond to the product’s information. I will set all the fields to be inside the created meta box named Car Rental.

Because each information has a different kind of data as text, number, range, media, and so on, we use different field types for them as well.

Field type Product's information
Number Price / Car Year / Max Passengers
Select Fuel / Gearbox / Doors
Text Fuel Usage / Engine Capacity / Max Luggage / Mileage
Image Advanced Car Gallery

In the following section, I will create a field for each type. Then, you will create more fields for others to accomplish all your fields.

Create a number field for Price

Still, in the Custom Fields section, click Add Fields and choose Number. A number field will be automatically added to your meta box.

There's no need to configure this field, just set it name “Price” and choose to Require option to force people to input this information.

How to Create a Product Page using Meta Box Plugin - Configure the number field
Configure the number field

We'll do the same for “Car Year” and “Max Passenger” fields.

Create a text field for Fuel Usage

The fuel consumption information usually displays in this kind: the fuel consumption/km (e.g. 1L/50km). So, I make this field a text field.

As for other field types, choose Text option in the drop-down menu to create a text field.

Now, we configure the field as we want. You may fill some text into the Description section to guide people on how to fill the field.

 

How to Create a Product Page using Meta Box Plugin - Configure the text field
Configure the text field

 

Do the same thing for the Engine Capacity, Max Luggage, and Mileage fields.

Create an image advanced field for the Product Image Gallery

In the example of a car rental service page, there is an image slider for cars. To create an image gallery like this, do as follows:

Go to the Media tab in the Input Fields section, and choose Image Advanced. Image advance allows you to upload images for products.

Set a label, ID, and other parameters for this field. I set a maximum number of images to avoid people uploading too many images for a product. The more image, the slower your website.

How to Create a Product Page using Meta Box Plugin - configure image advance fields

Press Update to save all your settings.

Enter project details in the custom fields on the back end

Go back to the menu Car Rental (the new post type used for products), create a new one and see how the custom fields there.

Note that, the product gallery is in the sidebar. I separated the image gallery into another meta box and set its position in the sidebar. It is just rearrangement on the backend and does not impact the data and how to input or output it.

Step 3: Display the product custom fields on the front end

You have had fields to input data for products. Now you might show those data on the front end where your customer can see them.

Start with creating a file named single-[$custom_post_type_slug].php and put it into your theme’s folder. For car rental, the file is single-car-rental.php. This file means that your website will display all the post which has the post type car-rental.

Open that file, and get value from each custom field with the code below:

Get the value of the text, number, or select fields:

$value = rwmb_meta( $field_id );
echo $value;

Here $field_id is the ID of the custom field in which we want to get value.

E.g. To get the value of the price field:

<?php
$price = rwmb_meta( 'price' );
echo $price;
?>

Get value of image advanced fields:

$images = rwmb_meta( $field_id, array( 'size' => 'thumbnail' ) );
foreach ( $images as $image ) {
    echo '<a href="'.$image['full_url'].'"><img src="'.$image['url'].'"></a>';
}

Here:

  • $field_id: ID of the custom field which you use to upload product image.
  • 2nd parameter is an array of parameters:
Parameter Description
size Size for the images to display. Default is thumbnail
limit Limit the number of images

E.g. Show the images in the product’s image album:

<?php
$gallery = rwmb_meta( 'car_gallery', array( 'size' => 'thumbnail', 'limit' => 5 ) );
foreach ( $gallery as $img ) {
    echo '<a href="'. $img['full_url']. '"><img src=" '.$img['url']. '"></a>';
}
?>

You may try whole my gist which I use in this post:

Create custom fields by Meta Box

Put this gist into the function.php file of your theme.



This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters


<?php
add_filter( 'rwmb_meta_boxes', 'your_prefix_register_meta_boxes' );
function your_prefix_register_meta_boxes( $meta_boxes ) {
$meta_boxes[] = array (
'title' => 'Car Rental',
'id' => 'car-rental',
'post_types' => array(
0 => 'car-rental',
),
'context' => 'normal',
'priority' => 'high',
'fields' => array(
array (
'id' => 'price',
'type' => 'number',
'name' => 'Rental price',
'required' => 1,
'prepend' => '$',
),
array (
'id' => 'car_year',
'type' => 'number',
'name' => 'Car Year',
'required' => 1,
),
array (
'id' => 'max_passengers',
'type' => 'number',
'name' => 'Max passengers',
'required' => 1,
),
array (
'id' => 'fuel',
'name' => 'Fuel',
'type' => 'select',
'placeholder' => 'Select an Item',
'options' => array(
'Gasoline' => 'Gasoline',
'Petrol' => 'Petrol',
'Electricity' => 'Electricity',
),
'required' => 1,
),
array (
'id' => 'door',
'name' => 'Door',
'type' => 'select',
'placeholder' => 'Select an Item',
'options' => array(
2 => '2',
4 => '4',
5 => '5',
),
'required' => 1,
),
array (
'id' => 'gearbox',
'name' => 'Gearbox',
'type' => 'select',
'placeholder' => 'Select an Item',
'options' => array(
'Tiptronic' => 'Tiptronic',
'Manuatic' => 'Manuatic',
),
'required' => 1,
),
array (
'id' => 'fuel_usage',
'type' => 'text',
'name' => 'Fuel Usage',
'desc' => 'Ex: 101/100km',
),
array (
'id' => 'engine_capacity',
'type' => 'text',
'name' => 'Engine capacity',
'desc' => 'Ex: 2500 cc',
),
array (
'id' => 'max_luggage',
'type' => 'text',
'name' => 'Max luggage',
),
array (
'id' => 'mileage',
'type' => 'text',
'name' => 'Mileage',
'desc' => 'Ex: 500km or Unlimited',
),
),
);
return $meta_boxes;
}
add_filter( 'rwmb_meta_boxes', 'your_prefix_register_meta_boxes_2' );
function your_prefix_register_meta_boxes_2( $meta_boxes ) {
$meta_boxes[] = array (
'title' => 'Car rental - Side',
'id' => 'car-rental-side',
'post_types' => array(
0 => 'car-rental',
),
'context' => 'side',
'priority' => 'low',
'fields' => array(
array (
'id' => 'car_gallery',
'type' => 'image_advanced',
'name' => 'Car gallery',
'force_delete' => 1,
'max_file_uploads' => 7,
'image_size' => 'post-thumbnail',
'max_status' => true,
),
),
);
return $meta_boxes;
}
view raw

meta-box.php

hosted with ❤ by GitHub

Get the value of the custom fields and display them on the front end



This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters


<div class="page-wrapper">
<div class="product-gallery--columns-4 images" data-columns="4">
<figure class="product-gallery__wrapper">
<a href="<?php echo get_the_post_thumbnail('full'); ?>">
<img src="<?php echo get_the_post_thumbnail('full'); ?>" alt="<?php the_title(); ?>">
</a>
<div class="thumbnails owl-carousel owl-loaded owl-drag">
<div class="owl-stage-outer">
<div class="owl-stage">
<div class="owl-item">
<?php
$gallery = rwmb_meta( 'car_gallery', array( 'size' => 'thumbnail', 'limit' => '5' ) );
foreach ( $gallery as $img ) {
echo '<div class="item"><a href="'. $img['full_url']. '"><img src ="'.$img['url']. '"></a></div>';
}
?>
</div>
</div>
</div>
</div>
</figure>
</div>
<div class="summary entry-summary">
<div class="price">
<span class="amount">
<span class="Price-amount amount">
<span class="Price-currencySymbol">$</span><?php echo $price = rwmb_meta('price'); ?>
</span>
</span>
<span class="label">/ Day</span>
</div>
<div class="product-details__short-description">
<p><?php the_excerpt(); ?></p>
</div>
<ul class="features">
<li> <label>Car year: </label> <span><?php echo $car_year = rwmb_meta('car_year'); ?></span></li>
<li> <label>Fuel: </label> <span><?php echo $fuel = rwmb_meta('fuel'); ?></span></li>
<li> <label>Gearbox: </label> <span><?php echo $gearbox = rwmb_meta('gearbox'); ?></span></li>
<li> <label>Fuel usage: </label> <span><?php echo $fuel_u = rwmb_meta('fuel_usage'); ?></span></li>
<li> <label>Max passengers: </label> <span><?php echo $max_passengers = rwmb_meta('max_passengers'); ?></span></li>
<li> <label>Engine capacity: </label> <span><?php echo $engine_capacity = rwmb_meta('engine_capacity'); ?></span></li>
<li> <label>Max luggage: </label> <span><?php echo $max_luggage = rwmb_meta('max_luggage'); ?></span></li>
<li> <label>Doors: </label> <span><?php echo $door = rwmb_meta('door'); ?> Doors</span></li>
<li> <label>Mileage: </label> <span><?php echo $Mileage = rwmb_meta('Mileage'); ?></span></li>
</ul>
</div>
</div>
view raw

template.php

hosted with ❤ by GitHub

Final result:

How to Create a Product Page using Meta Box Plugin - a car rental page

Final words

In fact, there are many kinds of product pages that have huge content to show and plenty of kinds of product information. But most of that information may be shown in some basic types which I used in this post. It just folds the number of fields, not the type of fields.

In the case that there is a great number of fields, you should group them into different groups and increase max_input_vars to save them properly. If you combine using the tools from Meta Box, you may categorize, assign conditions, show/hide, … your fields as you want. There are unlimited ways to deal with your custom fields with Meta Box plugin and its extensions. It's even possible to style these custom fields with CSS if you want them to look more beautiful on the backend and frontend.

Hope that this instruction may help you to create a simple product page at the start and if you go further, it might be a professional product page. To have a successful product page, you should also pay attention to other factors to get more customers. Good luck!

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 FAQs page - P5 - Using Meta Box and Breakdance
  20. How to Create a Product Page - P2 - Using Meta Box and Oxygen
  21. How to Create a Product Page - P3 - Using Meta Box and Bricks
  22. How to Create a Product Page - P4 - Using Meta Box and Elementor
  23. How to Create a Product Page - P5 - Using Meta Box and Gutenberg
  24. How to Create a Product Page - P6 -Using Meta Box and Breakdance
  25. How to Create a Product Page - P7 - Using Meta Box + Kadence
  26. How to Create a Product Page - P8 - Using Meta Box and Brizy
  27. How to Create a Product Page - P9 - Using Meta Box and Divi
  28. How to Create a Product Page using Meta Box Plugin
  29. How to Create a Recipe - P2 - Using Meta Box and Oxygen
  30. How to Create a Recipe - P3 - Using Meta Box and Elementor
  31. How to Create a Recipe - P4 - Using Meta Box and Bricks
  32. How to Create a Recipe - P5 - Using Meta Box and Zion
  33. How to Create a Recipe - P6 - Using Meta Box and Brizy
  34. How to Create a Recipe - P7 - Using Meta Box and Breakdance
  35. How to Create a Recipe - P8 - Using Meta Box and Kadence
  36. How to Create a Recipe - P9 - Using Meta Box and Divi
  37. How to Create a Recipe with Meta Box Plugin
  38. How to Create a Simple Listing - P2 - Using Meta Box and Bricks
  39. How to Create a Simple Listing - P3 - Using Meta Box and Breakdance
  40. How to Create a Simple Listing - P4 - Using Meta Box and Elementor
  41. How to Create a Team Members Page - P1- Using Meta Box and Elementor
  42. How to Create a Team Members Page - P2 - Using Meta Box and Oxygen
  43. How to Create a Team Members Page - P3 - Using Meta Box and Bricks
  44. How to Create a Team Members Page - P4 - Just Meta Box
  45. How to Create a Team Members Page - P6 - using Meta Box and Breakdance
  46. How to Create a Team Members Page - P7 - Using Meta Box and Kadence
  47. How to Create a Video Gallery Page - P2 - Using Meta Box + Bricks
  48. How to Create a Video Gallery Page - P3 - Using Meta Box and Breakdance
  49. How to Create a Video Gallery Page - P4 - Using Meta Box + Elementor
  50. How to Create a Video Gallery Page - P5 - Using MB Views
  51. How to Create a Video Gallery Page - P6 - Using Meta Box and Zion
  52. How to Create a Video Gallery Page Using Meta Box + Oxygen
  53. How to Create ACF Flexible Content Field with Meta Box
  54. How to Create an Auto-Updated Cheat Sheet in WordPress
  55. How to Create an FAQs Page - P1 - Using Meta Box and Elementor
  56. How to create an FAQs page - P2 - Using Meta Box and Oxygen
  57. How to create an FAQs page - P4 - Using Meta Box and Bricks
  58. How to Create an FAQs Page - P6 - Using MB Views
  59. How to Create an FAQs Page - P7 - Using Meta Box and Divi
  60. How to Create an FAQs Page - P8 - Using Meta Box and Kadence
  61. How to Create an FAQs Page -P3- Using Meta Box
  62. How to Create Buttons with Dynamic Link using Custom Fields
  63. How to Create Category Thumbnails & Featured Images Using Custom Fields
  64. How to Create Download and Preview Buttons - P1 - Using Meta Box and Bricks
  65. How to Create Download and Preview Buttons - P2 - Using Meta Box and Oxygen
  66. How to Create Download and Preview Buttons - P3 - Using MB Views
  67. How to Create Download Buttons in WordPress - Using Custom Fields
  68. How to Create Dynamic Landing Page in WordPress - P1 - Using Meta Box and Elementor
  69. How to Create Dynamic Landing Page in WordPress - P2 - Using Meta Box and Bricks
  70. How to Create Menus for Restaurants - P1 - Using Meta Box and Elementor
  71. How to Create Menus for Restaurants - P2- Using Meta Box and Bricks
  72. How to Create Notification Using Custom HTML Field
  73. How to Create Online Admission Form for School or University
  74. How to Create Online Reservation Form for Restaurants using Meta Box
  75. How to Create Relationships - P1 - Using Meta Box and Oxygen
  76. How to Create Relationships - P2 - Using Meta Box and Bricks
  77. How to Create Relationships - P3 - Using MB Views
  78. How to Create Relationships - P4 - Using Meta Box and Breakdance
  79. How to Create Taxonomy Thumbnails & Featured Images - P2 - Using Meta Box and Oxygen
  80. How to Create Taxonomy Thumbnails & Featured Images - P3 - Using Meta Box and Bricks
  81. How to Create Taxonomy Thumbnails & Featured Images - P4 - Using MB Views
  82. How to Create YouTube Video Timestamps on WordPress Website - P1 - Using MB Views
  83. How To Display All Listings On A Map With Meta Box
  84. How to Display Author Bio in WordPress - P1 - Using Meta Box and Bricks
  85. How to Display Images from Cloneable Fields - P1 - with Gutenberg
  86. How to Display Images from Cloneable Fields - P2 - Using Meta Box and Oxygen
  87. How to Display Images from Cloneable Fields - P3 - with Elementor
  88. How to Display Images from Cloneable Fields - P4 - with Bricks
  89. How to Display Opening Hours for Restaurants - P1 - Using Meta Box + Gutenberg
  90. How to Display Opening Hours for Restaurants - P2 - Using Meta Box and Oxygen
  91. How to Display Product Variations - P1 - Using Meta Box and Gutenberg
  92. How to Display Product Variations - P2 - Using Meta Box and Oxygen
  93. How to Display Product Variations - P3 - Using Meta Box and Bricks
  94. How to Display the Dynamic Banners - P2 - Using Meta Box and Bricks
  95. How to Display The Latest Products - P5 - Using Meta Box and Bricks
  96. How to Display the Latest Products - P6 - using Meta Box and Breakdance
  97. How to Display the Latest Products - P7 - Using Meta Box + Kadence
  98. How to Display the Latest Products Section - P4 - Using Meta Box + Zion
  99. How to Display the Most Viewed Posts - P1 - using MB Views

3 thoughts on “How to Create a Product Page using Meta Box Plugin

  1. Is there a way to make product attributes user-selectable on front-end and display product image based on user selection of attributes? Like to show M or F design of T-shirt based on gender selection, and further to show variants of that design with "long" or "short" sleeve?

    1. Hi,

      In the scope of this article, the product page is a page that introduces the product info that is fill/set on the backend, just a static page. It does not work like a WooCommerce product page that shows the attributes, different images and adds them to the cart.

Leave a Reply

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