Return to previous page

How to put the background color on the arrows on the product page ?

This topic has 8 replies, 3 voices, and was last updated 1 years, 10 months ago ago by Tony Rodriguez

Dionizio Find

Participant

January 10, 2023 at 03:57

how to put the background color on the arrows on the product page, and also on the carousel of related products? Why both only appear the option to customize the size of the arrows

#343411 Copied Theme version: 9.0.1 WooCommerce version: 7.2.2

7 Answers
Tony Rodriguez

Support staff

January 10, 2023 at 05:58
Hello, @Dionizio Find,

In order to solve your issue please copy and paste the below given CSS code to XStore >> Theme Settings >> Theme Custom CSS >> Global CSS and check back to your site now after removing the browser cache.

You can change the color in the given code as per your requirements.
```
.swipers-couple-wrapper .vertical-thumbnails-wrapper .swiper-custom-left:before {
    color: red !important;
}
.swipers-couple-wrapper .vertical-thumbnails-wrapper .swiper-custom-right:before {
    color: red !important;
}
.arrows-hovered>.swiper-container .swiper-custom-left:before {
    color: red !important;
}
.arrows-hovered>.swiper-container .swiper-custom-right:before {
    color: red !important;
}
```
Regards 8Themes Team.
#343418 Copied
Dionizio Find

Participant

January 10, 2023 at 12:45

Hello tony, how are doing? so I don’t want to just change the arrow colors to red. I want to put a round white background color and blue arrow color.

#343474 Copied

Rose Tyler

Support staff

January 10, 2023 at 16:51

Hello,

Please go to Theme Options > Styling – https://prnt.sc/Hu7rC0jBKj5h and select the color

Regards

#343532 Copied

Dionizio Find

Participant

January 10, 2023 at 18:52

OK. I tried but it didn’t work. I think that only in the same css code is capable. Could you help me, please. I want arrows with background and in the product gallery, when changing product images

#343561 Copied
Tony Rodriguez

Support staff

January 11, 2023 at 05:48
Hello, @Dionizio Find,

Ok then please remove the previous CSS that I provided to you and try with the below given one:
```
.swipers-couple-wrapper .vertical-thumbnails-wrapper .swiper-custom-left:before {
    color: blue !important;
    background-color: white !important;
    width: auto !important;
    padding:5px !important;
    border: 1px solid !important;
    border-radius: 100% !important;
}
.swipers-couple-wrapper .vertical-thumbnails-wrapper .swiper-custom-right:before {
    color: blue !important;
    background-color: white !important;
    width: auto !important;
    padding:5px !important;
    border: 1px solid !important;
    border-radius: 100% !important;
}
.arrows-hovered>.swiper-container .swiper-custom-left:before {
    color: blue !important;
    background-color: white !important;
    width: auto !important;
    padding:5px !important;
    border: 1px solid !important;
    border-radius: 100% !important;
}
.arrows-hovered>.swiper-container .swiper-custom-right:before {
    color: blue !important;
    background-color: white !important;
    width: auto !important;
    padding:5px !important;
    border: 1px solid !important;
    border-radius: 100% !important;
}
```
The result will appear like this: https://ibb.co/58hwH0f

Regards 8Themes Team.
#343584 Copied
Dionizio Find

Participant

January 11, 2023 at 18:05

Thank you!

#343730 Copied

Tony Rodriguez

Support staff

January 11, 2023 at 18:41

Hello, @Dionizio Find,

Sound’s Good!! that my proposed solution helped you in solving your issue.

Feel free to write us back anytime, we are always here to help you.
Thanks for contacting us.

Have a nice day. 🙂
Topic Closed.

Regards 8Themes Team.

#343739 Copied
Tagged: arrows, background color, best selling, how to, product page, woocommerce themes
Viewing 8 results - 1 through 8 (of 8 total)

The issue related to '‘how to put the background color on the arrows on the product page ?’' has been successfully resolved, and the topic is now closed for further responses

How to put the background color on the arrows on the product page ?

Recent Topics

Helpful Topics

Useful links WooCommerce & WordPress

Browse by popular tags:

Explore our best WordPress WooCommerce Themes collection