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’s 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 business which 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 to this plugin, read more about it here.

To practice as the instruction in this post, I will use 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 which 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.

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

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

2.2. 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 Edit Field Group section, go to the Fields tab > Input Fields column > choose Number. A number field will be automatically added to your meta box.

How to Create a Product Page using Meta Box Plugin - Choose a custom field in a type of number
Choose a number field

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 other field types, choose Text option in the Input Fields section to create a text field.

Create a text field for information about fuel consumption
Create a text field for fuel consumption

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 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 image to avoid people to upload 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 setting.

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

View post on imgur.com

Note that, the product gallery is in the sidebar. I separate the image gallery into another meta box and set its position in the sidebar. It is just rearrangement on the back end, and does not impact to 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 value of text, number or select fields:

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

Here $field_id is the ID of the custom field 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.

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

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 the product page which have a huge content to show and plenty of kinds of product’s 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. 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.

Hope that this instruction may help you to create a simple product page in the start and if you go further, it might be a professional product page. Good luck!

Leave a Reply