Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • #20061

    Hello – here is the site + product page:

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




    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:




    Thank you so much! Perfection :)

Viewing 3 posts - 1 through 3 (of 3 total)

The topic ‘single product page – change so that product image takes up more of the space’ is closed to new replies.