An effective product page can capture customer attention and contain all the information they might need before buying. Follow these practices using Meta Box and Brizy, you’ll be able to simply create a product page that’s full of needed information.

I’ve built a car rental page as an example:

A Product Page using Meta Box and Brizy

Video Version

Before Getting Started

The page contains the product's detailed information, and its gallery. It’s a singular page of your product post type. The name and description of the product are the title, and content of the post. The remaining detailed information will be saved in the custom fields that allows you to flexibly style the page.

You will need some tools to create a capturing product page that converts. I use Meta Box core plugin to have the framework for creating custom post types and custom fields for my products. You can download it directly from wordpress.org.

Besides, we need some Meta Box extensions to have advanced features:

You can install them individually or use Meta Box AIO.

Lastly, make sure you have Brizy on your site to build the page.

Create a Custom Post Type

Go to Meta Box and create a new post type for your products.

Create a new post type for your products

After publishing, you will see a new post type displayed.

A new post type displayed

Create Custom Fields

These are the fields that I’ll create for example. They are just some basic fields for typical information.

This is some basic fields for typical information

Go to Meta Box to create custom fields.

Create custom fields

First, choose the Number field type for the numeric information.

Choose the Number field type for the numeric information

These are the number fields that I created

Create some fields that allow the user to choose one from the provided list in the Select type.

Create Select fields that allow the user to choose one from the provided list

These are Select fields that I created

For the rest information such as fuel usage, engine capacity, max luggage, mileage, we use the Text field.

Use the Text field for the rest information

These are the Text fields that I created

Choose an Image Advanced field for the gallery to allow the user to upload multiple images.

Choose an Image Advanced field for the gallery to allow the user to upload multiple images

After creating all the fields, move to the Settings tab, choose Location as Post Type, and then select Car Rental to apply these fields to the post type.

Move to the Settings tab to apply these fields to the post type

Then, move to the post editor, you will see all of the created custom fields.

All of the created custom fields

Create the Page

Set the page

Go to Brizy and create a template for the product page.

Create a template for the product page

Choose Single for the template type.

Choose Single for the template type

And choose your product post type name from the list.

Choose your product post type name from the list

Then, edit the template with Brizy.

Edit the template with Brizy

Add a block.

Add a block

Go to the Global Blocks section to set the header for the page.

Set the header for the page

Add a new block for the page content.

Add a new block for the page content

Choose create your own

I use the Row element to divide content into two columns. Basically, you can choose one of two elements: Column and Row. They are quite the same, but there is a difference on how to edit each inside column size.

Use the Row element to divide content into two columns

Create the gallery

In the first column, I want to show images of the product as a slider. Actually, Brizy doesn't have any elements which can get multiple images at once from the Image Advance field from Meta Box, which saves the product images. Therefore, I use MB Views to create a template for it, then use the shortcode to embed it into this column.

Go to Views of Meta Box to add a new view.

Go to Views of Meta Box to add a new view

First, add a class for the gallery to set the style for them later.

Add a class for the gallery

Click the Insert Field button, and choose the name of the field that we’ve used to save the product images.

Click the Insert Field button

Choose the name of the field that we’ve used to save the product images

You can add some CSS to apply a style for the gallery. I use it to set its display as a slider.

Add some CSS to apply a style for the gallery

I uploaded all the code in Github, you can go there to see it in detail.

Move to the Settings section of the View. Set this view in the type of Shortcode.

Set this view in the type of Shortcode

Then, a shortcode will be automatically generated right after you publish the view. You can copy it.

a shortcode automatically generated right after publishing the view

Back to the template editor with Brizy, insert the Shortcode element into the first column.

Insert the Shortcode element into the first column

Paste the shortcode generated by the view.

Paste the shortcode generated by the view

Display product infoFaltrmation

Move on to the second column, add a Title element to show the product name.

Add a Title element to show the product name

As well as, add the Content element to display product description.

Add the Content element to display product description

I will use the Row element for the next information.

Use the Row element for the next information

Inside the Row, add a Text element on the left, and add some text for the information’s name.

Add a Text element on the left, and add some text for the information’s name

On the right, also add a Text element.

Add a Text element

The information is the pricing that saves in a custom field. So, choose the Typography button to customize the text. Click on the Dynamic data button and choose a field that you want to get data from.

Get the information is the pricing that saves in a custom field

Then the data will display into the element automatically.

The data will display into the element automatically

For the next information, use the Row element as well.

Use the Row element as well

You can do likewise as the previous one to get data from custom fields.

Get data from custom fields

Since the following ones are the same in the content and style, you can style the first row a little bit.

Style the first row a little bit

Then, duplicate it to save time displaying and style them.

Duplicate the row to save time displaying and style

Just change the text in the left column, and change the field in the right column. You’ll get full of this section in the right form.

Get full of this section in the right form

Also style the pricing a little bit. We’ve done displaying all the information about the product.

We’ve done displaying all the information about the product

Add a new block for the footer.

Add a new block for the footer

Then, the product page will display as below:

The product page will display

Last Words

It's pretty simple to create a product page by using Meta Box and Brizy. If you have further questions about the topic, please let us know in the below comment section!

Leave a Reply

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