How to Create a Product Page - P3 - Using Meta Box + Bricks
Tags: tutorial, product, page, customfields
Published: 2022-09-20 07:17:40


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2865dcbnrg0irhv60e1y.jpg)Having the product page is very important since customers will spend most of their time there to find more products’ details. In this tutorial, we’re going to find out <strong>how to create a product page</strong> using Meta Box plugin and Bricks.

<!--more-->

This is my example:

<img class="aligncenter" src="https://i.imgur.com/iufdSei.png" alt="Example of a Product Page" width="1000" height="581" />
<h2>Video Version</h2>
https://youtu.be/95DviTWI25o
<h2>Before Getting Started</h2>
Let’s see which tools we used in this practice.

In this case, my product page is about car rental and it contains the product’s detailed information. All of this information will be saved in posts of a custom post type. The name of this product and its description are the title and content of the post. The remaining detailed information will be saved in the different custom fields.

So to get started, we need the <a href="https://wordpress.org/plugins/meta-box/">Meta Box core plugin</a> to have the framework for creating custom post type and custom fields. It’s free and you can download it directly from <a href="https://wordpress.org/plugins/meta-box/">wordpress.org</a>.

To have advanced features of Meta Box, we need some its extensions:
<ul>
 	<li><a href="https://metabox.io/plugins/custom-post-type/">MB Custom Post Types &amp; Custom Taxonomies</a>: to create custom post types;</li>
 	<li><a href="https://metabox.io/plugins/meta-box-builder/">Meta Box Builder</a>: to have an intuitive UI to create custom fields in the backend;</li>
</ul>
They’re all in the <strong>Meta Box AIO</strong>. If you haven’t had it, you can download and install each extension individually.

Finally, make sure you activate <strong>Bricks</strong> theme on your site.
<h2>Step 1: Create a Custom Post Type</h2>
Go to <strong>Meta Box</strong> &gt; <strong>Post Types</strong> &gt; <strong>Add New</strong> to create a new post type.

<img class="aligncenter" src="https://i.imgur.com/lGQiD5h.png" alt="Create a new custom post type" width="1000" height="459" />

After publishing, you will see a new <strong>Car Rentals</strong> menu in the <strong>Admin Dashboard</strong>.

<img class="aligncenter" src="https://i.imgur.com/eg4njnw.png" alt="New custom post type after created in the admin dash board" width="1000" height="493" />
<h2>Step 2: Create Custom Fields</h2>
Go to <strong>Meta Box</strong> &gt; <strong>Custom Fields</strong> to create a new field group. Here are all the fields that I created:

<img class="aligncenter" src="https://i.imgur.com/NTX5107.png" alt="Created custom field" width="1000" height="635" />

If you want to give some example data for the field, you can fill in an example year in the <strong>Placeholder</strong> box.

<img class="aligncenter" src="https://i.imgur.com/Hq7LjQK.png" alt="To give some example data for the field, fill in the Placeholder box" width="1000" height="488" />

You also can enter numbers in the <strong>Min Value</strong> and <strong>Max Value</strong> boxes to limit the number of passengers like this:

<img class="aligncenter" src="https://i.imgur.com/ayglK5l.png" alt="Enter numbers in the Min Value and Max Value boxes to limit the number of passengers" width="1000" height="378" />

For the Select fields, you can fill in some options in the <strong>Choices</strong> box to allow users choose one from them.

<img class="aligncenter" src="https://i.imgur.com/PS4WJJ6.png" alt="Fill in some options in the Choices box to allow users to choose" width="1000" height="425" />

After creating all the fields, move to the <strong>Settings</strong> tab. Remember to choose the <strong>Location</strong> as <strong>Post Type</strong> and select your product’s post type to apply these fields to it.

<img class="aligncenter" src="https://i.imgur.com/RosbUB9.png" alt="Set location in the settings to apply created fields" width="1000" height="540" />

Now, when creating a new post in the <strong>Car Rentals</strong> post type, you’ll see all the custom fields:

<img class="aligncenter" src="https://i.imgur.com/Hw2emW6.png" alt="Displaying newly created custom field" width="1003" height="723" />
<h2>Step 3: Create a Template for the Product Page</h2>
Since we’re going to use Bricks to do this practice, go to <strong>Bricks</strong> &gt; <strong>Templates</strong> to create a new template.

