WordPress.org

Support

Support » Themes and Templates » Customizr » WooCommerce image sizes

WooCommerce image sizes

  • formy808

    @formy808

    Not sure if this is the proper group for this, but I’m using Customizr with WooCommerce. I made my own index.php and replaced the “posts loop” with <?php woocommerce_content(); ?>

    So that is working but what I’m seeing is that my images are being scaled up for some reason. I set the size of the catalog image (for example) to 150×200, it scaled my image to that size and refers to it in the html with width=150 height=200, but when I look at the page the images is then scaled up to 257.984×344! Because of this it looks more pixelated.

    Not sure why it’s doing this. I don’t know if it’s a WooCommerce issue or an issue with using WooCommerce with Customizr. Any ideas?

    Thanks.

Viewing 8 replies - 1 through 8 (of 8 total)
  • WPyogi

    @wpyogi

    Forum Moderator

    Look at the CSS for that page using a browser tool like Firebug. It should show you where the image size is being set from.

    formy808

    @formy808

    Yeah, it looks like it’s getting the setting from woocommerce.css. It’s setting width: 100%. If I uncheck this in InspectElement (chrome) it renders as the correct size.

    But where should I put my custom css? I put in in my child theme style.css and it’s still getting overridden by the woocommerce.css. I don’t think I want to edit woocommerce.css directly.

    WPyogi

    @wpyogi

    Forum Moderator

    I put in in my child theme style.css and it’s still getting overridden by the woocommerce.css.

    Then make sure your CSS is specific enough to override the WC CSS and that you don’t have any errors in your CSS that are causing problems.

    formy808

    @formy808

    Here’s what I put in my Customizr child theme style.css:

    /* Image sizing for WooCommerce images */
    ul.products li.product img {
    -moz-box-sizing: border-box;
    background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #E6E6E6;
    display: block;
    height: auto;
    margin: 0 auto 1em;
    padding: 0.53em;
    width: inherit;
    }

    .images img {
    -moz-box-sizing: border-box;
    background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #E6E6E6;
    padding: 0.618em;
    width: inherit;
    }

    When I look at InspectElemnt the woocommerce.css styles are above mine from my style.css and the width (among other things) attribute is lined out. Obviously it’s giving priority to the woocommerce.css, so putting in my child theme style.css doesn’t seem like the place to go.

    WPyogi

    @wpyogi

    Forum Moderator

    putting in my child theme style.css doesn’t seem like the place to go.

    Are you familiar with CSS specificity?

    http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

    https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

    Increase the specificity of your CSS and it will override the WC styles.

    Aside from that, does WC have a place to add custom CSS?

    formy808

    @formy808

    Familiar with it, yes. Understand it, no. 🙂

    I looked though all the WC config pages and I don’t see anything about custom css.

    Thanks for the help. I’ll keep playing with it and figure it out eventually.

    WPyogi

    @wpyogi

    Forum Moderator

    I’d be happy to look at it – but no way to help with CSS without seeing the actual site.

    formy808

    @formy808

    Thanks. I’m going to take a break and do some yoga and clear my head. I may hit you up later for help. Mahalo!

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘WooCommerce image sizes’ is closed to new replies.
Skip to toolbar