Removing Woo gallery slider

Hi, the image thumbnails on my single product page are very small and in a weird location. I want to revert back to the normal size, and placed underneath the main image. I have tried adding the below to the functions.php child file (as per this link ( https://theme.co/apex/forum/t/resizing-woocommerce-images/1706), but it hasn’t worked.

add_theme_support( ‘wc-product-gallery-zoom’ );
add_theme_support( ‘wc-product-gallery-lightbox’ );
add_theme_support( ‘wc-product-gallery-slider’ );

This is how i’m trying to get the single product to look:

Product page URL is https://dragonhockey.co.uk/nemesis-hockey-stick-100-carbon/

Hello @macca_andy,

Thanks for writing in!

To resolve your issue, you will have to use this code by adding in your child theme’s functions.php file

// Remove product gallery slider and gallery zoom
// =============================================================================
add_action( 'after_setup_theme', 'remove_woo_three_support', 11 ); 
function remove_woo_three_support() {
  remove_theme_support( 'wc-product-gallery-zoom' );
  remove_theme_support( 'wc-product-gallery-slider' );
  remove_theme_support( 'wc-product-gallery-lightbox' );
}
// =============================================================================

This remove the gallery zoom feature, the lightbox and the gallery slider. You can omit if you want to retain any of the WooCommerce feature you like.

Hope this helps. Kindly let us know.

Thank you.

I see what happens now, you lose a lot of functionality. Is there a way to move the thumbnails so it looks like the no slider view. i.e. large thumbanils underneath the main image, but keep the slider functionality?

Hello @macca_andy,

Yes, the code previously suggested will remove some of the default functionality in Woocommerce such as opening the image in a Lightbox.

The default display for the product images in X is like this:

Try removing the code you have added to the functions.php then you can actually move the image thumbnails below the main image and enlarge it through custom CSS.

Please try adding this code in X > Theme Options > CSS:

.flex-control-nav.flex-control-thumbs {
    position: relative;
    padding: 1em 0;
    text-align: left;
}

.flex-control-nav.flex-control-thumbs img {
    height: auto;
}

Once you have added the code, the image already of the product should look like this:

Hope this helps.

That’s done it. Thank you very much.

You’re most welcome!

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.