Return to previous page

How to make “Slider Arrows” for product navi more clear

This topic has 7 replies, 3 voices, and was last updated 1 years, 11 months ago ago by NelsonTsai

NelsonTsai

Participant

March 18, 2023 at 07:11

Hello,

The default slider arrows for product navigation is not clear on mobile phone. It is thin black style.
I changed the background color, but no effects on Google Pixel 4XL chrome.
Is there any methods I can adjust the style of Arrow, especially make it visually prominent on mobile phone?

Thank you.

#350409 Copied Theme version: 9.0.4

6 Answers
Tony Rodriguez

Support staff

March 18, 2023 at 08:30
Hello @NelsonTsai,

In order to make the Arrow style more visually prominent on mobile phones, we recommend that you copy and paste the following CSS code into XStore >> Theme Options >> Theme Custom CSS >> Global CSS. After doing so, please clear your browser cache and check back to your site. The result should look like the image provided at the following link: https://postimg.cc/FdZrYsZg.

@media(max-width: 767px){ .arrows-hovered>.swiper-container .swiper-custom-right, .arrows-hovered>.swiper-container .swiper-custom-left { background-color: #000 !important; color: #fff !important; } }

Please note that you can change the color code in the CSS as per your requirements.

Best Regards,
8Theme’s Team
#350417 Copied
NelsonTsai

Participant

March 18, 2023 at 14:51

Hello,

The CSS you provided works for single product gallery images.
What I needed is for product images from woo’s product query loop.
Sorry not explaining clear in my 1st post.

Thank you.

#350427 Copied

Rose Tyler

Support staff

March 19, 2023 at 08:39

Hello @NelsonTsai,

Thank you for the reply.

We kindly request that you provide us with a URL to the page on your website that contains woo’s product query loop, as well as a screenshot and the mentioned arrow.

You can use screenshot tools such as Lightshot or Gyazo and share the links here. Alternatively, you can use a file-sharing service such as WeTransfer https://wetransfer.com/.

Thank you for your cooperation and we look forward to hearing from you soon.

Kind Regards,
8theme team

#350448 Copied

NelsonTsai

Participant

March 19, 2023 at 10:16

Hello,

I compiled the URLs with cellphone’s screenshot to a PDF posted in private area.

BR,

Please contact administrator
for this information.

#350468 Copied
Rose Tyler

Support staff

March 19, 2023 at 10:51
Hello @NelsonTsai,

Thank you for the reply.

Please change the code https://prnt.sc/EnTZr1mR9zXG to:

@media(max-width: 767px){ .arrows-hovered>.swiper-container .swiper-custom-right, .arrows-hovered>.swiper-container .swiper-custom-left, .hover-effect-slider .sm-arrow:before, .swiper-custom-left:before, .swiper-custom-right:before { background-color: #000 !important; color: #fff !important; padding: 10px; } }

Kind Regards,
8theme team
#350470 Copied
NelsonTsai

Participant

March 19, 2023 at 11:10

Hello,

Just tested, and worked well.
Thank you.

#350472 Copied
Tagged: clear design, product navi, slider arrows, templates, user friendly, woocommerce, wordpress
Viewing 7 results - 1 through 7 (of 7 total)

The issue related to '‘How to make “Slider Arrows” for product navi more clear’' has been successfully resolved, and the topic is now closed for further responses

How to make “Slider Arrows” for product navi more clear

Recent Topics

Helpful Topics

Useful links WooCommerce & WordPress

Browse by popular tags:

Explore our best WordPress WooCommerce Themes collection