Skip to main content

Creating a product page - Meta Box + Bricks

We’re going to find out how to create a product page using Meta Box and Bricks. I chose to create a car rental page as an example.

Example of a Product Page


As you can see, my product page contains the product’s detailed information. Each product will be a post of a custom post type. The basic information such as products’ name and its description are the title and content of the post. Other extra information will be saved in different custom fields.

Here are some tools we need:

Video version

1. Creating a post type

Go to Meta Box > Post Types > Add New to create a new post type.

Create a new custom post type

After publishing, you will see a new Car Rentals menu here.

New custom post type after created in the admin dash board

2. Creating custom fields

Go to Meta Box > Custom Fields to create a new field group. Here, I created some fields as below to save the products’ information:

Created custom field

For the car year information, you can give some example data for it by filling in an example year in the Placeholder box.

To give some example data for the field, fill in the Placeholder box

You can also enter numbers in the Min Value and Max Value boxes in order to limit the numbers of passenger like this:

Enter numbers in the Min Value and Max Value boxes to limit the number of passengers

For the fuel information, I choose it as a Select field to fill in some options in the Choices box to allow choosing one from them.

Fill in some options in the Choices box to allow users to choose

After creating all the needed fields, move to the Settings tab, choose Location as Post Type and select the Car Rentals to apply these fields to it.

Set location in the settings to apply created fields

You can easily see all the created custom fields when creating a new post in the Car Rentals post type.

All created custom fields in the created post type

3. Creating a template for the page

Go to Bricks > Template to create a new template.

Create a template for the page

Since each product is displayed as a single page, set the template as Single and then edit it with Bricks.

Set the template as Single

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

To apply the template to the post type we want, go to the Settings > Template Settings > Conditions and choose Post Type in the list of options. Then, select the wanted post type. Here, it’s Car Rentals.

Apply the template to the wanted post type

To show a single post as a preview from the chosen post type, move to the Populate Content section and select the content type as a single post. In the list of options, choose the post you want to get the data from.

Select the content type as a single post

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

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

Add a Carousel element

Then, all the pictures of the products will be shown immediately.

All the pictures of the products will be shown imediately

Since the name and the description of the car are the post title and post content, add the Post Title and Post Content element.

Add the Post title and post content element

To display the rental price per day, add the Rich Text element. Then, click the Select dynamic data button > choose the corresponding field to get the data that is saved in a custom field created by Meta Box.

Display the rental price per day

For all the detailed information of the product, add the List element. In this 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 Meta section as follows:

Add the List element for detailed information

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

Add respective items to the list and connect them to the wanteds custom fields

Connect them the same way

Now, all the information of the product has been displayed.

4. Styling the page

You can style some elements and layout of the page as you want in the Bricks visual builder. Choose the wanted element and change the settings in the Style section.

I just styled a little bit for example.

Style the page

Here is my product page after styling.

The final result