CODEWITHSUNDEEP
wordpresswoocommerce
Howard Baltus - WebAuthorings
Howard Baltus - WebAuthorings

Reputation: 41

WooCommerce main product image

I want to make a simple change to WooCommerce default template. Currently, the gallery displays on the left side just under the main image. I want it to display on the right side just under the short blurb description. I managed to do this by adding the following code to the functions.php file:

/*Relocate Product Gallery*/

remove_action( 'woocommerce_before_single_product_summary', 'woocommerce_show_product_images', 20 );

add_action( 'woocommerce_before_single_product_summary', 'woocommerce-main-image', 20 );

add_action( 'woocommerce_single_product_summary', 'woocommerce_show_product_thumbnails', 100 );

The first line removes the group of images (main and gallery) from the left side. The last line puts just the gallery exactly where I want it. The middle line is the issue. I want just the main product image to appear where it should, but instead it's throwing an error. Am I using the wrong vaiable name to call just the main product image?

Upvotes: 1

Views: 18872

Answers (2)

Howard Baltus - WebAuthorings
Howard Baltus - WebAuthorings

Reputation: 41

Thank you! Accomplished.

/*---Move Product Gallery*/

remove_action( 'woocommerce_product_thumbnails', 'woocommerce_show_product_thumbnails', 20  );
add_action( 'woocommerce_single_product_summary', 'woocommerce_show_product_thumbnails', 100 );

Upvotes: 3

Dre
Dre

Reputation: 2953

The short answer is that there is no function called woocommerce_main_image - you should be using woocommerce_show_product_images instead. If you check wc-template-hooks.php you'll see that it's hooked by default:

add_action( 'woocommerce_before_single_product_summary', 'woocommerce_show_product_images', 20 );

What's not clear is why it's not already showing - perhaps your template isn't calling the woocommerce_before_single_product_summary action.

You say you want to display the main image separately from the thumbnails; I'm going to give you the long-winded explanation as to how it all works so that you have a better understanding: Have a peek at wc-template-functions.php - you'll find that the woocommerce_show_product_images() includes the product-image.php file via this line:

// wc-template-functions.php:716
wc_get_template( 'single-product/product-image.php' ); // Includes product-image.php

This displays the main image and has a hook for displaying the thumbnails:

// product-image.php:43
do_action( 'woocommerce_product_thumbnails' ); // woocommerce_show_product_thumbnails() is hooked to this

You can either create your own copy of product-image.php to override and remove the do_action() OR you can unhook the function that is actually displaying the thumbnails using remove_action(). If you look in wc-template-hooks.php again you'll see:

// wc-template-hooks.php:108
// This hooks the function to the action
add_action( 'woocommerce_product_thumbnails', 'woocommerce_show_product_thumbnails', 20 );

That's what's hooking in the function to the action. You can remove this by putting...

// This unhooks the function from the action
remove_action( 'woocommerce_product_thumbnails', 'woocommerce_show_product_thumbnails' );

... into your theme functions.php file. To display the thumbnails in a different location you can simply use either the woocommerce_show_product_thumbnails() function or wc_get_template( 'single-product/product-thumbnails.php' ) in your template; the former is simply a wrapper function for the latter.

Hopefully that's a clear enough explanation for you to figure the rest out. Good luck.

Upvotes: 3

Related Questions