Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #183440

    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!

    #183607

    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

    #183792
    This reply has been marked as private.
    #184606

    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

    #184934

    Very interesting and good to know.

    Thank you !!!

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.