quantity input look weird with astra theme

This thread is resolved. Here is a description of the problem and solution.

Problem:

I am experiencing an issue where the Astra theme displays the Toolset Add to Cart quantity input with up/down icons on the top and bottom, instead of the expected right-side alignment.

Solution:

Go to your theme’s custom CSS section and replace the current padding code with this snippet:

body.woocommerce form.cart .wooviews-template-quantity input[type=number].input-text.qty.text { padding-left: 40px; }

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

This topic contains 3 replies, has 1 voice.

Last updated by jensH-2 2 months, 3 weeks ago.

Assisted by: Christopher Amirian.

Author

Posts

March 16, 2025 at 12:29 pm #2800996

jensH-2

Hi there,

I am trying to use the the recommended Astra theme and Toolset Add to Cart Button, but the quantity input looks weird. It works fine with standard theme Twenty Twenty-Five.

Link to a page where the issue can be seen:
hidden link

I expected to see a quantity box with a numer and up/down icons on the right side.

Instead, I got a quantity box with up/down icons on the top and bottom.

Regards,
Jens

March 16, 2025 at 3:45 pm #2801026

Christopher Amirian

Supporter

Languages: English (English )

Hi Jens,

Welcome to Toolset support. Would you please add the CSS code below to your theme?

html .woocommerce .quantity .minus {
  border-right: 1px solid var(--ast-border-color);
}

.woocommerce [data-woocommerce-views-add-to-cart] form.cart .wooviews-template-quantity {
  display:flex;
}

html body.woocommerce [data-woocommerce-views-add-to-cart="85e092e73d1c972214a741cf0aed7fa0"] form.cart .wooviews-template-quantity input[type=number] {
  padding-left: 40px;
}

That should fix the issue.

Thanks.

March 18, 2025 at 11:14 am #2801261

jensH-2

Thanks, Christopher!

Looks like the 3rd part (padding-left) isn´t working on every product page because of the variable "85e092e73d1c972214a741cf0aed7fa0".

Regards,
Jens

March 18, 2025 at 12:40 pm #2801277

Christopher Amirian

Supporter

Languages: English (English )

Hi,

Yes you are correct, please replace that part with this code:

body.woocommerce form.cart .wooviews-template-quantity input[type=number].input-text.qty.text {
  padding-left: 40px;
}

Thank you.

March 18, 2025 at 8:36 pm #2801327

jensH-2

Thanks, Christopher!

Regards,
Jens