Change the appearance of the quantity selector

[esentoglobal]

Hello WoodMart Support Team,

I have successfully styled the quantity selector on my single product page to match my brand’s design, and it looks perfect. Attached you have a screenshot of the result.

This is the CSS code I used, which works perfectly for the single product page:

/* 1. Stilul containerului: Colțuri drepte, margine exterioară */
.single-product-page form.cart .quantity {
    border: 1px solid #121212;
    display: flex;
    background-color: #ffffff;
    /* ELIMINAT: border-radius, pentru a avea colțuri ascuțite */
}

/* 2. Anularea tuturor marginilor de pe elementele din interior */
.single-product-page form.cart .quantity input {
    border: none !important;
    background-color: transparent;
    border-radius: 0 !important; /* Asigură că niciun element interior nu are colțuri rotunjite */
}

/* 3. Stilul butoanelor + și - */
.single-product-page form.cart .quantity .button {
    cursor: pointer;
    transition: background-color 0.3s ease;
    color: #121212;
    font-size: 1.5em;
    width: 45px;
}

My problem is: I want to apply the exact same visual style to the quantity selectors in the mini-cart and on the main cart page, but they have a different HTML structure and CSS classes, so my code doesn’t work there.

Could you please provide me with the correct CSS selectors needed to style the quantity selectors in the mini-cart and the cart page to look identical to the one on my single product page?

Thank you for your time and help!

• This topic was modified 2 weeks, 6 days ago by esentoglobal.
• This topic was modified 2 weeks, 6 days ago by esentoglobal. Reason: Forgot to attach screenshot

Attachments:

You must be logged in to view attached files.

Hello,

Can you please share the page URL so I can check and give you a possible CSS code?

Best Regards,

You have the link belowYou can access a product page here: https://esento.ro/produs/classic-wooden-chair/
Or you can just enter esento.ro. The site is under construction now.

Thank you,
Gabriel

Hello,

For the mini cart quantity style, Try to add the following custom css code in Theme Settings > Custom CSS:

.cart-info div.quantity {
    border: 1px solid #121212;
    border-radius: 0; /* sharp corners */
    padding: 0 5px;
    height: 36px;
} 

.woocommerce-mini-cart .cart-info .quantity input.qty {
    border: none !important;
    background: transparent;
    border-radius: 0 !important;
    padding: 0 10px;
    text-align: center;
    width: 40px;
    height: 100%;
    font-size: 14px;
    color: #121212;
}

For the Cart Page quantity style, Try to add the following custom css code in Theme Settings > Custom CSS:

/* Plus and minus buttons */
.woocommerce-mini-cart .cart-info .quantity .plus,
.woocommerce-mini-cart .cart-info .quantity .minus {
    background: transparent;
    border: none;
    color: #121212;
}

div.wc-block-components-quantity-selector {
    border: 1px solid #121212;
    border-radius: 0;
    background-color: #ffffff;
}

div.wc-block-components-quantity-selector input.wc-block-components-quantity-selector__input {
    border: none !important;
    color: #121212;
    width: 40px;
}

/* Plus and Minus buttons */
div.wc-block-components-quantity-selector .wc-block-components-quantity-selector__button {
    border: none;
    color: #121212;
    font-size: 1.2em;
}

Best Regards,

It’s solved and it works and looks great!
Thank you!

Hello,

You’re very welcome! If you need anything else, feel free to reach out!

Thanks for contacting us.
Have a great day.

Topic Closed.
Best Regards,

[Author]

Posts