Product page layout

  • Resolved megan1967

    (@megan1967)


    2 years, 1 month ago

    I am helping a friend create a site for selling his photography. I am using the Hermes theme with WooCommerce. The problem I a having is that some of his photos are vertically oriented (taller than wide) and some are horizontally oriented (wider than tall). On the individual product page, I need to be able to resize the product image based on its size ratio. I’ve been trying to do this with css, but the image size seems to be linked to the column width. When I get the long photos to look good, the tall photos become enormous and when I get the tall photos to look good, the wide photos are very small.

    It would help if the photos were not in the same wrapper, but I don’t know enough about php to modify the existing code. Are there any extensions to change the way the product page is laid out? Ideally, the product photo would come first with all other content following it in one column.

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • Saif

    (@babylon1999)

    Hello @megan1967,

    If I understand you correctly, you want the image to be first on the single product page and the rest of the content to be below it.

    I will recommend getting in touch with your theme developer about this but for now, you can change the width value of that image to 100% in CSS.

      @media (min-width: 992px)
.col-md-5 {
  width: 100% !important;
}


    Link to image: https://d.pr/i/MYih0N



    If you want a more customizable approach, you can check this guide: https://woocommerce.com/document/image-sizes-theme-developers/


    Hope this helps!

    Thread Starter megan1967

    (@megan1967)

    Thank you for your response! I already tried the css trick but the vertically oriented photos get too big. I will check into your second suggestion. Again, thank you so much for your response!

    Hi @megan1967

    You are most welcome! ??

    Are there any extensions to change the way the product page is laid out? Ideally, the product photo would come first with all other content following it in one column.

    This is a fairly complex development topic that would require customization to do it. Since custom coding is outside our scope of support, I am leaving this thread open for a bit to see if anyone can chime in to help you out.

    For questions related to development and custom coding, your best bet is to ask on any of these channels for support. We’re lucky to have a great community of open-source developers for WooCommerce, and many of our developers hang out there, too.

    Hope this helps!

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Product page layout’ is closed to new replies.