Conditional Rendering allows you to control when and where elements are displayed based on specific conditions.
Instead of showing the same content to every visitor, you can dynamically display elements depending on context such as user status, device type, page type, or WooCommerce conditions.
This feature is available in Porto elements for both Elementor and WPBakery, and is essential for building smart, personalized layouts.
Why Use Conditional Rendering?
Conditional Rendering is useful when you want to
- Show different content to logged-in vs logged-out users
- Display elements only on specific pages or post types
- Hide heavy elements on mobile devices
- Personalize content for customers, admins, or roles
- Avoid duplicate layouts by reusing the same block with different conditions
Where to Find Conditional Rendering
Elementor
- Select Section or Container element
- Open the Layout tab
- Locate the Porto Conditional System section
WPBakery
- Edit Section or Row element
- Open the element settings
- Find the Porto Conditional System tab
How Conditional Rendering Works
Each element can have one or more conditions. Porto evaluates these conditions on page load and decides whether the element should be rendered.
You can configure:
- Condition Type (what to check)
- Operator (equals, not equals, etc.)
- Value (the target value)
- Logic (AND conditions or OR condition)
Common Condition Types
Device Conditions - Desktop, Tablet & Mobile, Tablet, Mobile
Login Status - Logged In, Logged Out
User Role - Administrator, Editor, Author, Contributer, Subscriber, Customer, Shop Manager
Post / Page - Posts, Pages, Products, Members, Portfolios, and Custom Post Types
Current URL - User input Custom Link
Important Notes
- Conditional Rendering affects front-end output only
- Elements remain visible in the editor for easier editing
- Some conditions require WooCommerce to be active
- Conditions are evaluated server-side for accuracy
