Back to contents

JetElements: How to Use Dynamic Values in Widgets

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.

We are going to show how to 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.

jetengine-meta-boxes

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.

meta field settings

After that, the Repeater Fields section appears, where we add a media repeater field.

repaeter item in meta 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.

WooCommerce Product

Here we can see the created Product Settings meta box with a repeater field, where we can add media files.

Product gallery

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.

Single page template

First of all, when Elementor opens, we need to set the Post Type “Products” in the Single Settings > Preview section.

single settings

2 Step — Add Slider template

Click the “Magic Button” option, choose one of the pre-designed Slider templates and insert it into the page.

Magic Button slider

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”.

slider dynamic settings

Don’t forget to click the “Update” button below and go ahead to view the product gallery in the slider form on the frontend.

slider sample

Great! Now you know about how to use JetElements and JetEngine to display dynamic content from the repeater fields.