WooCommerce产品模板

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 standard, they are positioned directly underneath the big product picture)

The template seems to be using hooks though, and I haven't tried using that before. I have found a 'content-single-product.php' that seems to do the stuff, but I can't find anything about thumbnails in that file.

Can someone point me in the right direction?

Thanks already!

Answer 1

First off, make sure you override WooCommerce templates in your theme directory in this folder structure: /woocommerce/templates/ (ie 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.