WooCommerce Product Template

Question

I would like to move my thumbnails on my product template in WooCommerce, to position them beside the big product picture, underneath the price and add to cart buttons. (As

Answer 1

First off, make sure you override WooCommerce templates in your theme directory in this folder structure: /woocommerce/templates/ (i.e. yourtheme/woocommerce/templates/). This way, if Woo has an update, your custom code won't be overridden.

I'm not 100% positive on this, but generally having worked with Woo template overrides, this should get you pretty far.

The thumbnails are actually in pretty deep.

They are here: templates/single-product/product-thumbnails.php

It's loaded in Line 43 here: woocommerce / templates / single-product / product-image.php

That product-image.php section is loaded in here: woocommerce / templates / content-single-product.php "woocommerce_before_single_product_summary".

So you will need to remove it from line 43 on the product-image.php and then put it in the "woocommerce_single_product_summary" section. You should try and put this action add in your own custom functions file (obviously removing it - the action - from where it is now) which is

add_action( 'woocommerce_product_thumbnails', 'woocommerce_show_product_thumbnails', 20 );

and change to

add_action('woocommerce_after_single_product_summary','woocommerce_show_product_thumbnails', 20 );

The actions list is referenced here:

woocommerce / includes / wc-template-hooks.php

The order is on

woocommerce / templates / content-single-product.php

Answer 2

As Woocommerce suggests you are to put any overrides in a new folder under /your-theme-folder/woocommerce/. This is how it looks in sublime text 3 for me with 'framework' being the name of my theme.

Now, under /your-theme-folder/woocommerce/single-product/product-image.php I commented out the original thumbnail hook like so.

<?php //do_action( 'woocommerce_product_thumbnails' ); ?>

Next, I added a do_action to the template under /your-theme-folder/woocommerce/ in the content-single-product.php file in woocommerce_single_product_summary hook.

<div class="summary entry-summary">

    <?php
        /**
         * woocommerce_single_product_summary hook
         *
         * @hooked woocommerce_template_single_title - 5
         * @hooked woocommerce_template_single_rating - 10
         * @hooked woocommerce_template_single_price - 10
         * @hooked woocommerce_template_single_excerpt - 20
         * @hooked woocommerce_template_single_add_to_cart - 30
         * @hooked woocommerce_template_single_meta - 40
         * @hooked woocommerce_template_single_sharing - 50
         */
        do_action( 'woocommerce_single_product_summary' );
        do_action( 'woocommerce_product_thumbnails' );

    ?>

</div><!-- .summary -->

You should now see your thumbnails inside the div with class summary and entry-summary.