I don’t generally recommend that people turn their WordPress website into a storefront and sell their own merchandise. Unless you really enjoy the business of retail, it makes more sense to do what you love and make less per item sold, to let someone else handle shipping, returns, refunds, sales tax payment, answering complaints, and so on.
But. If you want to sell something online from your WordPress site and fulfill the orders yourself, the easiest way I’ve found is to use the WP Simple Paypal Shopping cart plugin by Tips and Tricks HQ. This also works for selling downloadable files, such as eBooks.
This tool doesn’t have a catalog. You create and lay out the catalog yourself, as pages on your site. At the point where you want to insert an “add to cart” button, that’s where you define the product name, price, shipping cost, and what the options are (color, size, etc).
A visitor to your site would see fields to select any options you defined, and an “Add to Cart” button.
You can make the shopping cart contents appear in your site’s sidebar or other widget area:
Otherwise (or in addition), you can create a full-screen shopping cart page, which shows the same information, but wider.
An example implementation of this can be found at gregguirard.com.
Evaluation
This is a little too simple for some uses, and I plan to write about other options at some point. It doesn’t do fancy stuff like variable pricing based on volume (though you can define separate “add to cart” buttons for single items versus bundles). The shipping cost is based on a base cost per order, plus an additional price per item, and you can define a “free shipping” threshhold. There’s no shipping cost calculation that takes into account whether the customer is international, etc — just a flat rate. It uses your PayPal account to accept payments, and the only cost to you is whatever PayPal charges. There’s no automatic sales tax calculation, so you need to incorporate that into your prices.
Once the customer has paid for their order, they will either be redirected to a download page (if the thing you’re selling is an electronic file), and/or the system will send you an email message alerting you to the order and giving relevant details (like what was ordered and where to ship it). From there on it’s up to you.
Setup
To set this up, go to your WordPress dashboard, select Plugins > Add New. Search for “Simple Paypal Shopping cart”. Find the one by Tips and Tricks, click Install Now, then Activate.
This will add Simple Cart to your dashboard menu. Go to the Settings screen. Go through and fill in the values that seem right for your situation.
If in doubt, disable the “nonce” functionality. If you followed advice I gave elsewhere, you are using caching, so the nonce system won’t work. Using nonce makes it a little harder for a hacker to maliciously add items to people’s shopping cart, but that doesn’t seem especially scary, so whatever.
NOTE: The Automatic redirection to checkout page option may make your Add to Cart buttons not work. This happens if you have some caching options enabled on your site generally. If you find Add to Cart doesn’t actually add anything to the cart, try disabling this option.
On the Advanced tab of the settings, find the PayPal Smart Checkout options. This is optional, and it’s nice if you can use it. To make it work, you need a PayPal business account and to enter “client live” ID and key values in these fields. You can get these ids from developer.paypal.com. Read online about Smart Checkout to see whether it’s likely to be worth the trouble.
Creating Products
Once you’ve gotten the settings to the values you want, create pages describing your products. You’re pretty free in how you do this – you can create one page for each product, or a page that lists several. It’s up to you to lay out the page, add one or more product pictures, etcetera.
At the point where you want to insert a “buy” button, click the shopping cart icon on the editor toolbar.
This opens a dialog where you can define the product and pricing.
When you click “Insert”, it adds the button at the current cursor location in your page. While editing the page, the button appears as a shortcode, e.g.:
[wp_cart_button name="Notecards" price="13" shipping="1"]
The above defined a product called “Notecards” that costs $13 (or whatever currency you’ve selected in the options instead of $), and costs $1 to ship.
There’s no central list of products, options, and prices; the information is scattered across your site in these button shortcodes. Unless they’re all in one long page anyway, I suggest keeping track of these in a separate list. If you have multiple buttons for the same product, make sure if you update one, you update the others to have the same pricing.
There are three places you can have a shopping cart:
- In the sidebar, where it’s always visible. If empty, it just displays some text you can define, e.g. “Your cart is empty”, and optionally, a link to a “products page.”
- On its own page – you would want to add a menu link to it, and maybe also add links beside the “Add to Cart” buttons.
- On the Product pages (preferably set to display only if the cart is not empty).
- Any combination of the above.
Decide how you want to apply these options, to design the shopping experience on your site. If it’s more than just a store, you might not want to have the cart always visible on the sidebar. Depending on your theme, you may have the ability to define a sidebar that appears only on a Products page that lists everything you sell. Or you might have the cart in the body of the Products page, above the table of products. You might want to have individual product pages and have the shopping cart appear just below the product description, if not empty.
It’s all up to you – I’m just going to tell you how, technically, to accomplish those things.
To add a shopping cart to the sidebar, use the Customize screen of WordPress. Go to Widgets (exact wording might differ based on theme), find the widget area you want to have the cart in (e.g, “Sidebar”), click “Add a widget”, and select WP PayPal Shopping Cart. You should see the effects immediately in the preview. If the cart is empty, there will just be some text and a “product page” link that you defined in the settings.
To place a shopping cart in the body of a page, add one of the following shortcodes:
- [show_wp_shopping_cart] – shows the shopping cart if it’s not empty. This would be a good thing to do on a single-product page, at the bottom, or at the top of a page that lists all the products. That way, when someone clicks the Add to Cart button, something happens – the cart appears (if this is the first item added) or is updated.
- [always_show_wp_shopping_cart] – shows the shopping cart if it’s got something in it, or some text and a link if the cart is empty. This might be a good thing to use on a page named “Checkout” – since you don’t want the page to just be blank if the cart is empty.
Product Page Layout
You may be tempted to use a table to lay out a product page – a column for product pictures, a column for descriptions, a column for buy button.
Don’t use a table.
Tables aren’t responsive – they don’t play well with smaller-screen devices, like phones. They also they have accessibility issues. If you’re already using the “Gutenberg” editor, it may have a better option available. Or, use the columns feature of the plugin f(x) Editor by David Chandra Purnama, or find some other plugin that advertises responsive layout.
Try out your product pages on a smartphone and tablet. If you don’t have these devices available, the Customize screen has buttons at the bottom that let you view a page as it would appear on these different-sized screens.