Site logo

Archived topic

Woocommerce Single Product Page - swap panels?

5 replies · Started by Antar on August 17, 2020

Viewing posts 1–6 of 6

Hello, All

Is there a simple way to swap over the single product page panels - i.e. put the summary on the left and the product image on the right?

Just for a change!

Thanks

Antar

Hi there,

It is possible to unhook/re-hook the gallery and the summary - but things get a little messy.
Simple way is to use some Flexbox CSS:

@media(min-width: 769px) {
    .single-product.woocommerce div.product {
        display: flex;
        flex-wrap: wrap;
    }
    
    .woocommerce #content div.product div.summary {
        order: -1;
        width: calc(50% - 40px);
        margin-right: 40px;
    }
    
    .woocommerce #content div.product div.images {
        margin-right: 0;
    }
}

Fiendish! Thanks, David.

:) Glad to be of help

Hello!

I am trying to fix the image gallery height of the active image to 500px in woocommerce but unable to do that in my GPP theme
the product page looks like this

https://www.sonueasystore.com/product/skechers-womens-go-walk-lite-15433-boat-shoe/

Some of the images look small and some with large height. I want to fix them in 500 X 500 px size can you help in this problem. It would be better if you provide some CSS code for this issue.

Hi Naveed,

Your question is not related to this topic, can you open a new topic and link us to the page again?

Thanks for your understanding!

This archived topic is closed to new replies.