This post will demonstrate how to add a Pinterest Pin-It button to your Related Products using the Shopp e-Commerce plugin for WordPress.
I recently wrote some similar code for a client, and thought it would be useful to share since I didn’t find anything on the web the solved this particular problem.
Shopp is a popular e-commerce plugin for WordPress. Pinterest is the mega-successful social app for building visual lists.
Having one of Pinterest’s Pin-It buttons on each of your products is a no-brainer. It allows your customers to save your products as they’re passing through, and then they can come back later to buy it or share it.
The trick is to make the calls specific to each Related Product by calling Shopp’s handy API from within the related products loop. You’ll already have a reference to each product, so it’s just a matter of pulling the information that you need to build the “Pin-It” button.
Below is the first part of the code. It stores information about the current Related Product. Note: I intentionally used ‘product.name’ as opposed to ‘product.description’ at the client’s request because Shopp’s ‘product.description’ function (surprisingly) returned some HTML.
So, instead of cleaning up or removing the HTML, we opted to use the product’s name and append the site name for the visitor’s future reference (hence the “- from YourSite.com” in the code below). It turned out much better this way.
You will probably need to add a div container and some styling to handle the display and placement on your product page.
Then, using Pinterest’s button generation example as a guide, place your related product variables from above into the HTML elements to generate the button.
Note that the calls to rawurlencode() are necessary PHP functions to format the URLs so they work with Pinterest’s button generation API.
Good luck! Let me know in the comments if you encounter any problems with this method.