Single product page image carousel settings

[tg]

Hello!

We got a question regarding the image carousel on the single product page. We set the product image width to “Medium” and Thumbnails position to “Bottom (horizontal carousel” in WoodMart settings -> single product -> Images. Now we would like to increase the size on the thumbnails in the carousel. There is a setting called “Thumbnail image width” directly below. But changing this setting (and regenerating thumbnails) doesn’t seem to affect the thumbnail image size for the carousel. Is there another setting to control this? Looking at the generated HTML it seems like the thumbnail size is set to a fixed maximum size of 145.25px even though the referenced images are larger (260px or 300px).
<div class="owl-item active" style="width: 145.25px;">

Increasing the owl-stage width as well as the owl-items via CSS doesn’t work as either images at the far right of the carousel become unreachable, images are shown in two rows or appearing above the main product image.

Could you please advise?

• This topic was modified 2 years, 4 months ago by tg.

Hello,

Could you kindly clarify how you want to increase the images? How it should be?

If you have any questions please feel free to contact us.

Best Regards

[tg]

Hello!

currently it looks like this (limited to 145.25px width):

And we would like it to have larger thumbnails like this (changed manually via CSS to 300px width):

Edit: Linked images don’t seem to show up, attached them instead.

Best Regards,
Stefan

• This reply was modified 2 years, 4 months ago by tg. Reason: images in tag don't show up

Attachments:

You must be logged in to view attached files.

Hello,

Please add this code to the functions.php of the child theme:

add_filter(
	'woodmart_product_gallery_settings',
	function() {
		return array(
			'thumbs_slider' => array(
				'items'    => array(
					'desktop'          => 2,
					'tablet_landscape' => 2,
					'tablet'           => 2,
					'mobile'           => 2,
					'vertical_items'   => 2,
				),
			),
		);
	}
);

If you have any questions please feel free to contact us.

Best Regards

Hello!

That works, thank you! How does this work? Is the 2 referring to the amount of images shown in the slider and therefore the images are automatically scaled bigger?

Best Regards,
Stefan

Hello,

Yes, 2= the number of times shown on each device.

If you have any questions please feel free to contact us.

Best Regards

[Author]

Posts