Customize your checkout with custom CSS

What is custom CSS?

Custom CSS allows you to add your own styles to your checkout page. Write CSS rules to customize colors, spacing, fonts, and layout beyond what the visual editor provides.

How to add custom CSS

Go to Pages and open the page you want to edit.
Go to Design → Custom CSS.
Enter your CSS in the text field.
Click Save.

We recommend only using the provided CSS classes when applying styles.

Styling examples

Transparent page

.cp_card {
background-color: transparent;
}

Page background color

.cp_card {
background-color: red;
}

Google fonts

@import url('[https://fonts.googleapis.com/css2?family=Exo+2&display=swap'](https://fonts.googleapis.com/css2?family=Exo+2&display=swap%27));

.cp_checkout * {
font-family: 'Exo', sans-serif;
}

.cp_product-title {
font-family: 'Exo 2', sans-serif;
}

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;
}

Extra 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;
}

Side-by-side form fields

.cp_form >div:nth-child(1) {
display: grid;
grid-template-columns: repeat(2, 1fr); /* Create 2 equal-width columns */
column-gap: 16px; /* Horizontal gap between columns */
row-gap: 0; /* No vertical gap */
}

.cp_form >div:nth-child(1) .cp_form-item:nth-child(n+3) {
grid-column: span 2;
}

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-item-text
.cp_form-item-textarea
.cp_form-item-email
.cp_form-item-checkbox
.cp_form-item-multiple-choice
.cp_form-item-quantity
.cp_form-item-phone
.cp_form-item-number
.cp_form-item-country
.cp_form-item-date-time
.cp_form-item-date
.cp_form-item-time
.cp_form-item-tax-id
.cp_form-item-po-number

.cp_form-label {}

.cp_form-textinput {}

.cp_form-checkbox {}

.cp_form-textarea {}

.cp_form-select {}

.cp_form-option {}

.cp_coupon-wrapper

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 {}

On this page