Using Toolset Conditional Logic in an Elementor Template

This tutorial is for people who are using both Elementor Pro and Toolset. Elementor does not have conditional logic, but Toolset does. In this tutorial I’m going to look at a clever way to use Toolset to overcoming the Elementor shortcoming.

Video Summary

[wpbf-responsive-video src=”https://www.youtube.com/embed/tlxgtQU9yYI”]

Setup

I’ve setup a test site using the Page Builder Framework theme. And I’ve installed a few plugins: All in One WP Migration for backups and restoring the site, Elementor and Elementor Pro, and Toolset Types and Toolset Views.

With Toolset I created a Books Custom Post Type and added two records. The CPT has three custom fields: “Format” to show whether the book reviewed was a print or audiobook. If the Format is Audio then there are two fields: “Narrator” for the readers name and “Length” for the time of the audio.

The test is to only show the audio related fields on the front-end if the book was on audio, otherwise, leave the area blank. We are going to use Toolset conditional logic and the Elementor Theme Builder to accomplish this.

Creating the Single Template in Elementor

To create the single template, go to Templates, Theme Builder, and click Add New. Select the settings for a single template for Books and give it a name. I used “Book Single”. Then create a two column layout in Elementor. On the left side drag in the Featured Image widget and on the left stack Post Title, Post Information, and Post Content. Save the template.

Creating the View with Conditional Logic

For the next step, we go to the Toolset Views creation page, create and name a view. I named my View “Book Single – Audio Info”. You are prompted for what type of View you’d like to create. I’ve gone for the “Full Custom Display Mode Option.” Once in the Views editor:

I selected “Books” as the Custom Post Type.
Unchecked the box for “Don’t include the current page” because we do want to include just the current page.
Limit and Offset to Display 1 item.
Add a Query Filter for the Posts with IDs in the shortcode option (see below). Since this is a Book Single, we want the info from the current post. I have a Toolset variable for the Post ID that we can add to the Views shortcode later.

I skipped the Search and Pagination section and at the Loop Editor clicked to use a Content Template. This prompts for the fields we want to use and inserts those into the Template editor a bit further down. I picked the fields from the popup:

Narrator
Length

In the Loop editor I removed the message to show if nothing was found, because I want it to be blank if the condition doesn’t show:

I then went to go to the Template editor. I added a condition such that if the Format was “Audio” then show the fields. I added some HTML and inline CSS around the Types shortcodes.

Be sure to close all of the tags. I then saved the View.

Getting the Shortcode

We are going to use the Elementor Text widget to insert our Views shortcode. That editor does not have the Toolset shortcode button on it, so I went to a page to generate it so I could copy it.

The Views are shown at the bottom of the popup.

When you click to insert the View you get a dialog with some options. I accepted the defaults for all of them except for the “Caching” tab, where I selected to have the View generated for each page and to not use caching.

After clicking the “Insert shortcode” button I got this shortcode which I copied out.

Remember when we created the view we set it up to be filtered for the current Post ID. Toolset has a variable for the current Post ID, so I added that to the shortcode (shown below).

Inserting the View into the Elementor Template

Returning to the Theme Builder for the Single Book template in Elementor, I dragged a Text widget into the space below the Book Featured Image and pasted in the shortcode. This is what that looks like. Save it.

Testing that it Works

Now, view the two books on the front end by going to the Books menu in the Admin, click on All Books, and then clicking on the View link below each one. Here is the book that does not have any audiobook information. It appears as it should, without any audio book information showing:

And here is the book that has the Format set as Audio and met the condition. It has the audiobook information showing:

Summary and Conclusion

My example is pretty simple, but I think that you can see how it could be adapted to other scenarios. Also, Toolset allows nested conditional statements, so you can apply more complex logical conditions. This method for using Toolset conditional logic in an Elementor Pro template only makes sense if you are already using Toolset, but if you are, you have a lot of freedom to create content in the Toolset Template editor.

I hope you were able to follow along with this tutorial and that you find it useful. You can find out more about Toolset and Elementor Pro at their websites.

	Elementor is the number one page builder for WordPress used on more than 3 million websites. The Pro version adds many powerful features, including the Theme Builder functionality that lets you create templates for your content.	Visit the Elementor Website
	Toolset is the the most powerful set of plugins for creating and displaying Custom Post Types. The Views plugin gives you a great deal of flexibility for displaying content in many different ways.	Visit the Toolset Website