Modify the Carousel arrow styles.
-
https://ibb.co/p6w072HS
The arrow style settings in the theme options are too basic. I’d like to know which CSS classes to target if I want to use CSS code to modify the arrow styles globally.
Hello,
Could you please clarify which aspects of the arrow style you would like to customize?
Also, please share the URL of the page where these arrows are displayed. So I will check and give you a possible CSS code.
Best Regards
You just need to tell me the specific global class name for Woodmart, and I will use AI to resolve the coding issues.
I have another question: how do I configure Carousel to display 2 columns and 2 rows on the mobile app? Currently, Carousel only displays 1 row by default, which is too few rows.
Hello,
01. WoodMart handles carousel navigation using standard global CSS classes and CSS variables. You can target these globally to customize background, icons, borders, size, and positions:
Key Global CSS Classes:
.wd-slider-arrows / .wd-nav-arrows— Main wrapper container for navigation arrows.
.wd-btn-arrow / .wd-arrow-prev / .wd-arrow-next— Target individual arrow buttons (Previous & Next).
.wd-btn-arrow:before— Targets the internal arrow icon glyph/font (\f122 or \f114).
02. If you want to keep the Carousel layout on Desktop/Tablet, but show 2 rows on Mobile:
Edit the product grid or carousel widget and in the style tab change the slides per view in mobile:
See the screenshot for better understanding:
https://postimg.cc/rDR3w7vk
Best Regards
I’m using the WPBakery page editor, and I don’t see the settings in your screenshot. Also, I want a 2-row, 2-column layout.
Hello,
Please see screenshots for better understanding:
https://postimg.cc/t7cQ9tFK
https://postimg.cc/dh8zRbp9
Best Regards
Your solution couldn’t display the products in two rows. I had to switch to using a Grid to display two rows.
Hello,
Yes, you are correct. The Carousel element is designed to display products in a sliding carousel, and the Slides per view option controls how many products are displayed horizontally at once.
For example, setting 2 slides per view on mobile will display 2 products side by side, but it does not create a 2-row × 2-column layout.
If you specifically need 2 columns and 2 rows simultaneously on mobile, using the Grid layout is the appropriate option, as you have already done.
Best Regards
.
