Support » Plugin: WooCommerce » Display single product gallery thumbs above main image?

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Support Hannah S.

    (@fernashes)

    Automattic Happiness Engineer

    Hey there!

    To do this, you’ll need to modify the single product page’s template. Here’s a good description of how to get started:
    https://businessbloomer.com/woocommerce-move-product-gallery-thumbnails/

    Thanks. I’ve tried that though. You can just add a new action hook above the main image in the template, then hook in the thumbnails there. Problem is, all this does is relocate the full size gallery images that would normally be positioned to the right of the main image viewport (with overflow:hidden set, i.e. those are the images that slide in when the gallery thumbs are clicked). This obviously breaks the functionality of the gallery slider.

    The problem is, the whole thing is a flexslider, so when I inspect the elements I see the woocommerce-product-gallery <div>, and within that there’s a <div> with class “flex-viewport” within which is a <figure> tag with a <div> for each full size image in the gallery. This I can find in the single-product-image.php file in woocommerce.

    BUT… below all that is an <ol> with the class “flex-control-nav flex-control-thumbs”, which is where the clickable thumbnails show up. I can see that the result I want is basically just to move that <ol> above the “flex-viewport” <div> without messing around with anything else.

    I’m just not sure where to find the code that generates these elements in the woocommerce templates. I keep hoping I’ll find something simple, like a single action that loads that <ol> that I can attempt to re-hook above, but no luck yet.

    The problem with using remove_action( 'woocommerce_product_thumbnails', 'woocommerce_show_product_thumbnails', 20 );, as in the example you linked to, is that you remove both the full size gallery images and the clickable “flex-control-thumbs”, so re-hooking that action elsewhere breaks the flexslider functionality.

    So…. any ideas on where I might begin looking for some way to relocate that “flex-control-thumbs” <ol>?

    Plugin Support Hannah S.

    (@fernashes)

    Automattic Happiness Engineer

    Thanks for that description! You’ve gone beyond the level of help I can offer you – but I’ll leave this thread open for a bit in case anyone else wants to chime in.

    Thanks Hannah. It’s going beyond me too. But I’ll keep investigating and update if I find a solution.

    Plugin Support Hannah S.

    (@fernashes)

    Automattic Happiness Engineer

    I’m going to close this thread now, as no-one has chimed in.

    If you do want more support with this, then I recommend contacting one of the services on our customizations page: https://woocommerce.com/customizations/

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Display single product gallery thumbs above main image?’ is closed to new replies.