How to change Woocommerce Page Layout?

[Sibi Paul]

Hello,

Kindly check my site URL.

the product image showing on the left side, and Product details appear at the back…

there is a lot of room white space below the image.

So,

I would like to show the image first, and product details after the image.

similar to the mobile version of this page.

in mobile, the Image appears top and product details bottom.

How can I change this Product page layout like that?

before I used the tagDiv Newspaper theme… there it showed like that.

How can I arrange a layout like that?

[David]

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Sibi Paul]

That really worked.

How to disable the Image zoom effect?

[David]

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Sibi Paul]

This is not work

[Leo]

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/

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Sibi Paul]

I added it in the CSS…

it should be in PHP?

kindly guide me how to add then…

[Leo]

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Sibi Paul]

I need detail steps to add this code in elements

[Leo]

That code can not be added within Elements.

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Sibi Paul]

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?

[Leo]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts