[Resolved] Woocommerce Single Product Page – swap panels?

[Antar]

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

[David]

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;
    }
}

[Antar]

Fiendish! Thanks, David.

[David]

🙂 Glad to be of help

[Naveed]

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.

[Ying]

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!

[Author]

Posts