woocommerce 3.3.5 product-thumbnails page is different

Question

i have a probleme with the 3.3.5 version of woocomerce, in product-thumbnais.php page in particulary.

Scenario: We have a featured product image and additional 5-6 images in product gallery, which obviously shows up as product thumbnails under main image.

Now thumbnails are just stacking under each other and it seems there's no way to get these thumbnails to display in single line carousel with navigation arrows to scroll that carousel.

Say I want to display 4 thumbnails at any given time and click navigation arrows to scroll through thumbnails just like in flexnav demo on this page https://imgur.com/a/Geh2H

this is my script

$(document).ready(function(){
$('#owl-single-product').owlCarousel({
    items:1,
    itemsTablet:[768,2],
    itemsDesktop : [1199,1]

});

$('#owl-single-product-thumbnails').owlCarousel({
    items: 4,
    pagination: true,
    rewindNav: true,
    itemsTablet : [768, 4],
    itemsDesktop : [1199,3]
});

$('#owl-single-product2-thumbnails').owlCarousel({
    items: 6,
    pagination: true,
    rewindNav: true,
    itemsTablet : [768, 4],
    itemsDesktop : [1199,3]
});

$('.single-product-slider').owlCarousel({
    stopOnHover: true,
    rewindNav: true,
    singleItem: true,
    pagination: true
});

$(".slider-next").click(function () {
    var owl = $($(this).data('target'));
    owl.trigger('owl.next');
    return false;
});

$(".slider-prev").click(function () {
    var owl = $($(this).data('target'));
    owl.trigger('owl.prev');
    return false;
});

$('.single-product-gallery .horizontal-thumb').click(function(){
    var $this = $(this), owl = $($this.data('target')), slideTo = $this.data('slide');
    owl.trigger('owl.goTo', slideTo);
    $this.addClass('active').parent().siblings().find('.active').removeClass('active');
    return false;
});

});

NOTE: i don't know where a should add owl-single-product-thumbnails ID.

this is the product-thumbnails.php page:

if ( ! function_exists( 'wc_get_gallery_image_html' ) ) {
return;

}

global $product;

$attachment_ids = $product->get_gallery_image_ids();

if ( $attachment_ids && has_post_thumbnail() ) { foreach ( $attachment_ids as $attachment_id ) { echo apply_filters( 'woocommerce_single_product_image_thumbnail_html', wc_get_gallery_image_html( $attachment_id ), $attachment_id ); } }

johnnyd23 johnnyd23 · Accepted Answer · 2018-09-27T12:11:03

You can declare support for the WooCommerce gallery functionality with this code in your functions.php file:

function add_woocommerce_support() {
    add_theme_support( 'wc-product-gallery-slider' );
}
add_action( 'after_setup_theme', 'add_woocommerce_support' );

woocommerce 3.3.5 product-thumbnails page is different

1 Answers