In e-commerce websites, each product may have multiple variations to separately choose color, size and even the stock status for them. Let’s see how to have product variations using custom fields created by Meta Box and display them on a single page by Bricks.

This is the page that I created as an example:

The example of displaying product variations on the single product page.

Each of the variations here is set as a color of the product. When you choose a color, it will get the corresponding image gallery. When you choose another one, it will get a different gallery. At the same time, other information of that variation will automatically come up.

Creating variations for the products is quite special practice. If you are using some of the other page builders, you may need to use code. However, you can do it totally visually with Bricks.

Let’s see how to do it.

Video Version

Before Getting Started

Each product is a post of a custom post type. The name and description of the product is the title and content of the post. Other information such as product image, size, price and status will be saved in custom fields created by Meta Box. So we need Meta Box core plugin to have a framework to create custom fields and custom post types.

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

Finally, having Bricks to build this page visually.

Create a Custom Post Type

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

Create a new post type

After publishing, you’ll see a new Online Shops menu in the admin dashboard.

A new menu appears after creating a new post type.

Let’s create custom fields to save products’ information.

Create Custom Fields

Go to Meta Box > Custom Fields to create a new field group.

Create custom fields by Meta Box

Since each variation will have the same types of detailed information, we’ll include them all in a group. This is the group field that I created.

Create variations of product group

Variations Product group with subfields inside

There may be some variations of each product, so this group should be cloneable to have an ‘Add more’ button to easily add more variations like this.

Add more variations

Set it to be cloneable by this tick.

Set the Variations of Product group as cloneable to have more spaces to add variations.

After that, move to the Settings tab > choose Location as Post Type and then select the Online Shop post type to apply these fields to it.

Choose the location as post type of the product.

Now, when adding a new post in the post type, you’ll see all the created fields. Just fill in some information.

The created custom fields are displayed in post editor

Display the Product Variations on the Product Page

Create a New Template

Go to Bricks > Templates.

Go to Bricks > Templates to create new template

Since the product page is a single page, select the template type as Single, then just edit it with Bricks.

Select the template type as Single and edit it with Bricks

Remember to set conditions for the template to apply it to the single page of the products post type.

Set conditions for the template

And then, you can set the preview of the products page in the Populate Content section.

Set the preview of the products page in the populate content section

Display Product’s Information

First, add a Section element to have a container for covering all the product information.

Add a section element to have a container to cover all the product information

Then, I will add some Div elements to set the layout for the page. We’ll use a Div element to contain each section for each one of gallery, color, price, size, and status. Inside this cloak Div element, there will be another Div to create a loop to call all the data of the section.

Add some Div elements to set the layout for the page

Since each variation will have its own image gallery, you should add a Div element and enable the query loop for it to call all the images. Choose the type as MB Group which is the group that I created to save the product details.

Choose the type as MB Group in a Div element setting

Then, add a Carousel element inside the Div to display the images as a slider.

Add a Carousel element to display the images as a slider

Since the images of the product are saved in the custom fields created by Meta Box, go to the Select dynamic data section of the Carousel and look for the fields that we’ve saved the images.

Looking for the fields was created at the the Select dynamic data section

Now, you will see all the images display immediately.

The product images have already displayed

Add a new Div element to contain all the other product information.

Create a new Div element to contain all the other product information

Inside it, add the Post Title and Post Content elements to display the products’ name and description.

Input the post title and post content elements to display the products’ name and description

For the section to display the color of the product, add another Div element.

Add another Div element to display the color of the product

Then, add a Basic Text and change the text to differentiate this section.

Insert a Basic Text and move the text to differentiate this section

I’ll also add some Div elements for this section as well. One is to display the color labels for the variations. So, enable the query loop for it. Then, also choose the name of the group field that we’ve just created.

Enable the query loop and choose the name of the group field

Now, to get the color information, add another Div element, then choose HTML tag as a link. This helps to allow the viewer to click on the color name and the information will be changed to one of the corresponding variations. And then, select the link type as Dynamic Data to have the options to connect this div to a custom field. In my case, it's the Color Name field.

