[Resolved] Add css class to woocommerce checkout page

[Daniel]

Hi!

I don’t know if this is something related to WooCommerce or GeneratePress.
I have merged the WooCommerce cart with the checkout page but some css styles needed for the quantity buttons in the cart doesn´t load in the checkout page.

I’ve found that in the cart page the html <article> tag has the class do-quantity-buttons and this class is what I need to be in the checkout page in order to display the quantity buttons correctly.

So is it possible to add that class to the checkout page or is it another way to load all the css needed for the cart table in the checkout page?

Thanks!
Daniel

[David]

Hi there,

can you share a link to a produce that i can add to the cart so i can see the checkout page ?

[Daniel]

Hi David!

Here is a test site with the cart table in the checkout page. You’ll see the quantity button correctly in the cart page but broken in the checkout page.

https://www.netropol.es/woodemo

[David]

Can you check that link as its just an empt cart for me.

[Daniel]

Sorry, can you please try again?

[Ying]

Hi Daniel,

Try add this CSS:

.woocommerce .quantity.buttons-added {
    display: flex;
    align-items: center;
}

[Daniel]

Thanks Ying, the quantity button now looks correct.

In the quantity input. when I hover the mouse over the number, the plus and minus arrows appear. Is there something I can do to hide them?

[Ying]

Unfortuanly I’m not aware of a way to hide them.

Maybe you can reach out to Woocommerce support to check if they have a solution 🙂

[Daniel]

I’ve found a css solution to hide the arrows. I’ll leave it here in case anyone needs it:

/* Chrome, Safari, Edge, Opera */
.woocommerce .quantity.buttons-added input::-webkit-outer-spin-button,
.woocommerce .quantity.buttons-added input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
.woocommerce .quantity.buttons-added input[type=number] {
  -moz-appearance: textfield;
}

[Ying]

Thanks for sharing 🙂

[Author]

Posts