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!

Other case studies you might be interested in

  1. Create A Dynamic Landing Page in WordPress Using Custom Field
  2. Create a Filter to Find Hotels by Location
  3. Create an OTA Website Like Booking.com with Meta Box Plugin - P1: Create a Page to Introduce Hotel Rooms
  4. Create an OTA Website Like Booking.com with Meta Box Plugin - P2: Create Filters on the Archive Page
  5. Create an OTA Website Like Booking.com with Meta Box Plugin - P3: Create Filters for Single Hotel Pages
  6. Create Dynamic Favicon in WordPress using Meta Box plugin
  7. Create Posts Series in WordPress Using Meta Box
  8. Display The Latest Products Section - P2 - Using Meta Box and Elementor
  9. Display The Latest Products Section - P3 - Using Meta Box And Oxygen
  10. How to Add Custom Fields for WooCommerce - P2 - Using MB Views
  11. How to Add Custom Fields to Display Banners using Meta Box Plugin
  12. How to Add Guest Authors and Guest Posts - Using Meta Box
  13. How to Add Related Posts - Using Custom Fields
  14. How to Build a Hotel Booking Website Using Meta Box - P1
  15. How to Build a Hotel Booking Website Using Meta Box - P2 - Booking Page in Backend
  16. How to Build a Hotel Booking Website Using Meta Box - P4 - Booking Management Page
  17. How to Build a Hotel Booking Website Using Meta Box – P3 – Booking Page for Customer
  18. How to Create a Classified Ads Website using Meta Box
  19. How to Create a Custom 404 Page in WordPress - P1 - Using Meta Box and Elementor
  20. How to create a FAQs page - P5 - Using Meta Box and Breakdance
  21. How to Create a Product Page - P2 - Using Meta Box and Oxygen
  22. How to Create a Product Page - P3 - Using Meta Box and Bricks
  23. How to Create a Product Page - P4 - Using Meta Box and Elementor
  24. How to Create a Product Page - P5 - Using Meta Box and Gutenberg
  25. How to Create a Product Page - P6 -Using Meta Box and Breakdance
  26. How to Create a Product Page - P7 - Using Meta Box + Kadence
  27. How to Create a Product Page - P8 - Using Meta Box and Brizy
  28. How to Create a Product Page - P9 - Using Meta Box and Divi
  29. How to Create a Product Page using Meta Box Plugin
  30. How to Create a Reading Progress Bar in WordPress Posts - P1 - Using MB Views
  31. How to Create a Recipe - P2 - Using Meta Box and Oxygen
  32. How to Create a Recipe - P3 - Using Meta Box and Elementor
  33. How to Create a Recipe - P4 - Using Meta Box and Bricks
  34. How to Create a Recipe - P5 - Using Meta Box and Zion
  35. How to Create a Recipe - P6 - Using Meta Box and Brizy
  36. How to Create a Recipe - P7 - Using Meta Box and Breakdance
  37. How to Create a Recipe - P8 - Using Meta Box and Kadence
  38. How to Create a Recipe - P9 - Using Meta Box and Divi
  39. How to Create a Recipe with Meta Box Plugin
  40. How to Create a Simple Listing - P2 - Using Meta Box and Bricks
  41. How to Create a Simple Listing - P3 - Using Meta Box and Breakdance
  42. How to Create a Simple Listing - P4 - Using Meta Box and Elementor
  43. How to Create a Simple Listing - P5 - Using Meta Box and Kadence
  44. How to Create a Team Members Page - P1- Using Meta Box and Elementor
  45. How to Create a Team Members Page - P2 - Using Meta Box and Oxygen
  46. How to Create a Team Members Page - P3 - Using Meta Box and Bricks
  47. How to Create a Team Members Page - P4 - Just Meta Box
  48. How to Create a Team Members Page - P6 - using Meta Box and Breakdance
  49. How to Create a Team Members Page - P7 - Using Meta Box and Kadence
  50. How to Create a Video Gallery Page - P2 - Using Meta Box + Bricks
  51. How to Create a Video Gallery Page - P3 - Using Meta Box and Breakdance
  52. How to Create a Video Gallery Page - P4 - Using Meta Box + Elementor
  53. How to Create a Video Gallery Page - P5 - Using MB Views
  54. How to Create a Video Gallery Page - P6 - Using Meta Box and Zion
  55. How to Create a Video Gallery Page - P7 - Using Meta Box and Kadence
  56. How to Create a Video Gallery Page Using Meta Box + Oxygen
  57. How to Create ACF Flexible Content Field with Meta Box
  58. How to Create an Auto-Updated Cheat Sheet in WordPress
  59. How to Create an FAQs Page - P1 - Using Meta Box and Elementor
  60. How to create an FAQs page - P2 - Using Meta Box and Oxygen
  61. How to create an FAQs page - P4 - Using Meta Box and Bricks
  62. How to Create an FAQs Page - P6 - Using MB Views
  63. How to Create an FAQs Page - P7 - Using Meta Box and Divi
  64. How to Create an FAQs Page - P8 - Using Meta Box and Kadence
  65. How to Create an FAQs Page - P9 - Using MB Blocks
  66. How to Create an FAQs Page -P3- Using Meta Box
  67. How to Create Buttons with Dynamic Link using Custom Fields
  68. How to Create Category Thumbnails & Featured Images Using Custom Fields
  69. How to Create Download and Preview Buttons - P1 - Using Meta Box and Bricks
  70. How to Create Download and Preview Buttons - P2 - Using Meta Box and Oxygen
  71. How to Create Download and Preview Buttons - P3 - Using MB Views
  72. How to Create Download and Preview Buttons - P4 - Using Meta Box and Kadence
  73. How to Create Download Buttons in WordPress - Using Custom Fields
  74. How to Create Dynamic Landing Page in WordPress - P1 - Using Meta Box and Elementor
  75. How to Create Dynamic Landing Page in WordPress - P2 - Using Meta Box and Bricks
  76. How to Create Menus for Restaurants - P1 - Using Meta Box and Elementor
  77. How to Create Menus for Restaurants - P2- Using Meta Box and Bricks
  78. How to Create Notification Using Custom HTML Field
  79. How to Create Online Admission Form for School or University
  80. How to Create Online Reservation Form for Restaurants using Meta Box
  81. How to Create Reading Time to Your WordPress Posts - Using MB Views
  82. How to Create Relationships - P1 - Using Meta Box and Oxygen
  83. How to Create Relationships - P2 - Using Meta Box and Bricks
  84. How to Create Relationships - P3 - Using MB Views
  85. How to Create Relationships - P4 - Using Meta Box and Breakdance
  86. How to Create Taxonomy Thumbnails & Featured Images - P2 - Using Meta Box and Oxygen
  87. How to Create Taxonomy Thumbnails & Featured Images - P3 - Using Meta Box and Bricks
  88. How to Create Taxonomy Thumbnails & Featured Images - P4 - Using MB Views
  89. How to Create YouTube Video Timestamps on WordPress Website - P1 - Using MB Views
  90. How to Display a Video Playlist - P1- Using MB Views
  91. How To Display All Listings On A Map With Meta Box
  92. How to Display Author Bio in WordPress - P1 - Using Meta Box and Bricks
  93. How to Display Author Bio in WordPress - P2 - Using MB Views
  94. How to Display Dynamic Banners in WordPress - P3 - Using MB Views
  95. How to Display Images from Cloneable Fields - P1 - with Gutenberg
  96. How to Display Images from Cloneable Fields - P2 - Using Meta Box and Oxygen
  97. How to Display Images from Cloneable Fields - P3 - with Elementor
  98. How to Display Images from Cloneable Fields - P4 - with Bricks
  99. How to Display Opening Hours for Restaurants - P1 - Using Meta Box + Gutenberg

Leave a Reply

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