<img class="aligncenter" src="https://i.imgur.com/UI0YVKU.png" alt="Create a new template in Bricks' menu " width="1000" height="465" />

Each product is displayed as a single

page. Thus, select the template as <strong>Single</strong>, then edit it with Bricks.

<img class="aligncenter" src="https://i.imgur.com/2mCVaEW.png" alt="Edit template as Single with Bricks" width="1000" height="408" />

Let’s display the product information in the created template.

To apply the template to the post type we want, in the Bricks visual editor, go to <strong>Settings</strong> &gt; <strong>Template Settings</strong> &gt; <strong>Conditions</strong> &gt; choose <strong>Post Type</strong> in the list of options, and then select the wanted post type.

<img class="aligncenter" src="https://i.imgur.com/uUtj64h.gif" alt="Apply the template to the wanted post type " width="1000" height="562" />

To show a single post as a preview from the chosen post type, move to the <strong>Populate</strong> <strong>Content</strong> section and select the content type as a <strong>single post</strong>. Then, just choose the post you want to get the data from.

<img class="aligncenter" src="https://i.imgur.com/t4i3PSH.png" alt="choose the following order to show a single post as a preview from the chosen post type" width="1000" height="580" />

Now, let’s get the data and display it in the template.

First, add a <strong>Carousel</strong> element to display all products’ images as a slider. Since all the images of the product are saved in a custom field created by Meta Box, click the <strong>Select</strong> <strong>dynamic data</strong> button and find the corresponding field. In my case, it is the Gallery.

<img class="aligncenter" src="https://i.imgur.com/tK8mwH0.png" alt="Get the data and display it in the template." width="1000" height="580" />

Now, all the pictures of products have been obtained.

<img class="aligncenter" src="https://i.imgur.com/zUnzhN1.png" alt="All pictures of the products are obtained" width="1000" height="313" />

The name of the car and its description is the post title and post content, so add the <strong>Post</strong> <strong>Title</strong> and <strong>Post</strong> <strong>Content</strong> element.

<img class="aligncenter" src="https://i.imgur.com/m1eb7NW.png" alt="add the Post Title and Post Content element." width="1000" height="276" />

To display the rental price per day, add a <strong>Rich</strong> <strong>Text</strong> element. Since the price of the product is saved in a custom field created by Meta Box, connect it to the corresponding fields by the <strong>Select dynamic data</strong> button.

<img class="aligncenter" src="https://i.imgur.com/54ZOeGo.png" alt="Add a Rich Text element and connect it to the corresponding fields to display the rental price per day," width="1000" height="601" />

To display all the detailed information of the product, add the <strong>List</strong> element. In the <strong>List</strong> element, add items such as Car Year, Fuel, Max Passenger, etc. You can add title for each item as the name of the characteristic, then add dynamic data from custom fields into the <strong>Meta</strong> section like this.

<img class="aligncenter" src="https://i.imgur.com/sp1N4Io.png" alt="choose as order to displayall the information of the product" width="1000" height="626" />

Then, also in the list, just add respective items and connect them to the custom fields in the same way.

<img class="aligncenter" src="https://i.imgur.com/Hs7YcQD.png" alt="Add respective items and connect them to the custom fields" width="1000" height="649" />

<img class="aligncenter" src="https://i.imgur.com/jWNrKsK.png" alt="add respective items and connect them to the custom fields" width="1000" height="626" />
<h2>Step 4: Style the Product Page</h2>
You can style the layout of the page as you want in the Bricks visual builder. I’ll style some elements a little bit for example.

Just choose the wanted element, and change the settings in the <strong>Style </strong>section.

<img class="aligncenter" src="https://i.imgur.com/hY89Ndj.png" alt="Style the section" width="1000" height="417" />

Then, the product page will have a new look as below:

<img class="aligncenter" src="https://i.imgur.com/iufdSei.png" alt="New look after styling" width="1000" height="581" />
<h2>Last Words</h2>
We’ve found out how to create a product page using Meta Box and Bricks Builder. In the event that you want to try other methods, keep track of us for more tutorials. Or, if you want to suggest any topic, feel free to leave a comment. Good luck!