Navigation Dots

Hi,

I have the sticky feature enabled on my website’s single product pages for the gallery photos when scrolling down . However, it doesn’t indicate to the viewers how many other gallery photos there are to be seen before before you scroll all the way at the end, or swipe to the last gallery image. I would like to know if the theme comes with the following navigation dots seen in the 2 below screenshot.

One screenshot shows the navigation dots on the left side of the gallery area for the desktop view, while the other screenshot shows the navigation dots below the gallery area on the tablet & mobile views. I would like to know if these are theme options, and if so, how do I go about enabling them?

The above images failed, so I’m uploading them again. The images are related to the above question.

Attachments:

You must be logged in to view attached files.

Hello,

Please find the file that has changed in the recent update:

woodmart/js/scripts/global/helpers.js

Please try to replace

dots : false,

for

dots : true,

Please disable Include minified JS in the Theme Settings > Performance > JS and it will work: https://prnt.sc/12x8kq3

Best Regards

Hi,

Thanks for the information, I will pass it along to my developer. I will get back to you if we need any further assistance on the matter.

I just have another question to ask about enabling another feature from the theme, because I saw it on a reference site that also uses the same Woodmart theme. I asked the developer to enable the hover over feature that lets the viewer sees the next gallery image when you hover over a pic, instead of going straight to the single product page, but he wasn’t able to figure it out. So, I would like your help on figuring how to enable that feature. Thanks.

Hello,

Please try to enable “Hover image” in the Theme Settings > Product archives > Product styles.

You need to have at least one image in the gallery.

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

Best Regards

Hi,

I originally sent you 2 screenshots of navigation dots in single product page gallery area. One screenshot with navigation dots below the main product image for tablet & mobile view, then the other screenshot for desktop view with navigation dots on the left side of the sticky gallery area. You then sent me a code which I forwarded to my developer, but he’s now saying he tried it, but the navigation dots are only showing up at the bottom of the main product images on the single product page for all 3 devices. I wanted the navigation dots to show up different for the desktop view.

Please see screenshot below of a website reference with the navigation dots at the left side of the gallery area on the desktop view.

The image above failed when I tried to upload it, so here it is again. I made it smaller this time. It’s related to the last above message I sent.

This screenshot is related to above message I sent. It failed twice before. I’m resending a similar one now.

Attachments:

You must be logged in to view attached files.

Hi, I send a message yesterday & then a screenshot afterwards when the upload failed a couple of times, but I haven’t gotten a response back yet. I’ll just rewrite the question here again.

I originally sent you 2 screenshots for navigation dots in single product page gallery area from a reference site. One screenshot with navigation dots below the main product image for tablet & mobile view, then the other screenshot for desktop view with navigation dots on the left side of the sticky gallery area. You then sent me a code which I forwarded to my developer, but he’s now saying he tried it, but the navigation dots are only showing up at the bottom of the main product images on the single product pages for all 3 devices. I wanted the navigation dots to show up different for the desktop view. And since it now has the navigation dots below the image, the sticky feature was automatically removed, and the gallery images are not seen one below the other when you scroll down.

Please see screenshot below of a website reference with the navigation dots at the left side of the gallery area on the desktop view that I was originally asking about.

Attachments:

You must be logged in to view attached files.

Hello,

The dots are possible for the carousel only. The grid cannot have dots. If you enable the carousel and want to sign the don’t on the left, let us know.

Best Regards

Hi,

I’m sorry, but I didn’t understand your last above message. I think there may have been a typo or two in the message. So, please rewrite what you were trying to say.

Also, since the code you gave me before to enable the navigation dots, also changed the desktop single product page gallery images into a one column carousel, which was not what I wanted. How do I get only the tablet & mobile gallery images on the single product pages to have the navigation dots below the images in a carousel, excluding the one on the desktop view? The previous code you gave affected all 3 devices.

Basically, I want the desktop gallery images on the single product pages to maintain the sticky grid feature that you have to scroll down to see all the gallery images. However, I would like the gallery images on the tablet & mobile single product pages to still maintain their one column carousel that you have to swipe to the left in order to see all the gallery image. But, I would like to still keep the navigation dots below the carousel images. Are the navigation dots below the single product page gallery images a theme option that I would just need to enable, or is there a code that only covers the tablet & mobile, not the desktop version?

Hello,

Sorry for the delay. Please try adding the following Custom CSS in the Global Custom CSS area under Theme Settings > Custom CSS.

@media (min-width: 1025px) {
.woocommerce-product-gallery__wrapper .owl-stage {
	width: 100% !important;
	transform: none !important;
}
.woocommerce-product-gallery__wrapper .owl-nav,
.woocommerce-product-gallery__wrapper .owl-dots {
	display: none;
}
.woocommerce-product-gallery__wrapper .owl-stage .owl-item {
	margin-bottom: 4px;
}
}

Best Regards.

[Author]

Posts