How To Use Conditional Element Rendering in Avada

09/04/2021

With Avada 7.3, we added a new feature called Conditional Element Rendering. Currently, this feature is found in the Column and the Container Elements. In this document, we will look at how it works, and some of the ways in which it can be used. Read on to find out more about this exciting new feature, and watch the video below for a visual overview.

What Is Conditional Element Rendering?

Conditional Element Rendering is a form of conditional logic that can determine whether an Element (in this case, the Column or the Container Element, but is also applies for all content within that Column or Container) should be rendered on the page or not. An example of this would be a Column that only displays if a user is logged in, or a Container on a Cart page that does not render if the Cart is empty. There can also be multiple conditions applied for complex situations. There is a significant difference between not rendering an Element and simply hiding it on the page with the Element Visibility option.

Conditional Rendering Logic

Where Is It Found?

Conditional Element Rendering is currently found in the Column and the Container Elements, under the Extras tab. Because these Elements hold all content on the page however, this allows for almost all imaginable usage scenarios.

Avada Website Builder

712,293 Businesses Trust Avada

Get Avada
Avada Website Builder

712,293 Businesses Trust Avada

Get Avada
Avada Website Builder

712,293 Businesses Trust Avada

Get Avada

How To Use Conditional Element Rendering

There will be an enormously wide variety of situations were this feature could be used. The best we can offer here is a breakdown of the possible values, and a scenario to give you the idea.

As you can see in the screenshot below, when you click on the + Add New Logic Button, you are presented with a Field option, a Relational Operator selector (Equals =, and Does Not Equal !=), and a Value field. Below this is an AND/OR option which you can to combine further Logic Terms.

Adding Conditional Rendering in Avada

In the table below, you can see all the available Fields, and their possible values. As you can imagine, there are a huge number of possible scenarios, where this much requested feature could be used to control the page contents.

Field Value
Cart Status In
  Empty
Device Type Desktop
  Mobile & Tablet
Event Status Started
  Ended
Get Variable This field has both a Get and a Value option
Sale Status Started
  Ended
User Agent  
User Role Administrator
  Editor
  Author
  Contributor
  Subscriber
  Customer
  Shop Manager
  Keymaster
  Moderator
  Participant
  Spectator
  Blocked
User State Logged in
  Logged Out

Example Of Conditional Element Rendering

A good example of how to use Conditional Element Rendering is when building a custom Cart Page for WooCommerce. When a Cart is empty, for example, you would not want all the usual Cart Elements to display, and so by using Conditional Element rendering on the various Columns and Containers on the page, we could achieve that scenario easily. See the Avada WooCommerce Builder – Cart page for specific details of how to achieve this. Another example can be found in the video at the top of the page.

There are many more scenarios where this feature would be useful, including rendering content based on whether a user is logged in, or what their role is, whether an Event or Sale has started or finished, and whether the content is being viewed on a mobile or tablet, or even on a specific browser, just to name a few examples. This much requested feature brings an incredible level of flexibility to your page content, and is just another example of the innovation we continually bring to the table for Avada users!

Avada Website Builder

712,293 Businesses Trust Avada

Get Avada
Avada Website Builder

712,293 Businesses Trust Avada

Get Avada
Avada Website Builder

712,293 Businesses Trust Avada

Get Avada