How To Create X Theme Pricing Tables with Stripe Payment Buttons

admin Business, Technical, Tutorial Leave a Comment

Before we start, if you haven’t had the good fortune to see what X Theme is all about, check out this quick introduction to it.

One of the more popular elements in the X Theme Cornerstone page builder is the pricing table. It creates a well structured, mobile responsive layout of your services and offerings. With options to highlight your best seller its perfect…. except… the buttons just link to a URL.

What if people want to pay you there and then?

People want instant gratification, so if they have made up their mind that they want to buy from you, you need to let them do that as easily as possible.

So how do you do this? Replace those buttons with Stripe payment buttons!

Watch this quick video on how to do it:

Or, skim read this next bit 🙂

For the post I mentioned in the video on how to create Stripe buttons, check out this post “How To Take Online Payments with WordPress and Stripe“.

Otherwise to re-cap in a few points:

Once you have your Stripe button shortcodes (i.e. [wpts id=”1″]), you can now add them to your pricing tables.

Adding a pricing table

There are a few simple steps to add a pricing table element. First, go to a page and edit in Cornerstone. You then need to add in a new section.

Search through the elements for Classic Pricing Table and drag that into the new section you’ve just added. You’ll now see this, depending on your site’s colours:

Note: You’ll notice that the screenshot of the pricing table isn’t the same as how the standard X Theme Cornerstone pricing table.

Just add in the css class name of: pricing-alternate

The CSS code you want is this (this can be pasted into the CSS section of the page that you ahev your pricing table on):

.pricing-alternate .x-pricing-column {
-webkit-transition: all 0.25s; /* Safari */
transition: all 0.25s;
border-radius:6px;
}
.pricing-alternate .x-pricing-column:hover {
box-shadow:0 0 5px #000;
}
.pricing-alternate .x-pricing-column.featured {
border-radius:6px;
}
.pricing-alternate .x-pricing-column.featured h2, .pricing-alternate .x-pricing-column h2 {
border-top-left-radius:6px;
border-top-right-radius:6px;
}
.pricing-alternate .x-price::first-letter {
font-size:0.5em;
}
.pricing-alternate .x-pricing-column ul li:nth-child(odd), .pricing-alternate .x-pricing-column.featured ul li:nth-child(odd) {
background-color:#F6F6F6;
}
.pricing-alternate.x-pricing-table.two-columns .x-pricing-column {
width:49%;
margin-right:2%;
}
.pricing-alternate.x-pricing-table.three-columns .x-pricing-column {
width:32.50%;
margin-right:1.25%;
}
.pricing-alternate.x-pricing-table.four-columns .x-pricing-column {
width:24.33%;
margin-right:1%;
}
.pricing-alternate.x-pricing-table.four-columns .x-pricing-column:last-of-type,
.pricing-alternate.x-pricing-table.three-columns .x-pricing-column:last-of-type,
.pricing-alternate.x-pricing-table.two-columns .x-pricing-column:last-of-type {
margin-right:0;
}
@media (max-width: 480px) {
.pricing-alternate .x-pricing-column, .pricing-alternate.x-pricing-table.two-columns .x-pricing-column, .pricing-alternate.x-pricing-table.three-columns .x-pricing-column, .pricing-alternate.x-pricing-table.four-columns .x-pricing-column {
margin-bottom:20px;
width:100%;
}
}

Adding in your Stripe buttons

Now that you have your pricing tables, you just need to replace the button shortcode in the pricing table with the shortcode of the Stripe button.

Essentially you would replace:

[x_button href="#" size="large"]Buy Now![/x_button]

with

[wpts id="1"]

Once that is in, you’ll see your Stripe button come through at the bottom of the price table.

And you’re done!

For an additional video on how to add a pricing table and its options check out this video:

Hope this post was helpful, and if you have any questions or comments feel free to get in touch!

Leave a Reply

Your email address will not be published. Required fields are marked *