Add to cart button CSS problem ( variable product )

please see this video – 🌎https://www.loom.com/share/664e583b604a498084686d9e6023df45?sid=35dfd562-c138-4969-a786-160843556d1f

🌎https://sugondipriyo.com/product/attar-t-shirt-afgani-tupi-combo/
============================================
please fix this css problem – I add some CSS wordmart css mobile view option everything is fine but when I click variation selection its smaller automatically for add to cart button, please fix this
===================================
just give me right css for this button

here is login details.

Hello,

Sorry, but your video is not working.

Do you mean about this issue? https://gyazo.com/89e4a6e161a57a8f924a891180e6d709 , after selecting the button becomes wider and the font size smaller.

Looking forward to hearing back from you!

Kind Regards

yes – , after selecting the button becomes wider and the font size smaller. exactly How to solve it just give me way

Hello,

I see that you have 2 custom CSS codes for the button, but their values are different, therefore when you click on the swatch the button changes. You need to set the same properties here: https://take.ms/sIvAo , set the same padding and font size for both codes and then clear the cache and recheck the issue.

Kind Regards

I set it as your said but its not working -https://prnt.sc/D0QYXf6v0oaD

Hello,

Add a black border with the same height to the second custom CSS and recheck the issue: https://take.ms/7LJ0l

Then it will have such work: https://gyazo.com/62fdcf58b0fec2eea6e6ee29bcac3798

Kind Regards

dont work after adding this – border-bottom: 4px solid #927526; this class -button.single_add_to_cart_button.button.alt

the add to card button its shrinking that really bad in view

Hello,

You didn’t close the property here: https://take.ms/id3S1

So I have closed it and now it works well, here is a video: https://gyazo.com/80b89a937ae7375ea03305c7121472d9

Kind Regards

Oh my mistake thank a million 🥰🥰🥰

please help one more think – in my shop page both mobile and desktop view the add to card button padding is not same as home page I try to same styple as like next button
see it -https://prnt.sc/rbmJu9YQVwif ( computer view )
– https://prnt.sc/xahuUujX02ts ( mobile )

so how to same style like next button actually i would like same 2 button

when try to increase its padding as next button its conflict the home page style add to card button

so how to same sytle ( padding and height ) for 2 button – home page ,shop page , realted product page

please help me

Hello,

You can try to use the below code, paste it into the “Global Custom CSS” area in Theme Settings -> Custom CSS.

.product-grid-item .add-to-cart-loop {
    width: 100%;
}

.product-grid-item .custom-checkout-btn {
    width: 100%;
    margin: 0 !important;
}

Desktop: https://take.ms/vwR2uw
Mobile: https://take.ms/b2zkA

Kind Regards

[Author]

Posts