[Support request] Product image size in woocommerce product page

Home Forums Support [Support request] Product image size in woocommerce product page

Home Forums Support Product image size in woocommerce product page

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #349329
    Fernando Díaz Gascón

    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

    #349408
    Leo
    Staff
    Customer Support

    Hi there,

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

    #349462
    Tom
    Lead Developer
    Lead Developer

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

    #350693
    Fernando Díaz Gascón

    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.

    #350740
    Tom
    Lead Developer
    Lead Developer

    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%;
        }
    }
    #350761
    Fernando Díaz Gascón

    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.

    #350775
    David
    Staff
    Customer Support

    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.

    #350783
    Fernando Díaz Gascón

    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.

    #350947
    Tom
    Lead Developer
    Lead Developer
    #351307
    Fernando Díaz Gascón

    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%;
        }
    }
    #351758
    Tom
    Lead Developer
    Lead Developer

    Doesn’t look bad at all 🙂

Viewing 11 posts - 1 through 11 (of 11 total)
  • You must be logged in to reply to this topic.