1

I would like to Display WooCommerce single product image and description in vertical and full width, but not in horiztontal 2 columns.

I mean the woocommerce single product layout is actually like this:

enter image description here

But I would like the left images and right description not shared in the Div 2 columns, just stack vertical and full width.

I have looked through the content-single-product.php template, woocommerce-layout.css, wc-template-functions.php, wc-template-hooks.php files etc... But I don't know how and where to make changes.

Anyone can tell me how can I achieve this?

Thanks

LoicTheAztec
  • 229,944
  • 23
  • 356
  • 399
ermei
  • 11
  • 3
  • I looked through thecontent-single-product.php , woocommerce-layout.css, wc-template-functions.php, wc-template-hooks.php files etc. but I don't know how to revise and where should be revise. it's so depressed. so help! – ermei Aug 11 '16 at 01:39
  • Hi, Loic. Thanks a lot. this is a perfect example. Could you tell me which file(s) I should change and how to change the code? please. – ermei Aug 11 '16 at 03:00
  • Have a look to these links (how to see what style rules you have to override): http://stackoverflow.com/questions/4515124/see-hover-state-in-chrome-developer-tools and https://developers.google.com/web/tools/chrome-devtools/iterate/inspect-styles/ … Each bowser have this kind of tools … Then after that in your active child theme (or theme) folder open/edit `style.css` file and add new style rules within same CSS selectors to override the concerning style rules that you want to change. – LoicTheAztec Aug 11 '16 at 06:58
  • oops. I have tried the inspect and edit page style that can reach my goal, but I can't save the changed style though I already Set up persistent authoring, maybe the 'Stage persisted changes' is wrong? I don't know , this is my first time to use the amazing tool. Thank you Loic. (ps. I havn no a local web server and just remote ftp revise the code, is this a problem?) – ermei Aug 12 '16 at 08:35
  • I always use remote server… To change that styles you need in your active child theme (or theme) folder open/edit **style.css** file and add new style rules within same CSS selectors to override the concerning style rules that you want to change. **This is BASIC**. You can do it with a remote code editor or you can use in admin > appearance > editor > style.css (worst choice). You might need to add `!important` on some rules. – LoicTheAztec Aug 12 '16 at 13:14

0 Answers0