Back to contents

JetElements Dynamic Data addon: how to use dynamic values in the JetElements widgets

From this tutorial, you will learn how to use repeater fields from the meta boxes to add dynamic content to the pages via JetElements widgets.

In order to be able to do this, you should install and activate JetElements, JetEngine and JetElements Dynamic Data Addon plugins beforehand.

JetElements Dynamic Data Addon allows displaying dynamic content created with JetEngine with the help of JetElements widgets. You can use one of the basic 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 box with JetEngine plugin

Step 1 – The first thing you need to do is to create a meta box in the JetEngine > Meta Boxes section in the WP Dashboard. When you click the Add New button, the settings window will appear right away.

JetEngine meta boxes

Step 2 – 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.

JetEngine general settings

Step 3 – The next 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.

JetEngine meta fields

Step 4 – When everything is set, click the Add Meta Box button on the right.

Customizing the product gallery

Step 1 – Now we open the Products section in the WP Dashboard. There is a product, that we are going to add the gallery images. Click the Edit option under the product.

WooCommerce Product

Step 2 – Here we can see the create Product Settings meta box with a repeater field, where we 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 on 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.

Step 1 – We go to the Crocoblock > My Library section. Here we click the Add New button and create a Single page template in Elementor page builder.

Single page template

Step 2 – First of all, when Elementor opens, we need to set the Post Type: Products in the Single Settings > Preview section.

single settings

Step 3 – Then, we click the Magic Button option, choose one of the pre-designed Slider templates and insert it into the page.

Magic Button slider

Step 4 – 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: gallery, and also set the Image repeater field with the repeater field ID: image.

slider dynamic settings

Step 5 – Don’t forget clicking the Save 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 Data Addon for displaying dynamic content from the repeater fields.