Customizing WooCommerce Quantity Input Styles
This documentation provides detailed guidance on how to enhance your online store’s user experience by customizing the WooCommerce quantity input styles in Breakdance. This includes modifying the quantity input fields on product pages and within both the mini cart and the main cart, ensuring a seamless and visually appealing shopping experience for your customers.
WooCommerce Quantity Input Global Styles
- Start by accessing the Breakdance Global Styler from the WordPress admin bar under Breakdance > Edit Global Styles.
- From the global styler, navigate through Global Settings > WooCommerce > Forms > Fields > Advanced > Quantity Input. Here, you’ll see options for modifying the styles of quantity inputs.
Styling the Buttons
- Click on ‘Buttons’ and opt for the ‘No Overlap’ choice. This decision moves the quantity buttons outside the primary text input, separating these elements for a distinct look.
- Eliminate any space between the buttons and the text input by setting the ‘Between Inputs’ space to zero.
- Next, focus on the button background. Opt for a subtle color, like a light gray with a hint of blue, to enhance visual appeal. Apply this color as the background and set the border radius of the buttons to ‘0’ for a consistent square-cornered look.
- To maintain a cohesive design language, employ the same color for the borders of your quantity input fields. Copy the chosen color code, navigate to WooCommerce > Forms > Fields, and under ‘Borders’, paste the code, ensuring the border width is set to 1 pixel.
Additional Notes
These customizations, while seemingly minute, can significantly impact the shopper’s experience, making the process not only intuitive but also visually harmonious. The adjustments made here are global, affecting every instance where quantity inputs appear. It’s encouraged to experiment with various styles, aligning with your brand’s identity and your customers’ expectations.
