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. #5dc55f) below with your preferred values.

Styling Product Offer Info

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

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

Styling Upsell Info

/* TO CHANGE THE STYLING OF THE UPSELL BOX BORDER */
.checkout-upsell-container .checkout-upsell-box {
  border: 2px solid #FF8C86;
}

/* TO CHANGE THE STYLING OF THE UPSELL CHECKBOX TEXT */
.checkout-upsell-container .upsell-checkbox-section .upsell-checkbox-text {
  color: #FF8C86;
}

/* TO CHANGE THE STYLING OF THE UPSELL STRIKED-OUT PRICE */
.checkout-upsell-container .upsell-checkbox-section .upsell-price-display .upsell-striked-price {
  color: #FF8C86;  
}

/* TO CHANGE THE STYLING OF THE UPSELL DISCOUNTED PRICE */
.checkout-upsell-container .upsell-checkbox-section .upsell-price-display {
  color: #FF8C86;  
}

Styling Confirmation Page

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


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

/* TO CHANGE THE STYLING OF THE ICON IN THE "CONFIRMED PURCHASE" VIEW */
.confirmation-page-wrapper .confirmation-success-icon-circle svg path {
  fill: #5dc55f !important;
}

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

Styling Expired Offer View

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

/* TO CHANGE THE STYLING OF THE ICON IN THE "EXPIRED OFFER" VIEW */
.expired-page-wrapper .expired-icon-circle svg path {
  fill: #5dc55f !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