- This topic has 11 replies, 3 voices, and was last updated 2 years, 11 months ago by
Leo.
-
AuthorPosts
-
February 20, 2020 at 11:03 pm #1172223
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?
February 21, 2020 at 4:26 am #1172417David
StaffCustomer SupportHi 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/February 21, 2020 at 6:55 am #1172695Sibi Paul
That really worked.
How to disable the Image zoom effect?
February 21, 2020 at 7:31 am #1172720David
StaffCustomer SupportTry 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/February 21, 2020 at 12:59 pm #1173031Sibi Paul
This is not work
February 21, 2020 at 2:06 pm #1173064Leo
StaffCustomer SupportDavid’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/February 21, 2020 at 2:11 pm #1173072Sibi Paul
I added it in the CSS…
it should be in PHP?
kindly guide me how to add then…
February 21, 2020 at 3:30 pm #1173092Leo
StaffCustomer SupportI 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-1173064Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/February 27, 2020 at 9:17 am #1178908Sibi Paul
I need detail steps to add this code in elements
February 27, 2020 at 9:33 am #1178923Leo
StaffCustomer SupportThat 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/February 27, 2020 at 9:48 am #1178932Sibi 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?
February 27, 2020 at 10:49 am #1178971Leo
StaffCustomer SupportIt’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/ -
AuthorPosts
- You must be logged in to reply to this topic.