Styles and colors -> Carousel does not affect product page carousel

I want to improve the look of the carousel on the product page. However, the setting Theme settings -> styles and colors -> Carousel does not affect the product page carousel.
I would have expected that this would affect that as well.

Where are those settings available for the product page?

Hello,

Sorry to say that, Can you please share some screenshots where you want to change the carousel effect, so I can check and give you a possible solution?

Also, share the wp-login details of your site so I can check and give you a possible solution.

Best Regards,

Hi Aizaz,

I have paid to extend support for this question. I think the default, can you please share wp-login details, is quite exhausting. There is no reason to get my logon details for this topic. This is perfectly reproducible anywhere.

With respect to the carousel. The settings I tried changing was:
Theme settings -> Styles and colors -> Carousel

These settings however do not affect the carousel of the images gallery product pages (both desktop and mobile). This is the class of the carousel on the product page <div class=”wd-carousel-container wd-gallery-images”>

Hello,

These settings are for the carousel arrow. For these arrows, you need to use the custom css code. add the below Custom CSS code to Theme Settings > Custom CSS > Global Custom CSS.

.single-product .woocommerce-product-gallery .wd-arrow-inner {
    background-color: #333;
    color: #fff;
}
.single-product .woocommerce-product-gallery  .wd-arrow-inner:hover {
    background-color: #333;
    color: #fff;
}

If you have any questions feel free to contact us.

Best Regards,

THanks. How do increase the size of the arrow? and the size of the backround of the arrow?

Hello,

Please remove the previous code and add the below Custom CSS code to Theme Settings > Custom CSS > Global Custom CSS. change the value as per your requirements.

.single-product .woocommerce-product-gallery .wd-arrow-inner {
    background-color: #333;
    color: #fff;
    width: 40px;
    height: 40px;
 --wd-arrow-icon-size: 30px;
}
.single-product .woocommerce-product-gallery  .wd-arrow-inner:hover {
    background-color: #333;
    color: #fff;
}

Best Regards.

Thanks. It worked:)

Hello,

You’re very welcome! I’m glad I could help. If you need anything else, feel free to reach out!

Thanks for contacting us.
Have a great day.

Topic Closed.
Best Regards,

[Author]

Posts