Product page – image arrows color and shape

I want to set the arrows on product page to be black on a transparent background, how can I do that?
Second problem is that the arrows don’t always look the same. How can I make them always be the same shape?
I tried with css code, but it didn’t work:
.slick-prev:before, .slick-next:before {
color: #000 !important;
}
.thumbnails.slick-slider {
background-color: #fff !important;
box-shadow:none
}

Attachments:

You must be logged in to view attached files.

Hello,

Here is a code for making the buttons transparent.

.single-product .woocommerce-product-gallery .slick-arrow {
    background-color: transparent;
}

The arrows don’t always look the same because the thumbnails have different width. Please navigate to Theme Settings -> Single product -> Images -> set e.g. 150px for the “Thumbnails image width” field.

https://take.ms/lJuBa

Kind Regards

[Author]

Posts