Add Beautiful Pros and Cons Boxes in WordPress with this Plugin

Pros&Cons PluginsWhen you write product reviews or comparison posts, where you need to highlight the good and the bad of the featured product or service, it’s a good idea to add Pros and Cons plugin, to show standardized boxes in the bottom of your posts.

Pros&Cons is a powerful element in your affiliate product reviews, and are known for increasing the conversion rate, plus being a great user-friendly element. Users tend to skip the long articles and search directly for conclusions or sum ups.

I will show you an easy way to get this done, without writing or editing any kind of code.

Here is what you’ll get at the end…

Pros & Cons Boxes WordPress

Here is a live example in the Basel Theme Review.

Once you get one pair of boxes looking the way you want, you can save it to a draft post and later just copy and paste it to your new reviews by only replacing the attributes in it.

Pros & Cons Plugins

The plugins I’m about to show are not specially designed for this purpose. When I first stumbled across this, I was searching a way to show two simple boxes with a list of short 2-3 words sentences in them.

My research return no satisfying results, as it seemed there was no dedicated free pros and cons plugin for what I wanted.

So how did I managed to create my pros&cons boxes?

I used a free plugin called: Olevmedia Shortcodes.

This plugin features a plenty of other shortcodes as well, but the one we are going to use for this task is the “Box”!

You can also use the Olevmedia Shortcodes for creating a CTA Button for your reviews!

But first things first..

Before we jump to the Box shortcode, we’ll add two 1/2 columns to our page. You can use the Olevmedia Shortcodes plugin for this as well, or your theme’s own column shortcode. By doing this we ensure proper responsive display on mobile devices as well as even sizes of the boxes.

Select the “plus” icon from the editor. In the dropdown menu select “Columns”, then chose “One half” and Insert it into to your work page. After that do the same, but this time tick the “last column” checkbox to display this column next to your first one.

You should get two lines of shortcodes like this:

[one_half]Paste your Pros box here[/one_half]


[one_half_last]Paste your Cons box here[/one_half_last]


Later we will paste our box shortcodes in these columns.


Let’s get down to business now and create the actual boxes…

Head again to the ‘Plus” icon in your visual edditor and chose the “Box” shortcode. You should get this screen after clicking it:

As you can see we have options for customization, which we will look into next.

The fields you need to fill to get something similar to my demo boxes are the following:

  • Title: Pros
  • Content: leave this blank for now
  • Border: Add a border if you like (in my example there isn’t)
  • Background Color: Chose a green/red or other color for background
  • Box Icon: For my example, I’m using the thumbs-up and thumbs-down icons
  • Certain Box height: For the above example I set the height to 250px. Note that if you leave this empty, your boxes will show uneven!

Replace the “Here is the content” with your desired pros or cons texts and put them in a bulleted list, directly from the WordPress editor in Visual mode. You should get something like this:

[box title="Pros" bg_color="#81d742" icon="thumbs-up" icon_style="border" icon_shape="circle" align="center" text_color="#FFF" height="250"]

  • Pros 1
  • Pros 2
  • Pros 3…


You can now duplicate the shortcode above and just change the color, icon and name to “Cons”. Now you have the two boxes – Pros & Cons. Finally we have to put them in each of to columns we’ve created in the begining.

Copy and paste your “Pros” box in the first column:

[one_half] Pros Here [/one_half]

Then copy the Cons box and paste it in the last column between:

[one_half_last] Cons Here [/one_half_last]

Congratulations! You’re are ready to create awesome reviews.

Save your preset in a draft page or post to be ready for use. Just make sure to paste it in “Text” mode, whenever you use it in an actual post, to avoid any code break-ups.


  1. David
  2. Sveinung
  3. Akshat

Leave a Comment