Back to contents

JetEngine: How to Create Checkbox Meta Field Type and Display it in Listing Grid

In this tutorial, you will find out how to create Checkbox type meta field and display it in Listing Grid with JetEngineplugin.

JetEngine plugin for Elementor comes with rich opportunities, and it totally meets the needs in dynamic functionality. Let’s continue reading the tutorial to know how to work with the plugin. Firstly, in order to add a Checkbox type meta field to the Post Types, you need to create Post Types (follow this tutorial). After it’s done custom posts will be ready for displaying with Listing Grid widget.

How to add Checkbox meta field type

1 Step – First of all, proceed in WP Dashboard to JetEngine > Meta Box and add a new one (or if you have already created a Meta Box to a Post Type, just open it and follow the next step).

2 Step – Now, you need to click on Add new meta field button.

3 Step – Fill out the Title and Name/ID fields with the appropriate text value.

JetEngine Checkbox meta box

4 Step – In the Type menu, you should choose the Checkbox one from the dropdown.

5 Step – Enter the text into the Description textarea, if you need to.

6 Step – In the Options Lists click New option active link.

7 Step – Now, you should fill in the Value and Label fields with the necessary meanings (the ones that will allow the website user to choose the options he/she wants to).

JetEngine metabox options

The meaning in the Value field is what systems read as the name of a field.
The meaning in the Label field the users will see as the name for the field.

8 Step – After all settings are done, click on Add meta box button (it can be called Update meta box one).

9 Step – Now you need to go to each post in the Post Type and check the needed options that are required for a certain post.

JetEngine metabox option selection

How to display Checkbox type meta field in Listing Grid

1 Step – The first step you should do is to display Listing Grid with the necessary content. Follow this link for the detailed tutorial which describes how to do it.

2 Step – Search for the Dynamic Field widget, drag-n-drop it to free section on the page where you want it to be placed.

Dynamic Field widget for Elementor

3 Step – In the Content tab choose the Meta Data source type.

4 Step – Next, you should select the necessary Meta Field from the dropdown menu. Alternatively, you can fill out the Or enter meta field key with the necessary slug (name/ID field value).

Dynamic Fields setup in Elementor

5 Step – Then, you can add an icon in the Icon menu, if you want to.

6 Step – Also you will have the possibility to choose the preferable item from the HTML tag dropdown menu.

7 Step – This step is very important because you have to toggle on Filter field output option. In the Callback dropdown, you should choose the Checkbox field values option.
In the Delimiter field, you can enter the sign that will separate several options.

Dynamic Field widget callback setup

Here you are! There isn’t as difficult as it might seem before.
Now you can easily display Checkbox type meta field in Listing Grid with the help of JetEngine plugin.