Horizontal Product Thumbnail

I managed to change the product layout by directly modify these files:
leto/inc/woocommerce.php/leto_single_gallery_nav() -> $vertical set false
leto/inc/template-functions.php/leto_body_classes() -> $product_layout set to 'product-layout-3'

Can you please help how to properly modify this in child theme?

Thanks in advance.

Hi,

Try adding this CSS code to Appearance > Customize > Additional CSS from dashboard.

    .single-product .product .product-detail .product-thumbnails {
      position: static !important;
      width: 100% !important;
      max-width: 100% !important;  
    }

    .woocommerce.single-product .woocommerce-product-gallery__wrapper, 
    .woocommerce .single-product .woocommerce-product-gallery__wrapper {
      margin-left: 0 !important;
    }

Regards,
Kharis
aThemes Support

Thanks for the reply.

But I still need to change:
leto/inc/woocommerce.php/leto_single_gallery_nav() -> $vertical set to false
to properly vertical the thumbnails.

I manage to fix them by adding these functions into my child theme:

    function remove_leto_single_gallery_nav()
    {
        remove_action( 'woocommerce_before_single_product_summary', 'leto_single_gallery_nav', 21);
    }
    add_action('template_redirect', 'remove_leto_single_gallery_nav');

    function leto_single_gallery_nav_horizontal() {

    	$product_layout = get_theme_mod( 'leto_product_layout', 'product-layout-1' );

    	global $product, $post;
    	$gallery_ids = $product->get_gallery_image_ids();


    	if ( ( $product_layout == 'product-layout-2' ) || empty( $gallery_ids ) ) {
    		return;
    	}

    	?>
    	<div class="product-thumbnails row" data-vertical="false">
    	<?php
    		$post_id = $post -> ID;
    		$post_thumb = get_post_thumbnail_id( $post_id );
    		echo '<div class="slick-slide">' . wp_get_attachment_image( $post_thumb, 'medium' ) . '</div>';
    		foreach( $gallery_ids as $gallery_id ) {
    			echo '<div class="slick-slide">' . wp_get_attachment_image( $gallery_id, 'medium' ) . '</div>';
    		}
    	?>
    	</div>
    	<?php
    }
    add_action('woocommerce_before_single_product_summary', 'leto_single_gallery_nav_horizontal', 21);

Great!

Glad to know you found the solution. And thank you for sharing it here. That’s really appreciated.

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis
aThemes Support