Customizing the Checkout Button and Checkout Page

Hi @Zoey

You didn't say how you wanted to change the cart's "Checkout" button, but here's an example of how you can change the padding to make it smaller:

body .checkout button.CheckoutButton-checkoutButton-3yWY2 {
    padding: .7em 1.1em;
}

By default, there's 1em of padding top and bottom, and 2.5em on the sides.

You cannot customise the font (or very much else) on the Checkout page. Only the following settings are available for the checkout, and you cannot use CSS or other code to style it.

Hello Paul,

Is there a way to add new text on the Check out page?

I have a bilingual website and I would like to add French texts next to the English ones.

I'm using Rally template.

Thanks.

Ewa.

@Ewa This isn't possible due to restrictions in place.

See my post here about translating the checkout page:

Hi Zoe and Paul,

In the v7.0 Brine family, I have managed to style the checkout button using the following code:

body .checkout button.CheckoutButton-checkoutButton-3yWY2 {
   display:block;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color:#231f74;
  font-weight: 700;
  font-style: normal;
  line-height: normal;
  opacity:1;
  text-align: center;
  width: auto;
  height: auto;
  text-decoration: none;
  padding: 9px 20px;
  background-color: white;
  border-radius: 3px;
  transition: .1s opacity linear;
  cursor: pointer;
  border-color: #231f74;
  border-width:2px;
  border-style:solid;
  margin-top:10px;
}
body .checkout button.CheckoutButton-checkoutButton-3yWY2:hover {color: #fff; background-color: #231f74;}

I'm using it at https://skywavegin.com