Okay
  Public Ticket #2012701
WooCommerce Single Product Image Size
Closed

Comments

  •  3
    Caleb started the conversation
    May 15, 2019 at 9:51pm

    I know there are a lot of tickets about this but not any newer ones, so I'm am going to create this one. 

    How can I change the WooCommerce Single Product Image size? If you look at my product page http://dev.biblestudyguide.com/product/primary-starter-pack/ or this screenshot (http://prntscr.com/np3rim) you'll notice that the product image is huge. How can I decrease the size of this image?

    I tried going to Dashboard > Appearance > Customize > WooCommerce  and changing the size there, but none of my changes took affect.

    Any help would be very appreciated. Thanks!

  •  8,994
    Tahir replied
    May 15, 2019 at 9:57pm

    Hey Again,

    Try using this plugin and check : https://wordpress.org/plugins/regenerate-thumbnails/ . 

    Best

    ThemeNectar Support Team 

  •  3
    Caleb replied
    May 15, 2019 at 10:30pm

    Hi Tahir,

    No change. It seems like it's probably not the image size, but rather, the column size that the image is in. Right now the image is in a span_5 column. I'd like to possibly get it into a span_3 or 4. Is this possible?

    Thanks!

  •  8,994
    Tahir replied
    May 16, 2019 at 10:43pm


    Hey Again,

     Change the values as per your liking.

    Add this into the Custom CSS box located in your Salient Options panel (All custom css provided is tested in the Live Browser so it will work as intended . If you cant see any changes make sure there is no red cross in the Custom CSS Box as that syntax error would cause all css below it to not show up on the Frontend):

    @media only screen and (min-width: 1000px) {
    .single-product .row > .product[data-gallery-style="left_thumb_sticky"] .single-product-main-image {
        width: 10% !important;
    }
    .single-product .row > .product[data-gallery-style="left_thumb_sticky"][data-tab-pos="in_sidebar"] .single-product-summary, .single-product .row > .product[data-gallery-style="left_thumb_sticky"][data-tab-pos="fullwidth"] .summary.entry-summary {
        width: 90% !important;
    }
}

    Thanks

    ThemeNectar Support Team 

  •  2
    Mira replied
    May 17, 2019 at 8:08am

    Hello

    I want to test beta. But the link at the top does not send to your mail. Some kind of bug. How can I participate in testing.

  •  8,994
    Tahir replied
    May 17, 2019 at 9:04am

    Hey Again,

    Simply send an email to [email protected] .

    Best

    ThemeNectar Support Team 

  •  3
    Caleb replied
    June 13, 2019 at 8:17pm

    Thanks mate!

  •  3
    Caleb replied
    July 9, 2019 at 9:09pm

    Hey, since I added a sidebar to my single product pages the CSS you provided below no longer works. Is there a way to decrease the image size when I have a sidebar on my product? Here is a product page for example: http://dev.biblestudyguide.com/product/advanced-student-pages/. I have a lot of these grouped products and I need the image to be a lot smaller.

    Thanks!

  •  8,994
    Tahir replied
    July 10, 2019 at 10:21am

    Add this into the Custom CSS box located in your Salient Options panel (All custom css provided is tested in the Live Browser so it will work as intended . If you cant see any changes make sure there is no red cross in the Custom CSS Box as that syntax error would cause all css below it to not show up on the Frontend):

    @media only screen and (min-width: 1000px) {
    .single-product .product[data-gallery-style="left_thumb_sticky"] .single-product-main-image {
        width: 10% !important;
    }
    .single-product .product[data-gallery-style="left_thumb_sticky"][data-tab-pos="in_sidebar"] .single-product-summary, .single-product .product[data-gallery-style="left_thumb_sticky"][data-tab-pos="fullwidth"] .summary.entry-summary {
        width: 90% !important;
    }
}

    Thanks

    ThemeNectar Support Team