Small Devices Thumbnail Position

@crowds90

Add the below snippet using the Code Snippets plugin.

or,

Add it inside your current theme’s funcitons.php file:

add_filter('woo_variation_gallery_thumbnail_slider_js_options', function($thumbnail_js_options){
	
	$gallery_thumbnail_position_small_device = sanitize_textarea_field( woo_variation_gallery()->get_option( 'thumbnail_position_small_device', 'bottom' ) );
	
	return $thumbnail_js_options['responsive'] = array(
		array(
			'breakpoint' => 900, // Add your desired width here. For example 1024
			'settings'   => array(
				'vertical' => in_array( $gallery_thumbnail_position_small_device, array( 'left', 'right' ) ),
				'rtl'      => woo_variation_gallery()->set_rtl_by_position( $gallery_thumbnail_position_small_device )
			),
		),
	);
	
});

Please let me know if it helps.

Hello,

The code didn’t seem to work.

It didn’t move the thumbnails underneath for a higher px but kept the thumbnail on the left and removed it so only 1 displayed.

The first image is what it originally looked like and the second it what happened when using the code:

https://ibb.co/N7pYSYQ
https://ibb.co/WFFcR3H

@crowds90

Sorry for that. Mistakenly missed the return value. Please try the below one:

add_filter('woo_variation_gallery_thumbnail_slider_js_options', function($thumbnail_js_options){
	
	$gallery_thumbnail_position_small_device = sanitize_textarea_field( woo_variation_gallery()->get_option( 'thumbnail_position_small_device', 'bottom' ) );
	
	$thumbnail_js_options['responsive'] = array(
		array(
			'breakpoint' => 900, // Add your desired width here. For example: 1024
			'settings'   => array(
				'vertical' => in_array( $gallery_thumbnail_position_small_device, array( 'left', 'right' ) ),
				'rtl'      => woo_variation_gallery()->set_rtl_by_position( $gallery_thumbnail_position_small_device )
			),
		),
	);
	return $thumbnail_js_options;
	
});

But keep in mind. After doing the above you have to write CSS for that specific breakpoint. As in my above example, the breaking point is 900.

Copy the the media queries from woo-variation-gallery > asstes > css > fronted.css [line number 376 to 1292]

keep them inside appearance > customize > additional css

And replace each 767px with 900px.

Thanks

Hi,

Thanks for the response.

It doesn’t seem to move the thumbnails to the bottom. It just keeps them on the left. Can they be moved to the bottom?

I do have the Small Devices Thumbnail Position set to Bottom if you might have thought that was the problem.

https://ibb.co/0mGwYXW

Doing this:

Copy the the media queries from woo-variation-gallery > asstes > css > fronted.css [line number 376 to 1292]

And replace each 767px with 900px.

Will fix that problem?

• This reply was modified 2 years ago by crowds90.
• This reply was modified 2 years ago by crowds90.

Hi,

I got it to work with the css lines in woo-variation-gallery > asstes > css > fronted.css [line number 376 to 1292] like you said and changed it in my additional css.

Thanks

@crowds90

Glad to know it helped.

If you found my support helpful please share some good words here.

Thanks in advance