Adding Gumroad to your Wordpress site

If you are using Wordpress to build a website, and want to integrate Gumroad's payment forms into your page, then look no further! Well, you still need to read the instructions on this page, but that's not really considered "looking". Anyway.

Let's do it!

What you'll need:

In Gumroad

Publish your product and go to your product's Preview page via the Edit, Options, or Timeline tabs. Now open a new browser tab... Publish your product and go to your product's Timeline tab. Now open a new browser tab...

In Wordpress

Connecting Gumroad

In your Dashboard, go to eCommerce Plugins, find Gumroad, and click on Activate.

There are three main methods of redirecting your customers to your product page. In order of ascending fanciness, they are...

1. Sharing the Link

By simply linking to your Gumroad product, your customers will be directed to a new browser tab to complete their purchase. You can set up this buying flow by:

2. Using Overlay

As a refresher - the Gumroad Overlay is a pop-up window (not the annoying kind) that allows your customers to buy your product (or products) without leaving your site. They can buy a single product at once, or buy all of your products from you, using our neat pop up window. 

Image title

Create a Sales page, or a page where you are going to create a buy "button" or link to your Gumroad products. Write some compelling content, and have a place in mind for the link you are going to create for your product. Now it's time to drop your shortcode.

You can use the [gumroad] shortcode to display Gumroad products on your WordPress.com site. Here's what the shortcode looks like:

[gumroad id="XXXX" text="Purchase Item" type="overlay" wanted="true" ] 

What this all means:

gumroad id: Your Gumroad product ID (hint: it won't be XXXX). You can find this on the Options tab of your product. For context, please read this Help Center article.

text: The text displayed on your Gumroad product's Buy button. This only applies when using Overlay.

type: Allows you to select either "embed" or "overlay". The default is "overlay"

wanted: This can either be set to "true" or "false", and if you leave this out, the default will be "false". When "true" this automatically displays the payment form, rather than the product's image and description. For more context, please see this Help Center article.

3. Embedding the Product

As a refresher, the Gumroad Embed is your product or payment form completely embedded in your page.

To use this code, just drop the following into your page:

[gumroad id="XXXX" type="embed"]

The code won't look like much when it's in the editor, but once you publish the post or page you pasted it into, you'll either see your "Buy" button when using the Overlay or the product itself when using Embed.

Was this article helpful?