Support » Themes and Templates » Styling an individual widget?

  • James


    I have WooCommerce installed and I want to put a border around the cart widget. Using Firebug I can see that when the page is loaded I get a DIV of:

    <div id="shopping_cart-4" class="widget widget_shopping_cart substitute_widget_class">

    for this particular widget and I want to ad a border around this:

    border: 5px dashed #999777;

    I have tried adding this in my styles.css with no luck:

    .widget .widget_shopping_cart {
    border: 5px dashed #999777; }

    Any ideas? Thanks!

Viewing 5 replies - 1 through 5 (of 5 total)
  • May not be specific enough – -try this:


    If that does not work, can you post a link to your site?



    It worked… but only on one page… gotta see where the other CSS styles are located for the others. Great! Thanks!

    Although frowned upon, I’ve had occasions to use !important when formatting widgets. So try :

    .widget .widget_shopping_cart {
    border: 5px dashed #999777!important; }

    Also when you are trying to do these kinds of changes I find the Firefox Firebug developers tool to be very helpful. You can quickly play with the CSS on the fly with out changing your original.




    I was using firebug to determine the DIV code initially. But could not get the CSS to work. However I will try your important CSS code to see if that helps the rest of the pages… Or I might have to create new CSS styles for each page.

    At this point I think I’m good though. Thank you all for the help!

    It may be that shopping_cart-4 is page specific? I can’t tell much without seeing the site. So look at that piece of it.

    @kevin — agree with you on !important — try to avoid it, but sometimes ya gotta do it when the CSS is just too convoluted or cranky!

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Styling an individual widget?’ is closed to new replies.