How to change Woocommerce Page Layout?

Hi there,

to stack all the elements like mobile add this CSS:

.woocommerce-page #content div.product div.images, .woocommerce-page div.product div.images,
.woocommerce #content div.product div.summary {
    width: 100% !important;
    float: none;
    margin-right: 0;
    margin-left: 0;
}

That really worked.

How to disable the Image zoom effect?

Try this snippet:

function remove_image_zoom_support() {
    remove_theme_support( 'wc-product-gallery-zoom' );
    remove_theme_support( 'wc-product-gallery-lightbox' );
}
add_action( 'wp', 'remove_image_zoom_support', 100 );

This is not work

David's code should work.

How are you adding it?

Make sure it's one of these methods:
https://docs.generatepress.com/article/adding-php/

I added it in the CSS...

it should be in PHP?

kindly guide me how to add then...

I did provide the link on how to add PHP in the previous reply:
https://generatepress.com/forums/topic/how-to-change-woocommerce-page-layout/#post-1173064

I need detail steps to add this code in elements

That code can not be added within Elements.

You need to use one of these methods:
https://docs.generatepress.com/article/adding-php/

Oh... Okay...

to Disable that Thumbnail Zoom Effect...

I've to follow this complicated method?

Actually I don't want to Install any 3rd party plugin for these simple things.

Let me know if there is some alternative method.

something can we do using the execute PHP option in elements?

It's not really complicated - just copy and paste.

Code snippets plugin should have very minimal effect for your site speed as it's just adding the code for you.

If you don't want to use that plugin, then use a child theme and add the code in function.php.