How to style wordpress page conditionally

Install WordPress plugin WPW Content Styler 

Login as administrator and visit to the page you want to edit style and click on WPW Style Editor button

It will load editor tools widget

Firstly create a stylesheet to assign it the conditional logic you want later.

Here are steps to create stylesheet 

Now select just created stylesheet in “Style Options” tab “Current Stylesheet” dropdown and start styling.

Move mouse over the element which style you want to edit, it will open menu listing target and parent elements 

After clicking on a menu item it will open styling tools in Content Stylet widget, make you changes in inputs

Click on “Conditional logic” tab on Content Styler widget, if you do not see tab drag widget up and you will find it at the bottom

The idea of these fields is to make style changes run if conditional logic fully or partially matchs 

In that tab you can create as much conditional logics as you want

Once stylesheet item is created now it is time to create a conditional logic

You can assign different stylesheets to the same conditional logic.

This approach give you chance to reuse style in future according to your goals

As a result the style changes which were saved for “Rich users cart” will be applied only when your website user WooCommerce cart total price is between 5000 and 1000000 according to the example on above screenshot. 

If you saved the same element style both in global and in your own stylesheet it will trigger conflict, please review your strategy of styling, we suggest to create separate stylesheets for each element style  

This is just an example, you can enter any number, select any options from dropdowns you want, if you do not want  use an input or select dropdown just leave fields as they are.

It is is time to save changes. Find “Save” icon at the top of editor widget and move mouse on it, There are the following button

  • Publish style
  • Save as draft
  • Reset all changes

That is is, enjoy !!!

WPW Style Editor

Style Options

Move mouse over page elements then click on a appeared menu item to start styling the selected element


Stylesheet Name Actions
Selector depth In case of small number styles will be applied globally

Conditional logic

Create rules to apply styles only in case of partial or full match.

Condition Name Actions

Additional Code

Embed ready solutions

WPW Preview Resizable Window

WPW Style Editor