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?

1 Answer
1

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)

Leave a Reply

Your email address will not be published. Required fields are marked *