WooCommerce product page has image and thumbnails near it.

I'm making a plugin that overrides main image, thumbnails and lightbox (so I don't need any built-in classes).

My question is: what's the correct way to do this from a plugin?

For now I see two ways:

1) Override product-image.php template file via filter. But I'm not fully understand if it applies to main image, or thumbnails, or both.

add_filter( 'wc_get_template', 'modify_product_gallery_template', 10, 5 );
function modify_product_gallery_template( $located, $template_name, $args, $template_path, $default_path ) {

    if ( 'single-product/product-image.php' == $template_name ) {
        $located = '... my-gallery.include.php';

    return $located;

2) Remove actions to apply my own:

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

add_action( 'woocommerce_product_thumbnails', 'my_plugin_show_product_image', 20 );
add_action( 'woocommerce_before_single_product_summary', 'my_plugin_show_product_image', 10 ); 

What's the best way?

closed as off-topic by Mark Kaplun, Nathan Johnson, Jacob Peattie, Krzysiek Dróżdż, TheDeadMedic Apr 17 '18 at 14:37

This question appears to be off-topic. The users who voted to close gave this specific reason:

  • "Your question should be specific to WordPress. Generic PHP/JS/SQL/HTML/CSS questions might be better asked at Stack Overflow or another appropriate Stack Exchange network site. Third party plugins and themes are off topic, they are better asked about at their developers' support routes." – Mark Kaplun, Nathan Johnson, Jacob Peattie, Krzysiek Dróżdż, TheDeadMedic
If this question can be reworded to fit the rules in the help center, please edit the question.


If you're wanting to replace all image markup with something custom, the best option is #2 - that way your new plugin controls everything relating to the gallery, and any future template overrides in WooCommerce will not affect it directly.

If it's just the default lightbox you want to remove you don't actually need to change markup or remove CSS classes; you can simply de-activate the feature. Thats explained here: https://github.com/woocommerce/woocommerce/wiki/Enabling-product-gallery-features-(zoom,-swipe,-lightbox)

  • It is very good that we have an authoritative answer, and will be extremely nice if WC team will own the tag, but generally speaking answers that some important part of it is in an external resource are not considered great answers around here. – Mark Kaplun Apr 9 '18 at 8:50

Not the answer you're looking for? Browse other questions tagged or ask your own question.