I’ve updated my WordPress plugin, CF WOD Posts. Version 1.2 is now available on WordPress.org.
The custom plugin allows WordPress site owners to post CrossFit Workouts of the Day (WODs) from the Dashboard. It’s a great way to publish WODs on your WordPress site while keeping them separate from your other content like posts and pages.
This version fixes two bugs:
Fixes a conflict with Genesis child themes that caused a PHP error
Fixes a bug that would cause a 404 error after publishing new WODs
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.
This post will cover how to make an eCommerce site using WooCommerce and WordPress. WooCommerce is a comprehensive open source eCommerce platform for WordPress. The plugin has many features which aren’t covered here; this is just that bare bones setup to take you from installing WooCommerce to having a product for sale and PayPal as a payment gateway.
Here is the best order I’ve found to attack this:
Install a WooCommerce-compatible theme
Install the WooCommerce plugin
Configure the WooCommerce plugin
Let’s get started!
Installing a WooCommerce Compatible Theme
Go to your WordPress Dashboard, then click on “Appearance” on the left sidebar.
Then click on the “Add New” button
On the “Add Themes” page, type the search term “woocommerce” in the search box. This will (hopefully) only return only the themes that are WooCommerce-ready, meaning that they are developed in a special way so that your WooCommerce product pages will look fantastic.
Note: If you install a non-WooCommerce-ready theme, you’re likely to see this indication when you’re on your Dashboard
Click “Install” on the theme you’d like to use, then click “Activate” on the next page to activate the theme.
Warning: Activating a new WordPress theme may cause loss of some content from your current theme. Particularly vulnerable are widgets and any theme-specific settings, such as those set from a theme-specific options page. Talk to someone knowledgeable about WordPress if you have a lot at stake here…it is very frustrating to lose data!
Now that you have a WooCommerce theme installed, you’re ready to install the WooCommerce plugin.
Installing WooCommerce Plugin
Go to your WordPress Dashboard, then click on “Plugins” on the left sidebar.
Type the search term “woocommerce” in the search box and press enter on your keyboard
You should see the below result. Click on “Install Now”
If prompted, click “OK” to verify that you’d like to install WooCommerce
Next you should see a plugin install screen like the one below. If the screen says “Successfully installed…”, you’re in business! Click on “Activate Plugin” to continue.
After you activate WooCommerce, you’ll need to install pages. Click on “Install WooCommerce Pages” to do this.
You should be taken the to “Welcome to WooCommerce…” screen. Congrats!
Click on WooCommerce on the Dashboard, and then click on “Settings” (under WooCommerce)
Under “General Options,” update your “Base Location” and check your “Selling Location(s)” based on your intended customer base
Under “Currency Options,” select the proper currency from the dropdown menu.
Note the “Frontend Styles” area in case you’d like to come back and change them later. It’s best to see how everything looks and then change them based on that (as opposed to making guesses at this point).
Click “Save Changes”
Take a look at Products and Tax tabs, although we won’t covering these in this tutorial.
On the Checkout tab, you should enable “Force secure checkout” note that this requires SSL.
Under the Payment Gateways section, we’re going to set up PayPal and disable all others. Click on the Settings button for Direct Bank Transfer
Uncheck the box that says “Enable Bank Transfer”
Click “Save Changes”
“Your settings have been saved.” at the top of the screen lets you know that it has worked.
Repeat the previous 4 steps to disable “Cheque Payment”
PayPal is my preferred payment gateway for a quick WooCommerce installation on a site, click on its Settings button to begin setting it up.
All you need to do is enter your PayPal account email into the “PayPal Email” box. Wonderful!
Remember to click “Save Changes” at the bottom of the PayPal page in order to save your email.
Make note of the Shipping, Accounts, and Emails tabs. They’re important, but the defaults work very well for our purposes today. If you’re selling physical products that require shipping, contact me if you’re interested in learning how to set up this section.
Now we’re ready to move on to the next step 🙂
Creating a Product to Sell
Now that WooCommerce is installed, let’s make some Products! In WooCommerce, the things you sell are referred to as Products. To start creating your first Product, go to the Dashboard and click on Products.
From the Products page, click on the “Add Product” button.
Name your product by filling in the “Product name” field. Then add a nice long description of it in the big box below.
Fill in the “Regular Price” field under “Product” data at a minimum.
Add a Product Short Description
Add at least a Featured Image…even better is to also add a Product Gallery
Add a Product Category by clicking “Add New Product Category” or selecting an existing category.