Unfortunately, the plugin I have been using to add a Pinterest pin-it button to the WooCommerce single product pages of a clients web shop stopped functioning. I did a quick search for a replacement plugin, but I couldn’t find any good plugin that works out of the box.
So, I came up with a simple solution that I want to share with you.
Add the javascript
First, we have to make sure that the pinit.js script is included in the product pages. This snippet includes the script in the footer on the product pages. Add the following code to the functions.php of your theme.
Add the pin-it button to the product pages
After adding the javascript for the Pinterest API, we use a hook on the WooCommerce product page to add the Pinterest pin-it button. Add the following code to the functions.php of your theme.
The hook we use in our example is the woocommerce_share hook. You can also use another hook. To find available hooks, I recommend the Simply Show Hooks plugin.
The above code pins the first image of your product. You can also have users save any image from your product page. Instead of a small Browser window, the user gets an overlay with all available images (see example below).
Use this code to achieve the result in the screenshot.
For more informations and options you may have a look at the Pinterest developers pages.
Love this functionality but can’t get the multiple images overlay to show up. Do you need to have both pieces of code on the site? We’re using a fairly old version of WordPress and Woocommerce.
Yes, you need to include both the pieces of code. If you use a fairy old version of WordPress and Woo I would suggest to update these first 😉
frank, the product image wont load up, i think the url spaces needs to be encoded ..
This was great – however, on a page with multiple products, I don’t get the same results as the screen shot – I get a button on the single image, but not in a given category – it looks like the last 2 functions are the same? Am I understanding this wrong?
If you don’t see the Pinterest button om the multiple products page I suggest you install Simply Show Hooks plugin. With this plugin you can see if your function is using the correct hook.