WordPress.org

Ready to get started?Download WordPress

Forums

Customizr
WooCommerce image sizes (9 posts)

  1. formy808
    Member
    Posted 7 months ago #

    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 150x200, 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.984x344! 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.

  2. WPyogi
    Volunteer Moderator
    Posted 7 months ago #

    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.

  3. formy808
    Member
    Posted 7 months ago #

    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.

  4. WPyogi
    Volunteer Moderator
    Posted 7 months ago #

    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.

  5. formy808
    Member
    Posted 7 months ago #

    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.

  6. WPyogi
    Volunteer Moderator
    Posted 7 months ago #

    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?

  7. formy808
    Member
    Posted 7 months ago #

    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.

  8. WPyogi
    Volunteer Moderator
    Posted 7 months ago #

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

  9. formy808
    Member
    Posted 7 months ago #

    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!

Reply

You must log in to post.

About this Theme

About this Topic