Return to previous page

Adjusting the quantity style on shop page, main page and single product page

This topic has 4 replies, 2 voices, and was last updated 8 months ago ago by Tony Rodriguez

Liva

Participant

September 4, 2023 at 19:13

Hello,

I want to make some changes on the quantity style but I couldn’t see how to do it. It is possible to change the shape of the button with single product builder but it is not enough for me. I have a couple of issues:

1. Quantity input is different on shop page (https://prnt.sc/jZjh3znHUGyz) and the single product page (https://prnt.sc/BCs2e_UVKXEn). I think the design on the single product page is better since suffix font size is smaller. It will be perfect if we can make all quantity buttons the same as the one on the single product page (like this: https://prnt.sc/BCs2e_UVKXEn).

2. Is it possible to change the colors of plus, minus, number, suffix and the borders? If yes, can we make all of them black (#000000)?

I am looking forward to hearing from you soon. Admin info is in the private content area. Have a great day!

Please, contact administrator
for this information.

#366608 Copied Theme version: 9.1.13 WooCommerce version: 8.0.3

3 Answers
Tony Rodriguez

Support staff

September 5, 2023 at 08:33
Hello, @Liva,

We hope this message finds you well. To address the issue you are experiencing, we kindly request you to follow the steps outlined below:

1. Copy the CSS codes provided below.
2. Navigate to Xstore >> Theme Options >> Theme Custom CSS >> Global CSS on your site.
3. Paste the copied CSS codes into the Global CSS section.
4. Clear your browser cache and revisit your site.

We are confident that these steps will resolve your issue.

Here are the CSS codes:

1. To smaller the size of the suffix.
```
.quantity-wrapper .quantity span.quantity-suffix {
    font-size: 10px !important;
}
```
2. To make all the content and border color black.
```
.quantity-wrapper .quantity span.minus {
    border-color: #000 !important;
}
.quantity-wrapper .quantity input {
    border-color: #000 !important;
}
.quantity-wrapper .quantity span.quantity-suffix {
    border-color: #000 !important;
   color: #000 !important;
}
.quantity-wrapper .quantity span.plus {
    border-top-color: #000 !important;
    border-bottom-color: #000 !important;
    border-right-color: #000 !important;
}
```
We appreciate your patience and cooperation in this matter. Please do not hesitate to contact us if you need further assistance.

Best Regards,
8Theme’s Team
#366630 Copied
Liva

Participant

September 5, 2023 at 09:57

Hi,

Thanks for your efforts. First solution works perfect. However, the second solution only works for the home page and the main shop page. The colors in the single product page are still not black (https://prnt.sc/C-UUEDRad5Dh). Is it possible to make them black too?

#366641 Copied
Tony Rodriguez

Support staff

September 5, 2023 at 13:13
Hello, @Liva,

Thank you for your response.

To address your issue, please navigate to XStore>>Theme Options >> Theme Custom CSS >> and insert the following CSS code in Global CSS.

To alter the color of the plus and minus icons, use the following CSS code:
```
.single-product .quantity-wrapper span {
color: black !important;
}
```
To modify the color of the border, use the following CSS code:
```
.single-product .quantity-wrapper.type-circle span, .quantity-wrapper.type-square span {
border: 1px solid black !important;
}
```
Please adjust the color according to your needs. We hope this will resolve your issue.

Best Regards,
8Theme’s Team
#366668 Copied
Tagged: main page woocommerce quantity changes, quantity adjustment woocommerce themes, shop page quantity customization woocommerce, single product page quantity settings, woocommerce quantity style adjustments, woocommerce wordpress quantity control, wordpress woocommerce product quantity
Viewing 4 results - 1 through 4 (of 4 total)