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, 9 months ago ago by NelsonTsai

  • Avatar: 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
    Avatar: Tony Rodriguez
    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
    Avatar: NelsonTsai
    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
    Avatar: Rose Tyler
    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
    Avatar: NelsonTsai
    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
    Avatar: Rose Tyler
    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
    Avatar: NelsonTsai
    NelsonTsai
    Participant
    March 19, 2023 at 11:10

    Hello,

    Just tested, and worked well.
    Thank you.

    #350472 Copied

  • Tagged: , , , , , ,

  • 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

Helpful Topics

Useful links WooCommerce & WordPress

Unleash your online potential

Explore our best WordPress WooCommerce Themes collection

lazy-placeholder
Photographer – WordPress WooCommerce Theme
lazy-placeholder
Kids Toys Store – WordPress WooCommerce Theme
lazy-placeholder
Poster – WooCommerce Theme
lazy-placeholder
Royal – WooCommerce WordPress Theme
lazy-placeholder
WooPress – WooCommerce WordPress Theme
lazy-placeholder
Spa – WooCommerce Theme
lazy-placeholder
Onepage Store – WooCommerce Theme
lazy-placeholder
Glasses Store – WordPress WooCommerce Theme
lazy-placeholder
Furniture Store 03 – WordPress WooCommerce Theme
lazy-placeholder
Grocery Mega Market – WordPress WooCommerce Theme

See All Templates

We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.