How to Display Product Variations - P1 - Using Meta Box and Gutenberg
Published: 2022-01-25 03:55:33


In eCommerce, we usually see a product that has a bunch of different variations. For example, a T-shirt may have different colors along with different information such as size and price, then each one will be a variation.

Today, we are going to display them all in a clever way on the single product page. <strong>Whenever you click on a color button, all the corresponding information of that variation will be displayed, even in the image gallery</strong>.
<!--more-->

<img class="aligncenter" src="https://i.imgur.com/SaX2Lxl.gif" alt="The example of displaying product variations on the single product page" width="1200" height="675" />

To do that, we need some particular techniques. In this practice, we’ll use custom fields created by Meta Box. By the way, we do not use any theme, just Gutenberg here.
<h2>Before Getting Started</h2>
To add all of the extra information for variations, we need custom fields. So, the first tool on the list is <a href="https://wordpress.org/plugins/meta-box/">Meta Box core plugin</a>. This is the framework to create custom fields &amp; custom post types. It’s free and available on <a href="https://wordpress.org/plugins/meta-box/">wordpress.org</a>. We also use some advanced features of Meta Box by using the following extensions:
<ul>
<li><a href="https://metabox.io/plugins/custom-post-type/">MB Custom Post Type &amp; Custom Taxonomies</a>: It’s a free extension of Meta Box to create custom post types.</li>
 	<li><a href="https://metabox.io/plugins/meta-box-builder/">Meta Box Builder</a>: This premium extension provides a UI in the back end to create custom fields easily.</li>
 	<li><a href="https://metabox.io/plugins/meta-box-conditional-logic/">Meta Box Conditional Logic</a>: It lets you show fields precisely as any rules you want.</li>
 	<li><a href="https://metabox.io/plugins/meta-box-group/">Meta Box Group</a>: This extension helps you organize custom fields into repeatable and collapsible groups.</li>
 	<li><a href="https://metabox.io/plugins/mb-views/">MB Views</a>: It helps you to create templates without touching the theme files as well as get the custom fields’ value and display them.</li>
</ul>
<h2>Video Tutorial</h2>
https://youtu.be/CpitJzTnWWo
<h2>Step 1: Create a New Custom Post Type</h2>
Go to <strong>Meta Box</strong> &gt; <strong>Post Types</strong> &gt; <strong>New Post Type</strong>. After creating a new post type, you will see a new menu appears on your dashboard. It’s your new post type.

<img class="aligncenter" src="https://i.imgur.com/FFl1nma.png" alt="A new menu appears after creating a new post type." width="1200" height="632" />
<h2>Step 2: Create Custom Fields</h2>
Go to <strong>Meta Box</strong> &gt; <strong>Custom Fields</strong> &gt; <strong>Add New</strong>.
<img class="aligncenter" src="https://i.imgur.com/d9t4wgB.png" alt="Create custom fields by Meta Box." width="1200" height="679" />

We have a <a href="https://youtu.be/_DaFUt92kYY">tutorial on how to create custom fields</a>, you can refer to it for more information.

