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.
When this has been done a modal will appear showing your URL, which you can copy and paste into your WordPress site.
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.
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.
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.
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.
Then add your URL. Make sure to save and preview to ensure that the link has been attached.
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.
Then go to the Embed Button tab.
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 first snippet is Javascript, which needs to go within the head 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.
Once you're in the HTML view, paste the code wherever you would like it to be and hit Save.
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.
