Elementor WooCommerce Display Conditions Tutorial

Premium WooCommerce Display Conditions for Elementor allows you to show or hide any Elementor widget, column, or section based on a set of WooCommerce conditions such as the number of items in WooCommerce shopping cart, date of WooCommerce purchase, the price of the current product, and many other conditions that will be mentioned in detail in this tutorial.

Please note that Premium WooCommerce Display Conditions is a part of Elementor Display Conditions feature.

Click here to check Elementor Display Conditions Feature demo page.

Elementor WooCommerce Display Conditions
Elementor WooCommerce Display Conditions

Requirements:

  • You will need 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 that WooCommerce plugin installed and activated on your website.

WooCommerce Display Conditions for Elementor

The conditions below can be used to show/hide Elementor content on WooCommerce shopping cart page, WooCommerce checkout page, or any other page on your website.

First please make sure that Elementor Display Conditions feature is enabled. For more information, please check this article.

  • Current Category Page: Show/hide Elementor content in WooCommerce product archive page based on the current WooCommerce category.
    • This option can be used in WooCommerce Product Archive template that is built with Elementor Pro to show/hide Elementor content on a specific category page.
    • This condition can be used to display a “Buy Two, Get One Free!” message notification on a specific category page.
Show/hide Elementor Element In Product Archive Page Based on The Current Category
WooCommerce Current Category Display Condition in Elementor Page Builder
  • Current Product Categories: Show/hide Elementor content based on the categories of the current product.
    • This option can be used in WooCommerce Single Product template that is built with Elementor Pro to show or hide Elementor elements based on the WooCommerce categories of the current product.
    • For example, show a “20% Sale!” message notification on the pages of the products related to specific category.
Show/hide Elementor Element Based on The Category of Current Product
WooCommerce Current Product Category Display Condition in Elementor Page Builder
  • Current Product Price: Show/hide Elementor content based on the price of the current product.
    • This option can be used in WooCommerce Single Product template that is built with Elementor Pro to show or hide Elementor elements based on the price of the current product.
    • For example, show a discount if the current product price is higher than $50.
Show/hide Elementor Element Based on The Price of The Current WooCommerce Product
WooCommerce Current Product Price Display Condition in Elementor Page Builder
  • Current Product Stock: Show/hide Elementor content based on the stock quantity of the current product.
    • This option can be used in WooCommerce Single Product template that is built with Elementor Pro to show or hide Elementor elements based on the current product’s quantity available in the stock.
    • For example, show a “Hurry Up, Limited Items Left!” message notification on a product page when the number of items available in the stock is equal or fewer than five.
Show/hide Elementor Element Based on The Stock of Current Product Stock
WooCommerce Current Product Stock Display Condition in Elementor Page Builder
  • Purchased/In Cart Orders: Show/hide Elementor content based on the number of items already purchased by the customer or still in his shopping cart.
    • This option can be used to show or hide Elementor elements based on the number of products exist in WooCommerce shopping cart.
    • For example, show a “Buy Two, Get One Free!” message notification when the number of items in the shopping cart is equal or more than 5 items.
Show/hide Elementor Element Based On the orders in Customer's Shopping Cart
WooCommerce Purchased/In Cart Orders Display Condition in Elementor Page Builder
  • Purchased/In Cart Categories: Show/hide Elementor content based on the categories of the items in WooCommerce shopping cart.
    • This option can be used to show or hide Elementor elements when the products that exist in WooCommerce shopping cart or already purchased by the customer are related to specific categories.
    • For example, Can be used with Premium WooCommerce Listing widget to show related products on WooCommerce shopping cart page from the same category of the product that exist in the shopping cart.
Show/hide Elementor Element Based On The Categories of Products in Customer's Shopping Cart
WooCommerce Purchased/In Cart Categories Display Condition in Elementor Page Builder
  • Date Of Last Purchase: Show/hide Elementor content based on the date of the last purchase made by the customer.
    • This option can be used to show or hide Elementor elements depending on the date of WooCommerce last purchase the customer made.
    • For example, show a “Order Now, and Get 30% Discount” message notification on your WooCommerce website if the last order the customer made was three months ago.
Show/hide Elementor Element Depending On The Date Of WooCommerce Last Purchase
WooCommerce Last Purchased/In Cart Display Condition in Elementor Page Builder
  • Amount in Shopping Cart: Show/hide Elementor content depending on the total price of the products in WooCommerce shopping cart.
    • This option can be used to show or hide Elementor elements based on the total or subtotal price of the products that exist in the customer’s shopping cart.
    • For example, show a “Free Shipping” message notification on WooCommerce shopping cart page when the total price of the items in the customer’s cart equals or exceeds 250$.
Show/hide Elementor Element Based On The Total Price in WooCommerce Shopping Cart
WooCommerce Amount In Cart Display Condition in Elementor Page Builder
  • Products in Cart: Show/hide content if WooCommerce Shopping Cart contains one of the selected product(s).
    • This option can be used to show or hide Elementor elements based on the product(s) that exist in the customer’s WooCommerce shopping cart.
    • For example, show a “10% discount” message notification on WooCommerce shopping cart page when the customer has specific product(s) in his shopping cart.
Show/hide Elementor Element Based On Products in Cart in WooCommerce Shopping Cart
WooCommerce Products in Cart Display Condition in Elementor Page Builder

Conclusion

Premium WooCommerce Display Conditions for Elementor is a great tool to show or hide Elementor content dynamically on WooCommerce websites. You don’t need anymore to create many templates and show each template on specific pages. With Elementor Display Conditions in Premium Addons, you can create one template and select which elements should be visible and which should be hidden based on customer’s shopping cart data, customer’s previous order data, or current product data.

We hope we were able to help you through this guide. You can check out the rest of our Unique features for Elementor from here.

If you still need any further assistance, feel free to contact Premium Addons support team from here. We would be more than glad to help 😁


Join the Community

You’re most welcome to join our Facebook group and YoutTube channel to get updates about new features, improvements, and bug fixes.

Related Docs:

Download Now it's free!

Extend your Elementor Page Builder capabilities now with Premium Addons. 25+ Elementor Widgets Totally Free of charge.

Stay Updated

Subscribe to our newsletter to receive the latest updates and features.