single product page - change so that product image takes up more of the space « Support Forum | Kriesi.at

Support Forum » Replete

single product page - change so that product image takes up more of the space

3 posts from 2 voices

Started 4 months ago by nikicampbell
Latest reply from nikicampbell
This topic is closed
This topic is not a support question

Tags:

nikicampbell
Member

Hello - here is the site + product page:

http://www.peacerev.ca/cardshop/shop/redbird-spirit-unbound/

...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.

Thanks!
Niki

Posted 4 months ago #

Devin
Moderator

Hi Niki,

You can change the layout of the single product page in the theme files config-woocommerce>config.php file. Look for:

#
# wrap single product image in an extra div
#
add_action( 'woocommerce_before_single_product_summary', 'avia_add_image_div', 2);
add_action( 'woocommerce_before_single_product_summary',  'avia_close_div', 20);
function avia_add_image_div()
{
	echo "<div class='four units single-product-main-image alpha'>";
}

#
# wrap single product summary in an extra div
#
add_action( 'woocommerce_before_single_product_summary', 'avia_add_summary_div', 25);
add_action( 'woocommerce_after_single_product_summary',  'avia_close_div', 3);
function avia_add_summary_div()
{
	echo "<div class='eight units single-product-summary'>";
}

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.

Additionally, Nick has posted some code to change the layout so that the product tabs are full width and wrap under the image here: http://www.kriesi.at/support/topic/product-details-page-layout#post-88883

Regards,

Devin

Posted 4 months ago #