Primary Nav

WOO Shortcodes: Info Boxes

Here’s another great example of how some simple CSS can bring on some really nice design style. They’re called info boxes and it’s really just a formatted background with a border color and these have a little icon on the left side. Can you tweak it to pieces and customize it? Well, probably, but the point of these is really to just use what you get out of the box and you have some nice styles that are easy to implement, easy to manage, and look smart. Need to edit that file in Photoshop? Nope. How about ask your designer to create a new color box with borders. Oh, built in.

This is an normal box. No rounded corners and only borders on top and bottom.
This is a info box. Has a little icon to the left.
Here’s a tick box with rounded borders and borders full (not just top and bottom).

This is a note box
This is an download box
This is an alert box


  1. Write Every Day Challenge - June 13, 2013

    […] WOO Shortcodes: Info Boxes (Jun 11) […]

  2. Using WOO's button shortcode to create Call to Action boxes. - February 18, 2014

    […] the way, we experimented with WOO’s info boxes, but they didn’t play as nicely in the sidebars. Also, although we could have forced the […]

  3. WOO Canvas and WOO Commerce Combine for a Beautiful Site - December 23, 2014

    […] biased, but now the client also has the power of Canvas behind the scenes to easily change info boxes, heading fonts, and even page layouts. Just like […]

Leave a Reply