Appearance, Writing & Editing

Simple Payments Styling

Here are a few Custom CSS recipes to modify a Simple Payments button.

Simple And Plain

Take away all the formatting.

/* add this to hide the title */
.jetpack-simple-payments-title { display: none;}
/* add this to hide the price */
.jetpack-simple-payments-price { display: none;}
/* add this to center the button */
.jetpack-simple-payments-button { margin: 0 auto;}

↑ Table of Contents ↑

Highlight Area In Yellow

Add a highlight color to make the payment opportunity emphasized.

/* add this to change the background color and add a little padding */
.jetpack-simple-payments-wrapper { background-color: yellow; padding: 10px;}

↑ Table of Contents ↑

Remove The Border Around The Image

Remove the thin border around the display square.

/* add this to change the background color and add a little padding */
.jetpack-simple-payments-image { border: 0;}

↑ Table of Contents ↑

If Your Product Images Aren't Square

Make your images a little bigger to fill the display square.

/* add this to change the background color and add a little padding */
.jetpack-simple-product-image { overflow: hidden;}
.jetpack-simple-payments-image { transform: scale(1.5);}

↑ Table of Contents ↑

Changing The "Pay with PayPal" Image

Please note that the button that says “Pay with PayPal” cannot currently be changed through CSS styling.

Styling The Purchase Confirmation Display

When a visitor makes a purchase, the display will change to white text on a green screen that reads:

Thank you, (Name)!
Your purchase was successful.
We just sent you a confirmation email to (e-mail address).

Due to the complete flexibility of the WordPress platform, it’s also possible to style that message to maximize the experience for your customer.

For example, you can create a “golden” effect like the following for an over-the-top response.

/* add this for a golden texture to appear behind the message */
.jetpack-simple-payments-purchase-message { background-image:url('https://en-support.files.wordpress.com/2017/08/golden-background-strip.jpg');}
/* set the main text to display in black */
.jetpack-simple-payments-purchase-message > p { color: black; }

 

Not quite what you're looking for?

Get Help