- Creating a meta field with JetEngine plugin
- Customizing the product gallery
- Displaying dynamic content via JetElements Slider widget
From this tutorial, you will learn how to use repeater meta fields created with the help of JetEngine to add dynamic content to the pages via JetElements widgets.
In order to be able to do this, you should install and activate JetElements and JetEngine plugins beforehand. With the help of the JetEngine plugin, you will be able to display dynamic content using JetElements widgets, such as Advanced Carousel, Images Layout, Portfolio, Price List, Slider, Testimonials, and Timeline.
Plus, you need to install our free Dynamic data addon, which can be downloaded from the DevTools page.
We are going to show how to deal with the Dynamic Settings block that appear after installing the Dynamic data addon. In this tutorial, we’ll do this on the example of the Slider widget.
Creating a meta field with JetEngine plugin
1 Step — Create a meta box
The first thing you need to do is to create a meta box in the JetEngine > Meta Boxes section in the WP Dashboard. Click the “Add New” button, and the settings window will appear right away.
In the General block, you need to determine the title of the meta box, choose the Post or Taxonomy type, for which you want to adjust the meta box. In case you have chosen the Post type, you have to specify the appropriate post types (in our case, it’s Products post type) and it is also available to specify the specific posts.
2 Step — Create a meta field
The Meta Fields block allows creating meta fields with repeater fields. We create the Gallery meta field selecting the Repeater type.
After that, the Repeater Fields section appears, where we add a media repeater field.
If you have any problems – go through our repeater field usage tutorial.
When everything is set, click the “Add Meta Box” button on the right.
Customizing the product gallery
Now we open the Products section in the WP Dashboard. We are going to add gallery images to each of the products. Click the “Edit” button under the product.
Here we can see the created Product Settings meta box with a repeater field, where we can add media files.
Displaying dynamic content via JetElements Slider widget
There are two ways to display the dynamic information from the repeater fields on the page. The simplest one is to open the page, where you are going to showcase the content using dynamic values and drag the Slider widget to the appropriate section. But there is also the way to do that with the help of templates. We will present to you the second way.
1 Step — Create a Single page template
Go to the JetPlugins > Theme Builder section. Here we click the “Add New” button and create a Single page template in the Elementor page builder.
First of all, when Elementor opens, we need to set the Post Type “Products” in the Single Settings > Preview section.
2 Step — Add Slider template
Click the “Magic Button” option, choose one of the pre-designed Slider templates and insert it into the page.
Open the settings of the Slider widget and unfold the Dynamic Settings tab. We need to move the toggle near the Enable dynamic data option and specify the Repeater field name as “_gallery”, and also set the Image repeater field with the repeater field ID “image”.
Don’t forget to click the “Update” button below and go ahead to view the product gallery in the slider form on the frontend.
Great! Now you know about how to use JetElements and JetEngine to display dynamic content from the repeater fields.