Return to previous page

Product image gallery thumbnails as mini dots

This topic has 14 replies, 3 voices, and was last updated 10 months, 3 weeks ago ago by Tony Rodriguez

devine721

Participant

May 20, 2023 at 04:59

Hello,

I want to make the product gallery images on mobile devices to show under the displayed image as dots so that when it skip to the next image it would move to the next dot and highlight that dot.

#357275 Copied Theme version: 9.1.5

13 Answers

Tony Rodriguez

Support staff

May 20, 2023 at 06:51

Hello, devine721,

Thank you so much for purchasing our theme and contacting our support center.

Could you please provide a screenshot of the issue you are experiencing so that we can better understand your request?

You may upload the screenshots on https://postimages.org/ or https://imgbb.com/ and paste the links here.

Additionally, we request that you provide us with URL and temporary access to the wp-admin of your website. This will enable us to take a closer look at your settings and provide you with a more accurate and specific solution.

To do this, please follow these steps:
– Create an account via Dashboard (Users > Add new) with administrator role. Refer to the following image for guidance: http://prntscr.com/s3rc9m
– Provide us with the username and password for the newly created account via the Private Content area. Refer to the following image for guidance: http://prntscr.com/s5mao7
– Any email address can be used for the new account, it does not have to be your personal email.

Please let us know once you have completed these steps, and we will promptly review your account information and provide assistance as soon as possible.

Kind Regards,
8theme team

#357286 Copied

devine721

Participant

May 21, 2023 at 01:26

Hello i will post the link Here. But my request is simple to understand if you think about it.
I just want my product image gallery (thumbnails) on the single product page to be able to display as dots, i have added a screenshot of an example similar to my request. I Only want this display for the mobile devices only.

I am looking into how to create a temporary admin account but for now this is the best i can describe my request. I just want to have dots (like the one in the screenshot) instead of the image gallery thumbnails.

This is the screenshot link for the issue i have: https://i.postimg.cc/YqqWBw5L/Screen-Shot-2023-05-20-at-7-49-03-PM.png

The Screenshot link for my request is: https://i.postimg.cc/pV3MJcG3/research-media-file-b88979b7f433b945b4e864c5cd9f684a.jpg

Please contact administrator
for this information.

#357321 Copied
Rose Tyler

Support staff

May 21, 2023 at 07:55
Hello Devine721,

Thank you for your response.

By default, there is no such option. You can post a request to our dev team via this page – https://www.8theme.com/taskboard/
If it receives enough votes from other customers, our development team will consider adding new settings in one of the upcoming updates.

Right now, the next custom CSS code can be used to change the size of thumbnails:
```
.single-product .swiper-container-grid .swiper-slide {
    padding: 0px !important;
    border-radius: 100px !important;
    max-width: 10px !important;
    max-height: 10px !important;
    margin: 5px !important;
}
```
(Theme options > Theme custom CSS > Mobile area).

We hope this information is helpful.

Best regards,
8Theme’s Team
#357342 Copied
devine721

Participant

May 24, 2023 at 02:20

Ok i understand that this request is not default on the theme, but i think its a good request to consider.

However, i will try this code and see how it can help.
By the way, is this code for the mobile version of the single product page?
I need the code for the actual single product page.

#357485 Copied

Tony Rodriguez

Support staff

May 24, 2023 at 05:47

Hello, @devine721,

Thank you for understanding that the request is not a default feature on the theme. We appreciate your suggestion, and we agree that it could be a valuable addition.

In the meantime, We encourage you to try the provided code and see how it can assist you. If you encounter any difficulties or have further questions, please don’t hesitate to reach out. We are here to help.

And Yes the above code will only work on the mobile version of the site.

Best regards,
8Theme’s Team

#357495 Copied

devine721

Participant

May 27, 2023 at 04:05

Hello, thank you for your great input.

Thank you for the code, it has done some justice to my request.
But i would like to add some minor request to add to the code further.
I would like the thumbnails to be able to be aligned to the center of the main image display. And I would also like the thumbnails to be able to be colored (solid).

Here is the example that illustrate my attempt to align the thumbnails to center, the way i want it: https://i.postimg.cc/m2sDrXr9/Screen-Shot-2023-05-26-at-9-06-00-PM.png

Please contact administrator
for this information.

#357817 Copied
Tony Rodriguez

