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 how to create a product page using Meta Box plugin and Bricks.
This is my example:
Video Version
Before Getting Started
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 Meta Box core plugin to have the framework for creating custom post type and custom fields. It’s free and you can download it directly from wordpress.org.
To have advanced features of Meta Box, we need some its extensions:
- MB Custom Post Types & Custom Taxonomies: to create custom post types;
- Meta Box Builder: to have an intuitive UI to create custom fields in the backend;
They’re all in the Meta Box AIO. If you haven’t had it, you can download and install each extension individually.
Finally, make sure you activate Bricks theme on your site.
Step 1: Create a Custom Post Type
Go to Meta Box > Post Types > Add New to create a new post type.
After publishing, you will see a new Car Rentals menu in the Admin Dashboard.
Step 2: Create Custom Fields
Go to Meta Box > Custom Fields to create a new field group. Here are all the fields that I created:
If you want to give some example data for the field, you can fill in an example year in the Placeholder box.
You also can enter numbers in the Min Value and Max Value boxes to limit the number of passengers like this:
For the Select fields, you can fill in some options in the Choices box to allow users choose one from them.
After creating all the fields, move to the Settings tab. Remember to choose the Location as Post Type and select your product’s post type to apply these fields to it.
Now, when creating a new post in the Car Rentals post type, you’ll see all the custom fields:
Step 3: Create a Template for the Product Page
Since we’re going to use Bricks to do this practice, go to Bricks > Templates to create a new template.
Each product is displayed as a single page. Thus, select the template as Single, then edit it with Bricks.
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 Settings > Template Settings > Conditions > choose Post Type in the list of options, and then select 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. Then, just choose the post you want to get the data from.
Now, let’s get the data and display it in the template.
First, add a Carousel 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 Select dynamic data button and find the corresponding field. In my case, it is the Gallery.
Now, all the pictures of products have been obtained.
The name of the car and its description is the post title and post content, so add the Post Title and Post Content element.
To display the rental price per day, add a Rich Text 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 Select dynamic data button.
To display all the detailed information of the product, add the List element. In the List 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 like this.
Then, also in the list, just add respective items and connect them to the custom fields in the same way.
Step 4: Style the Product Page
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 Style section.
Then, the product page will have a new look as below:
Last Words
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!
- How to Create a Product Page using Meta Box Plugin
- How to Create a Product Page - P2 - Using Meta Box and Oxygen
- How to Create a Product Page - P3 - Using Meta Box and Bricks
- How to Create a Product Page - P5 - Using Meta Box and Gutenberg
- How to Create a Product Page - P4 - Using Meta Box and Elementor
- How to Create a Product Page - P6 -Using Meta Box and Breakdance
Other case studies you might be interested in
- Create A Dynamic Landing Page in WordPress Using Custom Field
- Create a Filter to Find Hotels by Location
- Create an OTA Website Like Booking.com with Meta Box Plugin - P1: Create a Page to Introduce Hotel Rooms
- Create an OTA Website Like Booking.com with Meta Box Plugin - P2: Create Filters on the Archive Page
- Create an OTA Website Like Booking.com with Meta Box Plugin - P3: Create Filters for Single Hotel Pages
- Create Dynamic Favicon in WordPress using Meta Box plugin
- Create Posts Series in WordPress Using Meta Box
- Display a User List On the Frontend with Meta Box
- Display The Latest Products Section - P2 - Using Meta Box and Elementor
- Display The Latest Products Section - P3 - Using Meta Box And Oxygen
- How to Add Custom Fields to Display Banners using Meta Box Plugin
- How to Add Guest Author in WordPress using Meta Box (Part 1)
- How to Add Guest Author in WordPress using Meta Box (Part 2)
- How to Add Related Posts to WordPress Using Meta Box
- How to Build a Hotel Booking Website Using Meta Box - P1
- How to Build a Hotel Booking Website Using Meta Box - P2 - Booking Page in Backend
- How to Build a Hotel Booking Website Using Meta Box - P4 - Booking Management Page
- How to Build a Hotel Booking Website Using Meta Box – P3 – Booking Page for Customer
- How to Create a Classified Ads Website using Meta Box
- How to Create a Product Page - P2 - Using Meta Box and Oxygen
- How to Create a Product Page - P3 - Using Meta Box and Bricks
- How to Create a Product Page - P4 - Using Meta Box and Elementor
- How to Create a Product Page - P5 - Using Meta Box and Gutenberg
- How to Create a Product Page - P6 -Using Meta Box and Breakdance
- How to Create a Product Page using Meta Box Plugin
- How to Create a Recipe - P2 - Using Meta Box and Oxygen
- How to Create a Recipe - P3 - Using Meta Box and Elementor
- How to Create a Recipe - P4 - Using Meta Box and Bricks
- How to Create a Recipe - P5 - Using Meta Box and Zion
- How to Create a Recipe - P6 - Using Meta Box and Brizy
- How to Create a Recipe - P7 - Using Meta Box and Breakdance
- How to Create a Recipe with Meta Box Plugin
- How to Create a Simple Listing - P2 - Using Meta Box and Bricks
- How to Create a Team Members Page - P1- Using Meta Box and Elementor
- How to Create a Team Members Page - P2 - Using Meta Box and Oxygen
- How to Create a Team Members Page - P3 - Using Meta Box and Bricks
- How to Create a Team Members Page - P4 - Just Meta Box
- How to Create a Team Members Page - P6 - using Meta Box and Breakdance
- How to Create a Video Gallery Page - P2 - Using Meta Box + Bricks
- How to Create a Video Gallery Page - P3 - Using Meta Box and Breakdance
- How to Create a Video Gallery Page Using Meta Box + Oxygen
- How to Create ACF Flexible Content Field with Meta Box
- How to Create an Auto-Updated Cheat Sheet in WordPress
- How to Create an FAQs Page - P1 - Using Meta Box and Elementor
- How to create an FAQs page - P2 - Using Meta Box and Oxygen
- How to create an FAQs page - P4 - Using Meta Box and Bricks
- How to Create an FAQs Page -P3- Using Meta Box
- How to Create Buttons with Dynamic Link using Custom Fields
- How to Create Category Thumbnails & Featured Images Using Custom Fields
- How to Create Download Buttons Using Custom Fields with Meta Box Plugin
- How to Create Menus for Restaurants - P1 - Using Meta Box and Elementor
- How to Create Menus for Restaurants - P2- Using Meta Box and Bricks
- How to Create Online Admission Form for School or University
- How to Create Online Reservation Form for Restaurants using Meta Box
- How to Create Relationships - P1 - Using Meta Box and Oxygen
- How to Create Taxonomy Thumbnails & Featured Images - P2 - Using Meta Box and Oxygen
- How to Display Images from Cloneable Fields - P1 - with Gutenberg
- How to Display Images from Cloneable Fields - P2 - with Oxygen
- How to Display Images from Cloneable Fields - P3 - with Elementor
- How to Display Images from Cloneable Fields - P4 - with Bricks
- How to Display Opening Hours for Restaurants - P1 - Using Meta Box + Gutenberg
- How to Display Opening Hours for Restaurants - P2 - Using Meta Box and Oxygen
- How to Display Product Variations - P1 - Using Meta Box and Gutenberg
- How to Display Product Variations - P2 - Using Meta Box and Oxygen
- How to Display Product Variations - P3 - Using Meta Box and Bricks
- How to Display The Latest Products - P5 - Using Meta Box and Bricks
- How to Display the Latest Products - P6 - using Meta Box and Breakdance
- How to Display the Latest Products Section - P4 - Using Meta Box + Zion
- How to Display the Most Viewed Posts - P1 - using MB Views
- How to Display the Most Viewed Posts - P2 - using Meta Box and Oxygen
- How to Filter Posts by Custom Fields - P2 - using Meta Box and FacetWP
- How to Manually Reorder Posts with Meta Box
- How to Show Featured Restaurants on Homepage - P1 - Meta Box + Elementor + WP Grid Builder
- How to Show Posts with Specific Criteria - P1 - Using Meta Box and Bricks
- How to Show Posts with Specific Criteria - P2 - Using Meta Box and Oxygen
- How to Show the Featured Restaurants - P3 - using Meta Box and Oxygen
- How to Show the Featured Restaurants - P4 - Using MB Views
- How to Show the Featured Restaurants Section - P2 - Using Meta Box and Bricks
- How to Use Custom HTML Field to Output Beautiful Texts or Output Custom CSS