Custom CSS Tricks: Payment Page Builder

We love simplicity here at Teachery but we’ve allowed for some flexibility in your payment pages by enabling you to insert your own custom CSS.

We can't ensure support for any custom code you add. We'll do our best to help, but know that custom code can cause issues if not added properly. Proceed at your own risk! Please be sure to preview your page (ideally, in an incognito/private browser tab) to ensure everything is working and appearing as it should.

How to Add CSS

Once you’ve created a payment page with the Payment Page Builder, visit the Design > Custom CSS tab. Simply drop in the required CSS and save to preview your changes.

Looking to style our original payment page template? Start here!

Some CSS Samples

To style some of the smaller elements of a payment page that you may want to highlight, below are some CSS code samples.

Remember to replace our placeholder values like hex color codes (e.g. #FF8C86) below with your preferred values.

Styling Product Offer Info

/* TO CHANGE THE STYLING OF THE QUANTITY LIMIT TEXT LABEL */
.product-quantity-limit-inline {
   color: #FF8C86 !important;
   font-weight: 700 !important;
   font-size: 16px !important;
}

/* TO CHANGE THE STYLING OF THE STRIKED-OUT PRICE */
.product-discounted-from-price {
   color: #FF8C86 !important;
}

/* TO CHANGE THE BORDER OF THE COUNTDOWN TIMER */
.checkout-countdown-row .countdown {
   border: #FF8C86 2px solid;
}

Styling Confirmation Page

/* TO CHANGE THE STYLING OF THE "PAYMENT CONFIRMED" HEADING */
.confirmation-page-wrapper .confirmation-heading {
   color: #FF8C86 !important;
}

/* TO CHANGE STYLING OF ICON IN "CONFIRMED PURCHASE" VIEW */
.confirmation-page-wrapper .confirmation-success-icon-circle {
   border: 2px solid #FF8C86 !important;
}
.confirmation-page-wrapper 
.confirmation-success-icon-circle svg path {
   fill: #FF8C86 !important;
}

/* TO CHANGE STYLING OF BUTTON IN "CONFIRMED PURCHASE" VIEW */
.confirmation-page-wrapper .confirmation-view-downloads-button {
   background-color: #FF8C86 !important;
}

Styling Expired Offer View

/* TO CHANGE STYLING OF ICON IN "EXPIRED OFFER" VIEW */
.expired-page-wrapper .expired-icon-circle {
   border: 2px solid #FF8C86 !important;
}
.expired-page-wrapper .expired-icon-circle svg path {
   fill: #FF8C86 !important;
}

Google Fonts

Follow steps 1 to 3 (only) provided here. When you’re all set, return here to complete your final step, which is:

Back in your payment page, navigate to the Design > Custom CSS tab and apply your new font to the text elements you want to change (for example, to apply it to the main title of the payment page, you would use the code example provided below).

.product-title {
   font-family: 'Oi' !important;
}

The use of other custom fonts is not yet possible in the Payment Page Builder.

Related Help Docs

Here are some additional guides to read and bookmark:

1. Introducing the Payment Page Builder

2. Building a Payment Page

3. Sell a Digital Product Download Only