Tagged: , ,

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • November 1, 2013 at 6:14 pm #183440
    MLA18

    Without having to do a lot of development work, is it possible through CSS to increase the size of the main product image on single product pages? An example of what I am referring to can be found here on the Nike store: http://store.nike.com/us/en_us/pd/pro-hyperwarm-compression-dri-fit-max-mock-shirt/pid-772161/pgid-537585

    I attempted to change the Image Options within WooCommerce > Catalog but see no change in image size.

    Thanks in advance!

    November 2, 2013 at 4:42 am #183607
    Ismael

    Hey MLA18!

    Can you please give us a link to your single product page? Please check the layout you’re using on General Settings > Responsive Layout. You need to adjust the width of the four units grid where the product image is located and the eight units grid where the product content is.

    .single-product .container .four.units {
width: 270px;
}

.single-product .container .eight.units {
width: 590px;
}

    Cheers!
    Ismael

    November 2, 2013 at 9:38 pm #183792
    MLA18
    This reply has been marked as private.
    November 5, 2013 at 4:01 am #184606
    Devin

    Hey!

    You can alternatively just change the container size for the single product page in the theme files. Go to config-woocommerce>config.php and the search 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_image_div', 20);
function avia_add_image_div()
{
	echo "<div class='four units single-product-main-image alpha'>";
}

function avia_close_image_div()
{
	global $avia_config;
	$avia_config['currently_viewing'] = "shop_single";
	get_sidebar();
	echo "</div>";
}

#
# 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 grid units the single page elements are wrapped in can be changed there so that they are output either larger or smaller. Just make sure the two values equal twelve in total.

    Eg:

    
echo "<div class='four units single-product-main-image alpha'>";
echo "<div class='eight units single-product-summary'>";

    could be changed to:

    
echo "<div class='six units single-product-main-image alpha'>";
echo "<div class='six units single-product-summary'>";

    Cheers!
    Devin

    November 5, 2013 at 8:38 pm #184934
    MLA18

    Very interesting and good to know.

    Thank you !!!

  • Author
    Posts
Viewing 5 posts - 1 through 5 (of 5 total)
  • The topic ‘Increase size of Main Product Image on Single Product Pages’ is closed to new replies.