Support staff

May 27, 2023 at 05:31
Hello @devine721,

To center the thumbnails of the image gallery on the mobile version, please try using the following CSS code in XStore >> Theme Settings >> Theme Custom CSS >> Global CSS, and then clear the browser cache to view the changes.
```
@media(max-width: 767px){
.single-product .et_product-block.etheme-woocommerce-product-gallery .swiper-container.slider .swiper-wrapper.thumbnails-list.thumbnails {
    justify-content: center !important;
}
}
```
And to make them sharp color, you should use the below given CSS code.
```
.single-product .swiper-container.swiper-control-bottom.second-initialized li.thumbnail-item {
    opacity: 1 !important;
}
```
Best Regards,
8Theme’s Team
#357824 Copied
devine721

Participant

May 30, 2023 at 01:50

Hello Thanks once again

I have add the first css to center the thumbnails and it was successful. However, the second css to make the color sharp was unsuccessful, and i need your help to complete it.

Additionally, it will be great to have the thumbnails to hover with color when the pointer is on it. And when the specific thumbnail is clicked it will stay active with the hover color.

Example: the thumbnail color is gray, and the hover color is black, and active color is black.

Regards.

#358027 Copied

Tony Rodriguez

Support staff

May 30, 2023 at 06:51

Hello @devine721,

Thank you for your response. We have reviewed your website again and noticed that the product gallery thumbnails are now clearer.

If you feel that I am not understanding your issue, please provide screenshots with annotations so that I can review them and provide assistance accordingly.

Best Regards,
8Theme’s Team

#358041 Copied

devine721

Participant

June 1, 2023 at 01:55

Hello
I have not seen the effect of the product gallery opacity from my devices, and i have cleared all cache.

However, i would like to see the effect so that i can know if they are solid color as much as i want it to show.

Also, i would need the css or code to have any selected product thumbnail (correlated with the displayed image) to show a highlighted color. i will place an example screenshot below. I want the product thumbnails image/dots to show like the one between the two red lines in the screenshot.
Regards.

Example image: https://i.postimg.cc/pV3MJcG3/research-media-file-b88979b7f433b945b4e864c5cd9f684a.jpg

#358328 Copied
Rose Tyler

Support staff

June 1, 2023 at 14:23
Hello Devine721,

Thank you for your response.

Please add the next code in Theme Options > Theme custom CSS > Mobile:
```
.single-product .swiper-container-grid .swiper-slide {
    background: #888;
}
.single-product .swiper-container-grid .swiper-slide img {
    opacity: 0;
    visibility: hidden;
}
.single-product .swiper-container-grid .swiper-slide.active-thumbnail {
    background: #000;
}
```
Also, fix the code here → https://prnt.sc/RQvsLyYZ0D4B with same proportions of 10px https://prnt.sc/f4DkvPmeTv0i

In case you cannot make the changes and make it work normally, please, provide us with temporary wp-admin + ftp access and we will fix your custom CSS + write the additional one we describe above.

Best Regards,
8Theme’s Team
#358385 Copied
devine721

Participant

June 2, 2023 at 01:11

Thank you for the response and assistance.

This request is done, i was able to complete my objective, thanks to your unwavering support. I am really pleased with the outcome and it was exactly what i had in mind.. Thanks for all the input and assistance. Regards.

#358407 Copied

Tony Rodriguez

Support staff

June 2, 2023 at 06:12

Hello @devine721,

We are delighted to have you here. If you are willing, we would greatly appreciate it if you could leave a 5-star rating for our Theme and Customer and Technical Support on ThemeForest at the following link: http://themeforest.net/downloads. Doing so would enable us to release more updates and provide dedicated support in the future. It would be a great encouragement for our work.

Thank you for reaching out to us. Have a wonderful day!

This topic is now closed.

Best Regards,
8Theme’s Team

#358417 Copied
Tagged: mini dots, product image gallery, thumbnails, woocommerce themes, wordpress woocommerce
Viewing 14 results - 1 through 14 (of 14 total)

The issue related to '‘Product image gallery thumbnails as mini dots’' has been successfully resolved, and the topic is now closed for further responses

Product image gallery thumbnails as mini dots

Recent Topics

Helpful Topics

Useful links WooCommerce & WordPress

Browse by popular tags:

Explore our best WordPress WooCommerce Themes collection