This is the structure of the fields that I’ll create.
<table>
<tbody>
<tr>
<td><b>Field</b></td>
<td><b>Types of Field</b></td>
<td><b>ID</b></td>
</tr>
<tr>
<td><span style="font-weight: 400;">Does This Product Have Variations?</span></td>
<td><span style="font-weight: 400;">Switch</span></td>
<td><span style="font-weight: 400;">Does_this_product_have_variaitons</span></td>
</tr>
<tr>
<td><span style="font-weight: 400;">Simple Product</span></td>
<td><span style="font-weight: 400;">Group</span></td>
<td><span style="font-weight: 400;">simple_product</span></td>
</tr>
<tr>
<td><span style="font-weight: 400;">          Product Image</span></td>
<td><span style="font-weight: 400;">Image Advanced</span></td>
<td><span style="font-weight: 400;">product_image</span></td>
</tr>
<tr>
<td><span style="font-weight: 400;">          Size</span></td>
<td><span style="font-weight: 400;">Checkbox List</span></td>
<td><span style="font-weight: 400;">size</span></td>
</tr>
<tr>
<td><span style="font-weight: 400;">          Original Price</span></td>
<td><span style="font-weight: 400;">Text</span></td>
<td><span style="font-weight: 400;">original_price</span></td>
</tr>
<tr>
<td><span style="font-weight: 400;">          Promotional Price</span></td>
<td><span style="font-weight: 400;">Text</span></td>
<td><span style="font-weight: 400;">promotional_price</span></td>
</tr>
<tr>
<td><span style="font-weight: 400;">          Status</span></td>
<td><span style="font-weight: 400;">Select</span></td>
<td><span style="font-weight: 400;">status</span></td>
</tr>
<tr>
<td><span style="font-weight: 400;">Variations of Product</span></td>
<td><span style="font-weight: 400;">Group</span></td>
<td><span style="font-weight: 400;">variations_of_product</span></td>
</tr>
<tr>
<td><span style="font-weight: 400;">          Product Image</span></td>
<td><span style="font-weight: 400;">Image Advanced</span></td>
<td><span style="font-weight: 400;">product_image</span></td>
</tr>
<tr>
<td><span style="font-weight: 400;">          Size</span></td>
<td><span style="font-weight: 400;">Checkbox List</span></td>
<td><span style="font-weight: 400;">size</span></td>
</tr>
<tr>
<td><span style="font-weight: 400;">          Original Price</span></td>
<td><span style="font-weight: 400;">Text</span></td>
<td><span style="font-weight: 400;">original_price</span></td>
</tr>
<tr>
<td><span style="font-weight: 400;">          Promotional Price</span></td>
<td><span style="font-weight: 400;">Text</span></td>
<td><span style="font-weight: 400;">promotional_price</span></td>
</tr>
<tr>
<td><span style="font-weight: 400;">          Status</span></td>
<td><span style="font-weight: 400;">Select</span></td>
<td><span style="font-weight: 400;">status</span></td>
</tr>
<tr>
<td><span style="font-weight: 400;">          Color Name</span></td>
<td><span style="font-weight: 400;">Select</span></td>
<td><span style="font-weight: 400;">color_name</span></td>
</tr>
</tbody>
</table>
As you can see here, I have a <strong>Switch</strong> field to confirm whether the product has variations or not. If your product doesn’t have any variation, it is a simple product, so the <strong>Simple Product</strong> group will be displayed for inputting data.

Then, there is some basic information that we put in that group with subfields inside.

<img class="aligncenter" src="https://i.imgur.com/6AHdgx7.png" alt="Simple Product group with subfields inside" width="1200" height="624" />

If the product has any variations, the <strong>Variations of Product</strong> group will be displayed. This group also has subfields similar to the <strong>Simple Product</strong> group. In addition, it has an extra subfield inside to define the name of the variation which is <strong>Color Name</strong>.

To set the rule about when those groups display, we need to set rules in the <strong>Conditional Logic</strong> section in their <strong>Advanced Settings</strong> tab.

Just choose the key as the ID of the Switch field, and the value as 0 or 1. These values correspond to No and Yes options of this field.

<img src="https://i.imgur.com/rtV7lul.png" alt="Set the conditional rule for Simple Product." width="1200" height="662" /> Set the conditional rule for Simple Product

0 is set for the <strong>Simple Product</strong> group field. So, when the Switch field is set to be No, this group will be displayed.

<img src="https://i.imgur.com/YK1KALN.png" alt="Set the conditional rule for Variations of Product." width="1200" height="680" /> Set the conditional rule for Variations of Product

Do likewise, 1 is set to the <strong>Variations of Product</strong> group field.

One more thing, there is usually more than one variation. Thus, we set the <strong>Variations of Product</strong> group as cloneable to have more spaces to add variations.

