Add Payhip to WordPress (Gutenberg Editor)

There are currently two editors that are available on WordPress, the "Classic Editor" and the "Gutenberg Editor". These instructions are for the Gutenberg Editor. You'll find instructions for the Classic Editor here.

In this article:

Use a link on WordPress

To add a link or button to your WordPress site directly to your product using the Gutenberg Editor is extremely simple. All you would need to do to get started is find the right URL.

To do so, simply click on Products at the top of your admin dashboard, find the product you’d like to link and select Share / Embed.

A screenshot showing the Share/Embed button for a product on Payhip

When this has been done a modal will appear showing your URL, which you can copy and paste into your WordPress site.

An example of the share a link tab of the Share/Embed modal on Payhip

To paste the link into your WordPress site, you have two different options - adding a basic link or adding a button block. We'll cover both below.

Add a basic link

To add some text that's linked to Payhip simply highlight the text you want to link and click on the Link button above.

Linking text to Payhip using the Gutenberg Editor on WordPress

Then paste in your link to WordPress. to insert it, and that's it! You should also make sure to save and preview it to ensure that the link is working.

Pastin in a Payhip URL to make linked text using the Gutenberg Editor on WordPress

Add a button block

The second option is to add a button to your WordPress site directly, which is also quite simple. Start by going to your WordPress site and find the post you would like to add a link to, then click  Add Block and Buttons.

Screenshot showing adding a button block on WordPress

You can fill the button with whatever you want (e.g. "Buy Now", etc) but after this text has been added, click on the Link button above the button.

Screenshot showing the add link option for a button block in the Gutenberg Editor on WordPress

 Then add your URL. Make sure to save and preview to ensure that the link has been attached.

Pasting in the URL for a link for a button block in the Gutenberg Editor on Wordpress

Embed a Payhip button on WordPress

To embed a Payhip button to your WordPress site directly, you'll want to click on Products at the top of your admin dashboard, find the product you’d like to link, and select Share / Embed.

A screenshot showing the Share/Embed button for a product on Payhip

Then go to the Embed Button tab.

An example of the embed button tab of the Share/Embed modal on Payhip

This will allow you to preview your button and customise it (text, colour, and type). There are two types of button that you can create:

  • Direct Purchase - Will direct the user straight to checkout for the product.
  • Add to Cart - Will add the product to the user’s cart (they will be able to add other products before purchasing).

Once you are done creating your button, click Get Your Embed Code, which will give you two snippets of code.

The modal for button embed code on Payhip

The first snippet is Javascript, which needs to go within the tag of the page where you’ll be embedding the button. Because WordPress doesn’t allow Javascript by default you’ll need to add a plugin to your site. We recommend a plugin called Insert Headers and Footers.

Because you have to install a plugin for this process to work, you will need to be an admin on WordPress. If you’re hosting your site with WordPress.com, then you will need to be on their Business plan or above.

Once you have installed the plugin, go to your WordPress admin dashboard and go to Settings > Insert Headers and Footers. After this has been completed, paste the Javascript snippet into the Scripts in Header field and hit Save.

You are now ready to add your button to your site. To do this, simply copy the second snippet of code (which is HTML) and paste it into your WordPress site by going to your Code Editor by clicking Options in the top right-hand corner.

Screenshot showing the code editor link in the Gutenberg Editor on WordPress

Once you're in the HTML view, paste the code wherever you would like it to be and hit  Save.

The HTML view of the Gutenberg Editor on WordPress

Now when you preview your page you’ll see the button embedded, which will take users either straight to checkout or add the product to their cart.

Screenshot showing the Payhip button embedded in the Gutenberg Editor on WordPress

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.