How to change size of Add to Cart button on collection cards.

Store Design
, ,

Topic summary

A user is experiencing inconsistent button sizing on product collection cards. Products without variants display an “Add to Cart” button that appears larger than the “Choose variant” button on other products, despite applying CSS to standardize dimensions at 60% height.

Initial Problem:

  • CSS targeting .card-wrapper .card__content .quick-add__submit with height: 60% and min-height: 60% wasn’t working uniformly
  • Multiple community members requested the store URL to investigate

Solution Provided:
BSS-TekLabs identified the issue and provided a fix:

  • Add CSS to base.css or theme.css file:
.quick-add product-form {
    min-height: 60%;
    height: 60%;
    display: grid !important;
}

Follow-up Issue:
After implementing the solution, a new problem emerged with disabled/out-of-stock buttons displaying incorrectly. BSS-TekLabs suggested additional CSS to hide disabled buttons and remove hover effects, but the user wants the boxes visible while indicating stock status.

Status: Partially resolved - main sizing issue fixed, but refinement needed for out-of-stock product display.

Summarized with AI on November 7. AI used: claude-sonnet-4-5-20250929.
1

I have made a design on where I want all the buttons to look the same. Here on the picture you can see all buttons has been small exepct for the left one. The only difference on this product is that it has no “variant” so its directly displaying the “Add to cart” instead of “Choose variant”. I have changed so both of the have the same word now.

Why doesnt down below code change the height of the left one to be the same?

henryb45_1-1721822251283.png

.quick-add__submit {
padding: 0.8rem;
box-sizing: border-box;
background-color: #EC3F3F;
color: #FFFFFF
}

.card-wrapper .card__content .quick-add__submit{
min-width: 35% !important;
width: 35% !important;
min-height: 60% !important;
height: 60% !important;
font-size: 12px !important;
}

1 Like
2

Hello @henryb45

Please share store url

1 Like
3

Hello @henryb45
Please provide url.

1 Like
4

Sent DM, Cant have it public

5

Hey @henryb45

Welcome to Shopify Community! Can you share your Store URL so I can have a look on it? Also, if you have password enabled then please share the password as well. Your cooperation would be greatly appreciated.

Best Regards,
Moeed

1 Like
6

Sent DM, Cant have it public!

7

Sent you a DM aswell, thanks for checking

8

Hello @henryb45 , Please share your store URL and password.
So that I will check and let you know the exact solution here.

1 Like
9

Thanks alot, sent a DM

10

Hi
If you will delete the – > height: 60% !important;
from your code.

.card-wrapper .card__content .quick-add__submit{
min-width: 35% !important;
width: 35% !important;
min-height: 60% !important;
height: 60% !important;
font-size: 12px !important;
then all the buttons will align themselves equally,
check screenshot

If this was helpful, hit the like button and mark the job as completed.
Thanks

11

I dont want it to have 100% height. I want it to be 60% height on all of them. I know it works if they all have 100%. But I want them all to be at 60% and not 100%.

12

Hello @henryb45 .
Our team is ready to help you.
Please share your website address and access password (if necessary) so that we can check and assist you.

1 Like
13

Thanks, I sent DM

1 Like
14
  • Here is the solution for you @henryb45
  • Please follow these steps:

step.png
step.png1865×854 125 KB

  • Then find the base.css or theme.css file.
  • Then add the following code at the end of the file and press ‘Save’ to save it.
.quick-add product-form {
     min-height: 60% !important;
    height: 60% !important;
    display: grid !important;
}
  • Here is the result you will achieve:

BSSTekLabs_0-1721825302510.png
BSSTekLabs_0-1721825302510.png1593×752 203 KB

  • Please press ‘Like’ and mark it as ‘Solution’ if you find it helpful. Thank you.
15

Thats solved it! Do you also know why this one gets like this?

henryb45_0-1721825933201.png
henryb45_0-1721825933201.png1118×476 185 KB

1 Like
16 
.form .button:disabled {
     display: none !important;
}

BSSTekLabs_0-1721827206460.png
BSSTekLabs_0-1721827206460.png1701×885 218 KB

  • Please press ‘Like’ and mark it as ‘Solution’ if you find it helpful. Thank you.
17

Can you try add more code

.button:not([disabled]):hover:after {
     box-shadow: none !important;
}
  • Please press ‘Like’ and mark it as ‘Solution’ if you find it helpful. Thank you.
18

I still want the boxes there aligned but want them to say out of stock or something.