Archived topic

Product image size in woocommerce product page

10 replies · Started by Fernando Díaz Gascón on July 14, 2017

Viewing posts 1–11 of 11

July 14, 2017 at 5:55 am #349329

Hello,

I like on product page to have no distractions, so I put the setting "content (no sidebars)". After doing this, I see that the image is too high, resulting it is not alligned with the information (short description, button) on the right. Here it is an example of the result:

http://cafeziryab.com.mialias.net/tienda/alimentacion/test-product/

(to enter in the web: user: cafezi383; pass: 9eF4Gzmr)

If the screen is wider, photo is bigger, so here I have a problem.

I am thinking two possible solutions:

1) Put space at right and left sides, but only in product page and only from a determined screen size.
2) Limit the image size from a determined screen size.

I have two questions:
- What do you think is a best solution for my problem (taking into account more possibilities than the ones I've thought).
- How can I implement the appropiate solution?

Thanks in advance

July 14, 2017 at 8:47 am #349408

Hi there,

Head to Dashboard > WooCommerce > Settings > Products > Display > Product images then you can set the size in there.

July 14, 2017 at 10:24 am #349462

You'll likely need to do something like this: https://generatepress.com/forums/topic/product-photo-margin/#post-139183

July 17, 2017 at 9:32 am #350693

Thank you Tom, with your help I am near the solution, but I still dont get the correct appearance.

If I use the percentage, the image shows very small for narrow screens, so I have used max-width. Exactly, this code:

.woocommerce #content div.product div.images, 
.woocommerce div.product div.images, 
.woocommerce-page #content div.product div.images, 
.woocommerce-page div.product div.images {
    max-width: 390px;
	
}

You can see the result here: http://cafeziryab.com.mialias.net/tienda/alimentacion/test-product/

(to enter in the web: user: cafezi383; pass: 9eF4Gzmr)

You can see that the photo is going to the left side (or better, I would say that the right margin goes bigger). With this solution there is too much space between the photo and the content summary.
I want the photo near the right side, next to the content summary. But I dont know how.

Thanks for any help.

July 17, 2017 at 10:51 am #350740

It's best to use a percentage, and only apply it to larger screens:

@media (min-width: 769px) {
    .woocommerce #content div.product div.images, 
    .woocommerce div.product div.images, 
    .woocommerce-page #content div.product div.images, 
    .woocommerce-page div.product div.images {
        width: 30%;
    }

    .woocommerce #content div.product div.summary, 
    .woocommerce div.product div.summary, 
    .woocommerce-page #content div.product div.summary, 
    .woocommerce-page div.product div.summary {
        float: right;
        width: 65%;
    }
}

July 17, 2017 at 11:38 am #350761

Great, but the problem remains. The image is floating left. I want the photo near the right side, next to the content summary.

Thanks in advance.

July 17, 2017 at 12:07 pm #350775

Sorry to butt in - but have you thought about dropping the CSS and just cropping your image so it doesn't have as much white space around it? This would effectively make the image larger in the first place. Excuse me if i have missed the point.

July 17, 2017 at 12:26 pm #350783

It could be a good idea, thank you David, but I have hundred of images. It would be a very hard work. And it would not solve the whole problem.

I returning to the problem: the problem remains. The image is floating left. I want the photo near the right side, next to the content summary.

Thanks in advance.

July 17, 2017 at 8:08 pm #350947

I just edited my CSS above: https://generatepress.com/forums/topic/product-image-size-in-woocommerce-product-page/#post-350740

July 18, 2017 at 11:36 am #351307

With your code, both (image and summary) go left and it leaves too much margin at the right side. I have been playing with margin-left for the image and both percentages and the result does not look bad. What do you think about this solution? This is the code:

@media (min-width: 900px) {
   .woocommerce #content div.product div.images, 
    .woocommerce div.product div.images, 
    .woocommerce-page #content div.product div.images, 
    .woocommerce-page div.product div.images {
        width: 30%;
margin-left: 15%;
    }

    .woocommerce #content div.product div.summary, 
    .woocommerce div.product div.summary, 
    .woocommerce-page #content div.product div.summary, 
    .woocommerce-page div.product div.summary {
        float: right;
        width: 45%;
    }
}

July 19, 2017 at 9:33 am #351758

Doesn't look bad at all :)

This archived topic is closed to new replies.

Start building better websites today.