<img class="aligncenter" src="https://i.imgur.com/mt0jh89.png" alt="Set the Variations of Product group as cloneable to have more spaces to add variations." width="1200" height="674" />

After having all the custom fields, go to the <strong>Settings</strong> tab of the field group, and choose the <strong>Location</strong> as the post type of the products that we’ve just created to apply the custom fields to it.

<img class="aligncenter" src="https://i.imgur.com/WW8HMeM.png" alt="Choose the Location as Post Type of the product." width="1200" height="638" />

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

<img class="aligncenter" src="https://i.imgur.com/KS9rXFK.gif" alt="The created custom fields are displayed in post editor." width="1200" height="675" />

Now, just enter the information into the fields.
<h2>Step 3: Display the Product Variations Information on the Product Page</h2>
To display the product variations information on the product page, you normally have to go to the theme’s files to add code or use a page builder. But, in Gutenberg, you have another way with Meta Box. It has the <strong>MB Views</strong> extension to create templates without touching the theme’s files.

So, let’s create a new template using it.

Instead of typing code into the box in the <strong>Template</strong> tab, you can insert fields to get their data.

<img class="aligncenter" src="https://i.imgur.com/p66P6Va.png" alt="Insert fields to get data in the Template tab.." width="1200" height="679" />

Just click the <strong>Insert Field</strong> button and choose which one you want.

<img class="aligncenter" src="https://i.imgur.com/xdVRMif.png" alt="The example of inserting a field in the Template tab." width="1200" height="680" />

It is necessary to edit the code a little bit when we insert fields. You can refer all code on the original post I put the link.
In there, <code>product_types</code> is the variable to admit the value of the <strong>Switch</strong> field. If it is 0, it means that the product has no variation. So, the next lines of code will get the value of the fields inside the <strong>Simple Product</strong> group. Otherwise, when the returned value is 1, the value of fields inside the <strong>Variations of Product</strong> group will be displayed.

<img class="aligncenter" src="https://i.imgur.com/ajfzD12.png" alt="The product_types variable admits the value of the Switch field." width="1200" height="680" />

Also in the code, I get the value from each <strong>Product Image</strong> field twice. One displays in the large size, and one in the thumbnail size. All of them will be used to set a slider.

<img class="aligncenter" src="https://i.imgur.com/8JBgcMy.png" alt="Get the value from each Product Image field twice to display both large size and thumbnail size." width="1200" height="677" />

These lines of code are to know when the product or variation has any promotion price and set a rule to display both of the original and promotional prices or just the original one.

<img class="aligncenter" src="https://i.imgur.com/7k6qapV.png" alt="Get the value of price field and set a rule to display it." width="1200" height="676" />

Next, move to the <strong>Settings</strong> section of the view. Assign this template to the single product page. And now, go to any single product page, see the result.

<img class="aligncenter" src="https://i.imgur.com/j71Wmai.gif" alt="The result of displaying product variations after inserting wanted fields.." width="1200" height="675" />

It is so messy now. So, we’ll need some JS and CSS to make it more beautiful with a better layout.

Before styling, we need to edit this template a little bit more. Back to the view, then add some <strong>div</strong> tags to divide elements into sections. I put the code on our <a href="https://github.com/wpmetabox/tutorials/blob/master/display-product-variations/template.php">Github</a>, you can refer to it for more clarity.

There is a notice that I added an A tag in the place where I output the color of variations. I also created a dynamic class there. It will generate different classes using the color name.

<img class="aligncenter" src="https://i.imgur.com/HyW9VNl.png" alt="Add an A tag in the place where I output the color of variations." width="1200" height="677" />

I also added an attribute named <strong>data-id</strong> for price, size, status as well as the image gallery. This attribute will admit the value of the corresponding color name.

<img class="aligncenter" src="https://i.imgur.com/Sen62Vy.png" alt="Add an attribute named data-id to admit the value of the corresponding color name for price, size, status, image gallery." width="1200" height="681" />

