
Custom CSS lets you change the look and feel of your one page 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](mailto:support@checkoutpage.co) for concierge styling services.

## 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** tab and scroll down to the Custom **CSS** field

![image-09b3.png](/img/cms/help/image-09b3.png)

3\. Write your CSS in the field and hit **Save**

![image-ee27.png](/img/cms/help/image-ee27.png)

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-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 {}

// checkout form
.cp_form-wrapper {}

.cp_form {}

.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 {}

.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 {}
```

Add your own styles to make your checkout match your brand

Customize your checkout with custom CSS


## Appearance

Checkout Page makes it easy for your to customize your one page checkout. Add your logo and colors, change the text, or even change the design with CSS.

In just a few clicks, you can make your checkout match your brand or website design.

To change the appearance of your one page checkout:

1. Go to your Checkout Page dashboard and click on your checkout
2. Open the **Design** tab and go to the **Appearance** section

### Business settings

This is where you can add a store name, logo, site link, and more.

First, you have to add this information in your **Business settings** and then you can choose the information you'd like to show on each individual checkout.

Your **Business settings** can change the look and feel of your checkouts, payment links, emails to customers, and your customer portal.

[Learn how to add your business settings here](https://checkoutpage.co/help/articles/business-settings)

Once you have added your business information, you can choose what to show on your one page checkout by ticking the boxes in the **Appearance** section.

![image-bf03.png](/img/cms/help/image-bf03.png)

### Product text alignment

Aligns the product text in your one page checkout.

* Product name
* Price
* Store name
* Description

Left alignment checked by default.

Check **Center** to center and align your product text in your checkout.

![image-bf9c.png](/img/cms/help/image-bf9c.png)

Make sure to scroll down to hit **Save** and save your changes.

### Show price breakdown

Tick this box to show your customer the total amount due today.

**Please note: This feature is only available for the payment plan and subscription checkouts.**

![image-748d.png](/img/cms/help/image-748d.png)

Make sure to scroll down to hit **Save** and save your changes.

### Pay button background color

This is the color of your pay button background and text color in your checkout.

Pay button background defaults to black (#000000).

Use the color picker or type your Hex value to add your color.

If you change the background color, click **X** to reset the background color back to black (#000000).

We recommend using a pay button background and text color combination that has enough contrast to make the text easy to read.

![image-50c0.png](/img/cms/help/image-50c0.png)

Make sure to scroll down to hit **Save** and save your changes.

### Pay button text color

The color of the text in your pay button.

Your pay button text color defaults to white.

Choose between white or black text.

![image-6f8b.png](/img/cms/help/image-6f8b.png)

Make sure to scroll down to hit **Save** and save your changes.

### Payment link & QR code background color

This is the background color of the checkout when viewing your checkout from a payment link or QR code.

The background color of checkout defaults to a light grey (#F9F9F7).

Use the color picker or type your Hex value to add your color.

If you change the background color, click **X** to reset the background color back to light grey (#F9F9F7).

![image-e086.png](/img/cms/help/image-e086.png)

Make sure to scroll down to hit **Save** and save your changes.

## Badges

Badges help establish trust through association with Stripe.

We recommend keeping the Stripe badges visible as your customers are more likely to make purchases when they trust their payment is secure.

### Show ‘Payments are secure & encrypted’

Let your customers know that their payments are secure & encrypted.

Checked and visible by default, but you can uncheck it to remove this badge.

![image-f3de.png](/img/cms/help/image-f3de.png)

Make sure to hit **Save** and save your changes.

### Show ‘Powered by Stripe’

Let your customers know that their payments are processed by Stripe.

Checked and visible by default, but you can uncheck it to remove this badge.

![image-3fe0.png](/img/cms/help/image-3fe0.png)

Make sure to hit **Save** and save your changes.

## Currency formatting, custom CSS, custom labels

Now that you’ve changed the look and feel of your checkout. It’s time to learn more about the next steps:

* [Currency formatting](/help/articles/currency-formatting)
* [Custom CSS](/help/articles/adding-custom-css-to-your-checkout)
* [Custom labels](/help/articles/custom-text-labels)

In this help article, we’ll cover designing the look and feel of your checkout.

Design your checkout


## Badges

Badges help establish trust through association with Stripe.

We recommend keeping the Stripe badges visible as your customers are more likely to make purchases when they trust their payment is secure.

To see the badges for your one page checkout:

1. Go to your Checkout Page dashboard and click on your checkout
2. Open the **Design** tab and go to the **Appearance** section and scroll down

### Show ‘Payments are secure & encrypted’

Let your customers know that their payments are secure & encrypted.

Checked and visible by default, but you can uncheck it to remove this badge.

![image-746f.png](/img/cms/help/image-746f.png)

Click **Save** to see your changes.

### Show ‘Powered by Stripe’

Let your customers know that their payments are processed by Stripe.

Checked and visible by default, but you can uncheck it to remove this badge.

![image-5e83.png](/img/cms/help/image-5e83.png)

Click **Save** to see your changes.

### ‘Powered by Stripe’ badge color

The color of your Stripe badge.

Your Stripe badge color defaults to black.

Choose between a black or white badge.

We recommend using a checkout background color and Stripe badge color combination that has enough contrast to make the badge easy to read.

Click **Save** to see your changes.

[Learn more about designing your checkout here](https://checkoutpage.co/help/articles/design-your-checkout)

In this help article, we’ll cover checkout badges, why we recommend keeping them visible, and how to remove them if you wish to do so.

Badges


Checkout Page is a one page checkout that is super easy to customize to match your brand and design.

You can also translate your checkout labels to target a specific foreign market.

## Customizing text labels

Here's how you can customize/translate your checkout text labels:

1. Open your Checkout Page dashboard and click on any checkout
2. Go to the **Design** tab and scroll down to **Custom labels** dropdown

![image-a831.png](/img/cms/help/image-a831.png)
3. Scroll to find the text label you wish to change
4. Replace the default text with your new label text and click **Save**

You can change the following text labels:

* **Interval count**

* “every”
* **Day interval**

* “day”
* **Week interval**

* “week”
* **Month interval**

* “month”
* **Year interval**

* “year”
* **Subscription trial days free**

* "days free"
* "then"
* **Setup fee**

* "setup fee"
* **Subscription ends after**

* "Ends after"
* "payment"
* **Or pay with card**

* "Or pay with card"
* **Sold out**

* “Sold out”
* **Sold out button**

* “Sold out”
* **Discount code**

* “Discount code”
* **Discount code placeholder**

* “Discount code”
* **Discount code button**

* “Apply”
* **Pay what you want**

* “Pay what you want”
* **Pay what you want placeholder**

* “Pay what you want placeholder”
* **Card**

* “Card”
* **Total due today**

* "Total due today:"
* **Pay button**

* “Pay”
* **Subscribe button**

* “Subscribe”
* **Submit button**

* “Submit”
* **Processing payment**

* “Processing payment”
* **View downloads button**

* “View downloads”

## Translating labels

Whilst we don’t support Checkout Page in any other language than English, it is possible to manually translate your text label into any language and enter the translations as **Custom labels** as per the instructions above.

## Field labels

If you wish the change your checkout's field labels, navigate to **Fields** and you can change the field label text here.

You can either **Add a custom field** or click on the pencil icon next to any existing field to change it.

![image-751f.png](/img/cms/help/image-751f.png)

[Learn more about adding custom fields](/help/articles/how-to-add-custom-fields)

## After-payment checkout confirmation and email confirmation

Shown and sent to customers after successful checkout, the text in this message and email can be customized or manually translated into any language.

[Learn more about after-payment messages](/help/articles/how-do-I-display-a-confirmation-message-after-successful-checkout)

[Learn how to send an email confirmation here](/help/articles/how-do-I-send-an-email-confirmation-after-successful-checkout)

In this help article, we’ll cover how you can customize or translate the text labels in your checkout.

Help center

Have a question about
Checkout Page?

Get started

Platforms

Company

Features

Compare

Use cases