Add to Cart Button

Hi there, my add to cart button looks obnoxiously big with the text being too small. Would someone please help me add additional CSS where I can change the button padding and font size within?

And also how to change the slug from https://www.upbeatcoffee.com.au/shop/p/earth-sky-planter-4awkk-s85xf to  https://www.upbeatcoffee.com.au/colddrip

Many thanks!!

You can try adding this to your Custom CSS:

.ProductItem-details .sqs-add-to-cart-button-wrapper .sqs-add-to-cart-button {
    width: 50%;
}

This button is a "primary button" in the styles menu, so I suggest adjusting that font size and padding as well.

You can't change the URL structure of a product page in that way. You could make a page with that URL and then add a product block to the page.

Hi thanks for your reply ! I tried to apply it and checked but it made it better, but the padding is quite large. Here is a screenshot, sorry for the button not being in desktop view when opening the right Inspect panel - I am currently working on a laptop.

The top-padding and bottom-padding doesn't seem to affect the Style.

Quote

.ProductItem-details .sqs-add-to-cart-button-wrapper .sqs-add-to-cart-button {
   width: 50%;
   padding-top: 0.2em;
  padding-bottom: 0.2em;
}

Add to Settings > Advanced > Code Injection > Header

<style>
  div.sqs-add-to-cart-button {
    padding: 10px 20px !important;
}
</style>