Back to the single product page, all the elements have been just reordered.

<img class="aligncenter" src="https://i.imgur.com/d3YEbcV.gif" alt="The elements of product variation have been reordered after adding div tags." width="1200" height="675" />

Let’s move to the next step.
<h2>Step 4: Set Rules to Display the Variations’ Information</h2>
As you see at the beginning of this video, the images of the product variations are in a slider and the information of each variation displays only when you choose the matching color. To have it, I use some JS and CSS. However, I’m using <strong>My Custom Functionality</strong> plugin instead of adding them directly to the theme. So, when I change the theme, it won’t be affected. You can download this plugin from <a href="https://github.com/wpmetabox/tutorials/tree/master/display-product-variations/my-custom-functionality-master">GitHub</a> and install it on your website.
<h3>Download the JS and CSS Library</h3>
For the JS and CSS, I use the Slick library. It’s also available on <a href="https://github.com/kenwheeler/slick/tree/master/slick">Github</a>. It includes several files as you can see here. But, we just need three of them.

<img class="aligncenter" src="https://i.imgur.com/ZDwxuiL.png" alt="JS and CSS files in the Slick library." width="1200" height="604" />

Go to the folder of the My Custom Functionality plugin. Upload them into the corresponding JS and CSS folders.

<img class="aligncenter" src="https://i.imgur.com/ThdTMWK.png" alt="Upload the slick-theme.css file into the css folder of My Custom Functionality plugin." width="1200" height="512" />

<h3>Create Custom JS for Slider and Rules</h3>
Next, to set a rule that stipulates for displaying the information of each variation as well as the slider, I’ll create a <code>custom.js</code> file in the <code>js</code> folder and add the following code to it.

<img class="aligncenter" src="https://i.imgur.com/gsdMNC4.png" alt="Add code to custom.js file." width="1200" height="664" />


<h3>Declare the JS and CSS Files</h3>
Now, add code inside the function <code>custom_enqueue_files()</code> in the <code>plugin.php</code> file.
<pre>wp_enqueue_style('slick', plugin_dir_url( __FILE__ ).'/assets/css/slick.css');
wp_enqueue_style('slick-theme', plugin_dir_url( __FILE__ ).'/assets/css/slick-theme.css');

wp_enqueue_script('custom', plugin_dir_url( __FILE__ ).'/assets/js/custom.js', ['jquery']);
wp_enqueue_script('slick-min', plugin_dir_url( __FILE__ ).'/assets/js/slick.min.js', ['jquery']);
wp_enqueue_script('script', plugin_dir_url( __FILE__ ).'/assets/js/script.js', ['jquery']);</pre>
Now, the product images have already turned into a slider but we cannot see all the information of each variation in the right place.
<h2><img class="aligncenter" src="https://i.imgur.com/k6cyk0J.gif" alt="The product images have already turned into a slider." width="1200" height="674" /></h2>
<h2>Step 5: Style the Product Page</h2>
Traditionally, you have to add CSS to the Customizer or the theme’s file. But, with MB Views, you have a CSS tab for it.

<img class="aligncenter" src="https://i.imgur.com/XwtXUVo.png" alt="Add code to CSS tab." width="1200" height="658" />

There are many classes I used in this code. You can refer to all of it on <a href="https://github.com/wpmetabox/tutorials/tree/master/display-product-variations">Github</a>.

Now, back to a single product page, it turned into a new look. When you choose a color, the photo gallery will automatically change according to that color. At the same time, the sizes and prices also change correspondingly.

<img class="aligncenter" src="https://i.imgur.com/mR2wfA2.gif" alt="The product variations turned into a new look." width="1200" height="675" />
<h2>Last Words</h2>
As you see, displaying the product variations on the single product page with Meta Box and custom field is not something difficult. If you use another page builder, keep track of our blogs for more upcoming tutorials. If you are confused or have any ideas, let us know by leaving a comment. See you next blog!