Stand with Ukraine. Fight for freedom and democracy

Donate
Back to contents

WooCommerce Products Dynamic Visibility Conditions Overview

 

This tutorial provides an overview of WooCommerce Products Dynamic Visibility Conditions that you can apply to the elements (widget, columns, sections) on the JetWooBuilder templates.

Tutorial requirements:

With the JetEngine Dynamic Visibility Module feature, you can define visibility parameters for every element on the page. With the JetEngine 3.0.2 update, you can apply the specific dynamic visibility condition to the widgets, columns, and sections on the JetWooBuilder templates to manage the WooCommerce product information.

Products Dynamic Visibility Conditions Overview

Firstly, you need to enable the Dynamic Visibility Module. Proceed to the JetEngine > JetEngine tab on the WordPress Dashboard and toggle on “Dynamic Visibility for Widgets and Sections.”

jetengine dashboard dynamic visibility module

Secondly, go to the template created with the JetWooBuilder plugin and click to edit it with Elementor. For that, navigate to Crocoblock > Woo Page Builder.

jetwoobuilder templates edit with elementor

Click on the widget, section, or column to which you want to apply the dynamic visibility. Navigate to the Advanced section, open the Dynamic Visibility tab, and enable the toggle.

dynamic visibility setting tab

Hit the Conditions tab, and in the drop-down menu, you will find the Woocommerce product dynamic visibility conditions.

woocommerce products dynamic visibility conditions

Product has Enough Stock

product has enough stock condition

If you select the “Product has Enough Stock” Condition and insert, for example, “5” Quantity, the element (widget, column, or section) will show up if its Stock Quantity equals five or higher.

To set the stock quantity, proceed to Products > All Products, press to edit a product, go to the Inventory tab, tick the Manage stock? option, and enter the needed number in the Stock quantity field.

product stock quantity

For example, you can set the “Hide element if condition met” Visibility condition type, select the “Product has Enough Stock” Condition, and enter “5” Quantity for the Heading widget with the “Almost gone!” message for the customers. So, if the product Stock Quantity is less than five, users will see the “Almost gone!” message.

Product is Downloadable

product is downloadable condition

With the “Product is Downloadable” Condition, the element (widget, column, or section) will show up if the Downloadable mark is checked on the Product editing page.

downloadable product

For example, you can use such a condition for the Heading widget with the “Downloadable” text or the link to the source from which customers can download the products (for such case, you can set the JetEngine Dynamic Link widget).

product is featured condition

With the “Product is Featured” Condition, the element (widget, column, or section) will be displayed if the product has a Featured property.

To make a product featured, move to Products > All Products, push the “Quick Edit” button under a product, and tick the Featured option.

featured option

The Featured product is denoted with such icon:

featured product

For example, you can mark the best-selling products as Featured and use such a condition for the Heading widget with the “Best Selling!” text.

Product is in Stock

product is in stock condition

The “Product is in Stock” Condition allows displaying the element (widget, column, or section) if the product has the “In stock” Stock status in the Inventory tab on the product editing page.

product is in stock

If you want to set the “Out of Stock” condition, select the “Hide element if condition met” Visibility condition type and select the “Product is in Stock” Condition, for example, for the Heading widget with the “Out of Stock” text. So, if the product has the “Out of Stock” Stock status, customers will see this message.

Be aware that such a heading also will be shown if the product has the “On backorder” Stock status.

Product is on Backorder

product is on backorder condition

The “Product is on Backorder” Condition allows displaying the element (widget, column, or section) if the product has the “On backorder” Stock status in the Inventory tab on the product editing page.

product is on backorder

For example, you can use such a condition for the Heading widget with the “On Backorder” text.

Product is on Sale

product is on sale condition

If you select the “Product is on Sale” Condition, the element (widget, column, or section) will be visible if the Sale Price field is filled in the General tab on the product editing page.

If you set the Schedule for the Sale Price, the element will be visible only during the specified period.

product sale price

For example, you can use such a condition for the Heading widget with the “On Sale!” text.

Product is Purchasable

product is purchasable condition

The “Product is Purchasable” Condition checks if the Product has the Price in the General tab on the product editing page.

product has the price

For example, you can set the “Hide element if condition met” Visibility condition type, and select the “Product is Purchasable” Condition for the Heading widget with the “Item for Free” text, and such heading will be visible with the items that are donated to charity.

Product is Sold Individually

product is sold individually condition

The “Product is Sold Individually” Condition, allows displaying an element  (widget, column, or section) if the Sold individually mark is checked in the Inventory tab in the product settings.

product is sold individually

For example, you can use such a condition for the Heading widget with the “You can buy only one item per order” text.

Product is Type

product is type condition

This condition allows displaying elements based on the Product Type in the Product data drop-down menu on the product editing page.

product types

For example, if the product has the “External/Affiliate” type, you can use such a condition for the Heading widget with the company name that offers products.

Product is Virtual

product is virtual condition

With this condition, the element will be visible if the Virtual mark is checked in the Inventory tab on the product editing page.

product is virtual

For example, you can use such a condition for the Heading widget with the “Virtual Product” text.

Usage Examples

Single Page template

You can apply the WooCommerce Products Dynamic Visibility Conditions to some elements on the Single Product Page template.

Firstly, create the template described in the How to Create a Single Product Page Template tutorial.

Then, add some widgets to the template in the Elementor editor to which you want to apply the Dynamic Visibility. For instance, I added the JetElemets Headline widget with the “Almost GONE” text and proceeded to the Advanced section and open the Dynamic Visibility tab.

I set the “Hide element if condition met” Visibility condition type, selected the “Product has Enough Stock” Condition, and entered “5” Quantity.

The Single Add to Cart widget displayed the product stock quantity.

woocommerce products dynamic visibility conditions on the single template

Let’s save changes and move to the front end.

The stock quantity of this product is “7,” which is more than “5,” so the Headline is hidden, and there’s no need to show the “Almost GONE” text.

element is hidden on the single product page

The stock quantity of this product is less than “5,” so the Headline informs customers to hurry up and buy this product.

element is visible on the single product page

Product Loop on the Shop Page Template

Make sure to create the Shop Page Template described in the How to Create a Shop Page Template tutorial.

Go to the Crocoblock > Woo Page Builder tab on the WordPress Dashboard and push the “Create New Template” button.

In the appeared pop-up, select the “Archive Item” in the This Template For field and type the Template Name. You can also select the Layout Preset.

jetwoobuilder templates

Add some widgets to the template in the Elementor editor to which you want to apply the Dynamic Visibility. For example, I added three images and set the “Show element if condition met” Visibility condition type for all. I set the “Product is on Sale” Condition for the first image, “Product is Virtual” for the second, and “Product is Featured” for the third one.

archive item template

For the fourth picture, I set the “Hide element if condition met” Visibility condition type and the “Product is in Stock” Condition.

hide element if condition met

I navigated to the Shop Page Template and placed the Products Loop widget here. In the Template field, I set the recently created Archive Item template.

archive item template in the products loop widget

As you can see, I applied images with Dynamic Visibility to the products that match the conditions.

product loop in the shop page template

That’s all. Now you know how to apply the WooCommerce Products Dynamic Visibility conditions to the elements on the JetWooBuilder templates.