Help center / Customize your checkout with custom CSS

Customize your checkout with custom CSS

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

Need more help?

Contact us via the Chat in the bottom-right corner or via email on support@checkoutpage.co