Adding Gumroad to Wordpress

If you are using Wordpress to build your website, you can integrate Gumroad's payment forms directly into your page. You will need:

• A Wordpress account. 
• A published Gumroad product (review our Adding a Product article for the basics)
• The Gumroad Wordpress plugin
  

Getting started

First, add a product and click Publish. Now, open a new browser tab.

How to connect your Gumroad account 

In your Dashboard, click Tools, then click Plugins. In the Plugin browser, search for "Gumroad". When you find Gumroad, click on Activate.

There are three main methods of redirecting your customers to your product page. In order from simple to more complex, here 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 this up by:

• Turning text on your page into a hyperlink to your Gumroad product's URL. Wordpress' tips on that are here.
• Adding an image to your page and having it open, when clicked, your Gumroad product's URL

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. 

To use this, create a page on your site where you want to place a buy "button" or link to your Gumroad products. 

To add the button, 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" ]

Here's what that all means:

gumroad id: Your Gumroad product ID (hint: it won't be XXXX). You can find your product ID while editing your product in the "suffix" of your product URL. 

text: The text you want 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, bypassing the product's image and description. 

3. Embedding the Product

As a refresher, the Gumroad Embed is your product or payment form completely embedded in your page. To do this, just drop the following code 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.