WordPress.org

Ready to get started?Download WordPress

Forums

WooCommerce - excelling eCommerce
[resolved] Images on product page are showing up different sizes! (6 posts)

  1. Sophiemartin95
    Member
    Posted 11 months ago #

    This is stressing me out so much!

    When i upload an image it comes out to be huge on the product page and I've tried altering all the images sizes within the css, woocommerce settings, and my theme setting but nothing it helping.

    It didn't use to be like this.

    Some one me help PLEASE!!!

    http://rarephenomenon.com/product/bungle-bangle/

    this is an example!

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

  2. Roy Ho
    Member
    Posted 11 months ago #

    That is because you have this in your CSS:

    div.product div.images img { width:auto !important; }

    That tells your site to fill the space up automatically to the size of the actual image that is being pulled. So if your image is 480px wide, it will be that wide.

    So either you change that size setting in your WC settings, or change that CSS to:

    div.product div.images img { max-width:100%; }
  3. Sophiemartin95
    Member
    Posted 11 months ago #

    Ok thank you, but which CSS? Style, custom or woocommerce?

  4. Sophiemartin95
    Member
    Posted 11 months ago #

    ok i see it but im not understanding what to change it to.

    div.product div.images{float:left;width:47%;margin-bottom:10px;}div.product div.images img{display:block;/*width:auto;*/height:auto;margin: auto;width: auto !important;}
    div.product div.images div.thumbnails{padding-top:10px;overflow:hidden;zoom:1;}
    div.product div.images div.thumbnails a{float:left;width:85px !important;margin: 0 2px 17px 11px !important;}
    div.product div.images div.thumbnails a img{width:auto;height:auto;}
    div.product div.images div.thumbnails a.last{margin-right:0;}
    div.product div.images div.thumbnails a.first{clear:both;}

  5. WPyogi
    Volunteer Moderator
    Posted 11 months ago #

    That code appears on the WooCommerce stylesheet line 15 - a browser tool like Firebug should help you locate it.

  6. Sophiemartin95
    Member
    Posted 11 months ago #

    Omg Thank You!!

Reply

You must log in to post.

About this Plugin

About this Topic