http://www.kriesi.at/support/topic/single-product-page-change-so-that-product-image-takes-up-more-of-the-space Support Forum - Topic: single product page - change so that product image takes up more of the space en-US Sun, 19 May 2013 01:16:39 +0000 http://bbpress.org/?v=1.0.2 q http://www.kriesi.at/support/search.php http://www.kriesi.at/support/topic/single-product-page-change-so-that-product-image-takes-up-more-of-the-space#post-95338 Tue, 05 Feb 2013 18:40:56 +0000 nikicampbell 95338@http://www.kriesi.at/support/ <p>Thank you so much! Perfection :) </p> http://www.kriesi.at/support/topic/single-product-page-change-so-that-product-image-takes-up-more-of-the-space#post-95251 Tue, 05 Feb 2013 13:44:49 +0000 Devin 95251@http://www.kriesi.at/support/ <p>Hi Niki,</p> <p>You can change the layout of the single product page in the theme files config-woocommerce&gt;config.php file. Look for:<br /> <pre><code># # wrap single product image in an extra div # add_action( &#39;woocommerce_before_single_product_summary&#39;, &#39;avia_add_image_div&#39;, 2); add_action( &#39;woocommerce_before_single_product_summary&#39;, &#39;avia_close_div&#39;, 20); function avia_add_image_div() { echo &quot;&lt;div class=&#39;four units single-product-main-image alpha&#39;&gt;&quot;; } # # wrap single product summary in an extra div # add_action( &#39;woocommerce_before_single_product_summary&#39;, &#39;avia_add_summary_div&#39;, 25); add_action( &#39;woocommerce_after_single_product_summary&#39;, &#39;avia_close_div&#39;, 3); function avia_add_summary_div() { echo &quot;&lt;div class=&#39;eight units single-product-summary&#39;&gt;&quot;; }</code></pre> <p>The first div wraps the image in a four unit grid section and the second one in an eight unit grid. You can use just about any combination of the twelve unit grid to change the layout quickly and easily.</p> <p>Additionally, Nick has posted some code to change the layout so that the product tabs are full width and wrap under the image here: <a href="http://www.kriesi.at/support/topic/product-details-page-layout#post-88883" rel="nofollow">http://www.kriesi.at/support/topic/product-details-page-layout#post-88883</a></p> <p>Regards,</p> <p>Devin </p> http://www.kriesi.at/support/topic/single-product-page-change-so-that-product-image-takes-up-more-of-the-space#post-95129 Mon, 04 Feb 2013 21:16:43 +0000 nikicampbell 95129@http://www.kriesi.at/support/ <p>Hello - here is the site + product page:</p> <p><a href="http://www.peacerev.ca/cardshop/shop/redbird-spirit-unbound/" rel="nofollow">http://www.peacerev.ca/cardshop/shop/redbird-spirit-unbound/</a></p> <p>...how can I change it so that the image takes up 60% of the space, and the words take up 40%. I understand you are using units - but I don't know where to make the changes.</p> <p>Thanks!<br /> Niki </p>