Using Logic Hop as Conditional CSS

Logic Hop provides a number of ways to implement conditional logic for content personalization. Conditional CSS is a powerful tool in which CSS is dynamically generated based on an individual user’s actions.

Logic Hop Conditional CSS is generated prior page load and is derived from the Condition name using the WordPress “slug”.

For example, if a Condition named “Today is Friday” was met, a CSS class is added to the <body> class attribute:

<body class="lh-today-is-friday">

And a CSS stylesheet is generated with the following styles:

.logichop-today-is-friday { display: block !important; }
.logichop-not-today-is-friday { display: none !important; }

If the Condition is not met, the <body> class attribute would not contain the CSS class and the CSS stylesheet would have the following styles:

.logichop-today-is-friday { display: none !important; }
.logichop-not-today-is-friday { display: block !important; }

Cache Note: Conditional CSS can be used with cache plugins. Conditional CSS rules are generated when the page is loaded and are not cached.

Enabling Conditional CSS

Conditional CSS

Step 1

Select a Logic Hop Condition.

Step 2

Copy the CSS class.

Step 3

Check the option “Enable Conditional CSS”.

Step 5

Click “Update” to save the Condition.

Congratulations! Your Condition will now be evaluated on page load.

Please Note: All Conditional CSS enabled Conditions are evaluated prior to each page load. While Logic Hop is extremely fast, it is recommended to only enable Conditional CSS for Conditions which rely on this functionality.

Using the CSS Body Class

The CSS Body Class is added to the <body> class attribute when the Condition is met. By default the class is added when the page is loaded. When Javascript Tracking is enabled, the class is added via jQuery after the page loads. This allows the CSS Body Class to work with page caching plugins.

The CSS class name is derived from the Condition name using the WordPress “slug”. For example, if a Condition named “Today is Friday” was met, the slug would be prepended with “lh-” and added to the class attribute as:

<body class="lh-today-is-friday">

When the Condition met, you can use CSS to style your page. To change the background of all <h1> tags to red on Friday, you could use the following style:

<style>
.lh-today-is-friday h1 { background: red; }
</style>

Multiple styles can be combined for complex display options. CSS Body Classes are appended to the existing classes and do not prevent other classes from appearing within the <body> tag.

Using the CSS Class

Using the CSS class copied from your Condition, add it to the class attribute for any HTML element.

<h1 class="logichop-today-is-friday">Happy Friday</h1>

Using Conditional CSS with the WordPress Page Editor

Conditional CSS Example

Using Conditional CSS with the Elegant Themes Page Builder

Conditional CSS Divi Builder

Using the CSS NOT Class

Logic Hop’s Conditional Not logic allows you to display content when a Condition is NOT met.

Conditional Not CSS works exactly the same as Conditional CSS, but with “not” added to the CSS class.

The example “Today is Friday” Condition, if Not met, would appear as the following CSS class:

.logichop-not-today-is-friday { display: block !important; }

The HTML would be written as:

<h1 class="logichop-not-today-is-friday">Sorry it's not Friday.</h1>

Using Conditional Not CSS with the WordPress Page Editor

Conditional CSS Example

Note: Conditional Not CSS is automatically enabled when you enable Conditional CSS.

Page Views <body> CSS

By default, Logic Hop tracks users’ page views and outputs the value as a CSS class in the <body> of each page such as:

<body class="logichop-views-1">

These CSS classes can be used with your custom CSS to hide and display content for users based on the number of times they have viewed a specific page. This is perfect for landing pages and messaging first-time or returning visitors.

Using Page Views CSS to show content to a first-time visitor

HTML Code:
<div class="first-visit-content">Visible to first-time visitors</div>

CSS Code:
.first-visit-content { display: none; }
body.logichop-views-1 .first-visit { display: block; }

Using Page Views CSS to show content to a repeat visitor

HTML Code:
<div class="repeat-visit-content">Visible to repeat visitors</div>

CSS Code:
.repeat-visit-content { display: none; }
body:not(.logichop-views-1) .repeat-visit-content { display: block; }

Note: Page Views <body> CSS will not produce reliable results if page caching is enabled. Page Views CSS will not be displayed when Javascript Tracking is enabled.

Disable Conditional CSS

Conditional CSS is enabled by default. When Conditional CSS is loaded, the WordPress core is called and the CSS is generated. If Conditional CSS is not used, this functionality can be disabled to prevent the additional WordPress core load and provide a minor speed increase.

To disable Conditional CSS, check the “Disable Conditional CSS” option on the Logic Hop Settings page.

Disable Conditional CSS