Customize your checkout with custom CSS

In this help article, you’ll learn how to customize the CSS on your checkout pages. This helps you match your branding and website design perfectly.

How to add Custom CSS to a checkout page

1. Open your Checkout Page dashboard and click on the checkout you want to customize

2. Go to the Design and open the Custom CSS tab

Checkout editor view for the Custom CSS section

3. Write your CSS in the field and hit Save

Please note: We recommend only using the provided classes when applying styles.

Jump to a full list of classes below.

Common styling examples

Here are some common examples that you can apply to your pages.

Feel free to mix and match these styles as you need them.

Transparent page

.cp_card {
background-color: transparent;
}

Page background color

.cp_card {
background-color: red;
}

Remove rounded corners on page, variants, fields and buttons

.cp_card {
border-radius: 0;
}

.cp_variant-option {
border-radius: 0;
}

.cp_form-item input,
.cp_form-item textarea {
border-radius: 0;
}

.cp_pay-button-wrapper  button {
border-radius: 0;
}

Padding on page

.cp_card {
Padding: 32px; 
}

Rounded corners on page

.cp_card {
border-radius: 24px;
}

Rounded corners page, variants, fields and buttons

.cp_card {
border-radius: 24px;
}

.cp_variant-option {
border-radius: 24px;
}

.cp_form-item input,
.cp_form-item textarea {
border-radius: 24px;
}

.cp_pay-button-wrapper  button {
border-radius: 24px;
}

Large title

.cp_product-title {
font-size: 32px;
}

Large price

.cp_product-price {
font-size: 32px;
}

Large form fields

.cp_form-item input[type=text] {
padding: 16px;
}

Compact form fields

.cp_form-item input[type=text] {
padding: 2px 4px;
}

Large pay button

.cp_pay-button-wrapper button {
padding: 24px;
}

Compact pay button

.cp_pay-button-wrapper button {
padding: 8px;
}

Hide labels

.cp_form-item label {
display: none
}

Hide placeholders

.cp_form-item input::placeholder,
.cp_form-item textarea::placeholder {
color: transparent;
}

Full list of classes

Page

.cp_page {}

Pop-up

.cp_pop-up {}
.cp_pop-up-close {}

Checkout

.cp_checkout {}

Card

.cp_card {}

Button

.cp_button {}

Error

.cp_error {}

Loading

.cp_loading-container {}
.cp_spinner {}

Product

.cp_product-wrapper {}
.cp_product-logo {}
.cp_product {}
.cp_product-content {}
.cp_product-title-wrapper {}
.cp_product-title-container {}
.cp_product-title {}
.cp_sold-by-wrapper {}
.cp_sold-by-seller {}
.cp_product-price-wrapper {}
.cp_product-price {}
.cp_product-interval {}
.cp_sold-out {}
.cp_product-description-wrapper {}
.cp_product-description {}
.cp_product-image {}

Divider

.cp_divider {}

Variants

.cp_variants {}
.cp_variant {}
.cp_variant-label {}
.cp_variant-items {}
.cp_variant-item {}
.cp_variant-name {}
.cp_variant-price-wrapper {}
.cp_variant-price {}
.cp_variant-soldout {}

Checkout form

.cp_form-wrapper {}

.cp_form {}

.cp_form-item {}
.cp_form-label {}

.cp_form-textinput {}
.cp_form-checkbox {}
.cp_form-textarea {}
.cp_form-select {}
.cp_form-option {}

Coupon

.cp_coupon-wrapper {}
.cp_coupon-form {}
.cp_coupon {}
.cp_coupon-code {}
.cp_coupon-discount {}
.cp_coupon-remove {}

Pay what you want

.cp_paywhatyouwant-input {}

Payment method

.cp_payment-method-switcher {}
.cp_payment-method-button {}
.cp_element-wrapper {}
.cp_stripe-card-element {}
.cp_stripe-ideal-element {}
.cp_bancontact-text {}

Pay button

.cp_pay-button-wrapper {}
.cp_pay-button {}

Processing

.cp_processing {}
.cp_processing-title {}

Status (paid, failed, canceled, pending)

.cp_status-wrapper {}
.cp_status-title {}
.cp_status-content {}
.cp_status-text {}

Downloads

.cp_view-downloads-button {}

If you would like us to add more classes, please reach out and let us know.

Help center