Select the link type as Dynamic Data to have the options to connect the new div to a custom field

You may want to not redirect the viewer to a new page when choosing color. So add an additional hash character. As a result, just information on the current page will be changed when clicking to select the color.

Use the Div element to show information

Next, add a Basic Text element, then use the Select dynamic data button to get the color information of the product from the custom field.

Apply the select dynamic data button to get the color information of the product from the custom field.

For the rest of the information, use the Div element as you want. It’s kind of the logic of getting color. So, just follow what has been done to get the color of the product.

Use the Div element to show information

There will be a Div element to contain the prices. There will be multiple variations and each one will have its own price, which are saved data in the cloneable group, so also enable the query loop for this Div element, and choose the group name that we’ve created.

Enable the query loop and choose the group name that we’ve created for product

After that, add a Basic Text element to display the promotional price. Similarly to get the color information, use the Select dynamic data button and connect this element to the corresponding field.

Using the Select dynamic data button for connecting this element to the corresponding field

To show the unit of price, you can also add a currency character like this:

Add a currency character to show the unit of price of product

For original price, size and status, do likewise.

And then, add a Button element to have the button to order or buy the product.

Including a button element to have the button to order or buy the product

Let’s see how it displays on the frontend.

Product information displayed on the frontend

Set Rules to Display Variations

To trigger when the viewer clicks on the color, then change the information to the corresponding one, we should use some attributes for the added elements and JS code.

Go to the cloak Div element that contains each section for gallery, color name, price, size, and status to add attribute like this.

Using some attributes for the added elements and JS code to change the information to the corresponding one

Since all the sections of the variation will be called at the same time based on these attributes, make sure to use an unifying name for all the adding attributes. Also, set the attributes’ value as the value in the Color Name field by using the dynamic data.

Using the dynamic data to set the attributes’ value as the value in the Color Name field

After that, go to the settings of this template > Page Settings > Custom Code to add some JS to the Body (footer) scripts section to create a function for triggering the moment users click to the color name, then activate and deactivate the information of the corresponding variations.

Insert some JS to the Body (footer) scripts section to create a function for triggering the moment users click to the color name

<script>
    jQuery(document).ready(function(){
        jQuery(".color-name:first,.group-image:first,.price-group:first,.info:first,.status:first").addClass('active');
        jQuery(".color-contain-group .color-group .color-name a").click(function (e) {
        jQuery(".color-contain-group .color-group .color-name").removeClass("active");
        jQuery(this).show();
        jQuery(this).parent().addClass("active");
        jQuery("div[data-id]").removeClass("active");
        jQuery("div[data-id='" + jQuery(this).attr("href").replace("#", "") + "']").addClass("active");
        e.preventDefault();
        });
    });
</script>

In there, jQuery(".color-contain-group .color-group .color-name a").click(function (e) { is to trigger when someone clicks on a product color. Then admit the name of the selected color by setting it active. Compare it with the value of the added attribute from other elements. If they are matched, the information from those elements will be displayed.

Now, you can see the active status changing when choosing any color.

The active status changing when choosing any color

Style the Page

Still in the template editor with Bricks, style any element as you want.

Styling any element as you want with Bricks

For styling the color, I will add another attribute for the color name like this.

Add another attribute for the color name

If you want to have further styling, go to the Custom Code section again and add some CSS code.

Add some CSS code in the Custom Code section to have further styling

Now, the page has turned to a new look.

The product variations turned into a new look.

Last Words

With the help of Meta Box, you can create and show product variations with not only Bricks but other page builders as well. If you want to refer to how to do it using other page builders or tools, please read more here. Or, if you want to suggest any topics for tutorials, feel free to leave a comment and keep track of our blog. Best wishes!

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

1 thought on “How to Display Product Variations - P3 - Using Meta Box and Bricks

  1. Great content as always, however, why should I use a MetaBox Custom Post Type to display products on my WordPress website instead of a prebuilt solution like WooCommerce?

Leave a Reply

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