WordPress.org

Ready to get started?Download WordPress

Forums

WooCommerce - excelling eCommerce
Adjust padding under product price (9 posts)

  1. emike09
    Member
    Posted 1 year ago #

    The CSS in Woocommerce is crazy! I'm sure I'm just not used to it. How can I go about adjusting the padding below the item price and the 'Add to cart' button on page listings?

    http://wordpress.org/extend/plugins/woocommerce/

  2. samueljeden
    Member
    Posted 1 year ago #

    link to website?

  3. emike09
    Member
    Posted 1 year ago #

  4. bheadrick
    Member
    Posted 1 year ago #

    ul.products li.product .price {margin-bottom: 1em;}

  5. emike09
    Member
    Posted 1 year ago #

    So the stylesheet for WooCommerce is very different. Not something I've used before. It's a single line, and there is also a .less file in that directory. Anything special I need to do to add that line of code?

  6. bheadrick
    Member
    Posted 1 year ago #

    no, don't do anything to any of the files in the plugin (except maybe copy the template files)

    You need to override the css from your theme's stylesheet.

  7. emike09
    Member
    Posted 1 year ago #

    OK. I added that line of code to my themes css file and it didn't seem to do anything. I added it to the bottom of the CSS file just barely before the end, exactly like this:

    /* Store Price Spacing */
    ul.products li.product .price {margin-bottom: 1em;}
    
    /* =END
    ----------------------------------
  8. emike09
    Member
    Posted 1 year ago #

    I tried using firebug to grab the css also. URL is here:
    http://www.goldrushexpeditions.com/store/

    I tried this code in the theme stylesheet and it also didn't do anything:

    /* Store Price Spacing */
    ul.products li.product .price {
        color: #85AD74;
        display: block;
        font-weight: normal;
        margin-bottom: 1.5em;
    }
  9. bheadrick
    Member
    Posted 1 year ago #

    looks like the woocommerce stylesheet is loading after your theme, so you need to use a more specific selector like this:

    #main ul.products li.product .price{
    color: #85AD74;
    display: block;
    font-weight: normal;
    margin-bottom: 1.5em;
    }

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic