Display Conditions feature by Premium Addons for Elementor plugin provides a new approach to customize website content with Elementor. This guide demonstrates how to use Elementor Display Conditions to adjust web elements, focusing on their visibility and enhancing the overall user experience.
In this tutorial, we will show how to show or hide any Elementor flexbox container, section, column or widget based on the amount in the customer’s WooCommerce shopping cart. One of the common uses is showing a promo code to customers with an amount larger than a value in the cart.
Requirements
- You will need the Premium Addons free plugin installed and activated on your website.
- Premium Addons Pro is required for WooCommerce Display Conditions.
- Premium Addons works only with Elementor Page Builder plugin so you will need to have it installed and activated as well.
- Make sure to enable the Display Conditions feature. Check this article to know how to do that.
Enable Display Conditions Feature
Navigate to your Elementor element settings > Advanced tab > Display Conditions and Switch “Enable Display Conditions” switcher.
Add The Dynamic Display Conditions
- Action: Select whether you want to show or hide the element based on the selected display conditions.
- Conditions: Here we will set the condition and set the values to compare to.
- Type: Set the condition to Amount In Cart.
- Source: Select the source of the Subtotal or Total Amount.
- Is or Is Not: Choose the condition type.
- Equal or Higher Than: Set the minimum amount in the cart to be checked.
That’s It!
So simple right?
Now you can control which elements to show or hide depending on the Amount In Cart.
If you still need any further assistance, feel free to contact the Premium Addons support team. We would be more than glad to help 😁
Join the Community
You’re most welcome to join our channels to get updates about new features, improvements, and bug fixes.
