Help center / Customize your checkout with custom CSS

Customize your checkout with custom CSS

Add your own styles to make your checkout match your brand

Custom CSS lets you change the look and feel of your checkout. If you know CSS, this can be a great way to make your checkout yours. Not sure what CSS is or how to use it? Contact us for congierge styling services.

How to add Custom CSS to a checkout page

Open the page you want to customize in the dashboard. Go to the Settings tab and click 'Custom CSS' or scroll down to the 'Custom CSS' field. Write your CSS in the field and hit save, you'll see your changes in the preview right away. We've created specific CSS classes for you to use, which you can find below.

The following CSS classes are available:

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

// checkout form
.cp_form-wrapper {}

.cp_form {}

.cp_information-label {}

.cp_form-select {}
.cp_form-option {}

.cp_form-item {}
.cp_form-label {}
.cp_form-textinput {}
.cp_form-checkbox {}
.cp_form-textarea {}

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

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

// downloads
.cp_view-downloads-button {}

Start selling online
in minutes

No credit card needed

2018 - 2022 © Checkout Page. All rights reserved.