Single product page image carousel settings

This topic has 5 replies, 2 voices, and was last updated 2 years, 4 months ago by Elise Noromit.

Viewing 6 posts - 1 through 6 (of 6 total)

Author

Posts
July 2, 2022 at 7:10 pm #388071
tg
Participant
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.
July 4, 2022 at 2:35 pm #388447

Elise Noromit
Member

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

July 4, 2022 at 4:51 pm #388509
tg
Participant
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.
July 5, 2022 at 1:15 pm #388757
Elise Noromit
Member
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
July 5, 2022 at 6:46 pm #388883

tg
Participant

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

July 6, 2022 at 5:30 am #388962

Elise Noromit
Member

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