As an avid Wordpress fan myself, I couldn't complete any discussion about e-commerce options without recommending Woocommerce! Woocommerce is used by over 80 million online stores, and because of its popularity many of the commercial and free Wordpress themes come with built-in Woocommerce compatibility. It's what I used to power the shop here on my personal website. Plus, its been around for years (so it's tried & true), and it has dedicated and on-going support and updates. Best of all, its completely free! You have the option to extend it with various paid plugins, but you can set up an online store using this guide without any extra costs. The only costs you pay are the credit card processing fees associated with your chosen payment gateway (here, I demonstrate using Stripe, which is my favorite- Paypal is another good option, and there are many others).
The only downside is, the set-up is a little more complicated, and this tutorial is long- you'll need to be comfortable installing and configuring plugins and setting up "webhooks" and "endpoints". Don't let those words scare you away, I break down each step and once you set it up you won't have to mess with it again. So grab a cup of coffee, put your thinking cap on, and let's get going! Here’s what you will need to follow this guide and get a Wordpress online store up and running.
Prerequisites:
- You must have Wordpress installed on a hosted website (this method will not work on wordpress.com)
- You must have an SSL certificate enabled on your site (free SSLs are available from Let's Encrypt
- You must have a valid sales tax permit
- You must have (or create) a payment gateway
Have on hand:
- Bank account details, if setting up a new Stripe account or
- Sign info for your Stripe/Square account
- Mobile phone (for text verification)
By the end of this tutorial, you will have an online shop page setup with the ability to pay online and with a e-gift card (instantly usable and available in set amounts) as your first product using only free plugins.
Step 1: Install & configure WooCommerce and extensions
- Log into your Wordpress Dashboard and navigate to the Plugins section.
- Click "Add New" and type in Woocommerce in the search bar
- Click "Install Now" and wait for it to install, then click "Activate"
A quick setup wizard will appear, enter your selling country (US), your business address, your currency ($) and select if you are selling physical products, digital products, or both. Check “I will also be selling in person”. Click "let’s go". - Select your Payment Gateway:
The three most commonly used gateways are Stripe, Square and Paypal. We’re using Stripe. Go to the Dashboard > Plugins, click "Add New" type in Woocommerce Stripe gateway, then click "install now" and then "Activate." Navigate to Dashboard>Woocommerce > Settings >Payments, scroll down to the section that says Stripe and slide the toggle to "on." We'll finish integrating Stripe in step 3. Otherwise, be sure to toggle on whichever gateway you need. There are offline options available as well if they want to pay when they pick up. - Shipping: On the next page you have options for shipping costs. If you are only doing pick-up or gift cards, select “free shipping” ; otherwise, enter in a flat rate fee.
Recommended Additional Plugins:
- Check the Woocommerce Services box for automatic tax calculation.
- Use Mailchimp and Facebook if you know you will need those.
- Jetpack: Use for automatic sales tax calculation. Configure automatically.
Step 2: Create a Product
In this section, we will create a gift card in fixed amounts. The customer recieves the gift card number immediately after payment and via email that they can then use on future online or in-person orders.
- Install & Activate “PW Gift Cards” plugin
- Go to Pimwick Plugins > Gift Cards
- Click “Create a PW Gift Card”. This automatically creates a gift card product, to configure its settings go to Products >All products and click on “gift card”
- Settings: Change the name if desired
- Upload your own product photo where it says “product image
- Add other amounts if needed and click update.
You have created your first product! Your shop page was automatically created for you at yoururl.com/shop, go check out your gift card!
Step 3: Payment Gateway Integration:
If you already have a Stripe or other payment gateway, skip creating a new account and go straight to adding the relevant keys on the Woocommerce payment settings tab for your specific gateway.
Integrating Stripe:
- Go to Woocommerce > Settings > Payments. Stripe should already be selected.
- Click sign up for Stripe account
- Enter in your new account details. You will immediately be taken to the Stripe dashboard. Also, check your email and verify your email address by opening the Stripe email that you should have received and clicking the button.
- Set your Store Name
- Activate your Account by entering your business address, name, phone number, and the rest of your business details. Pretty much every field is required here. You’ll need your bank account details and to set up 2 step authentication as well. When you have finished, click “submit application.”
- Go to Get your test API keys, copy each one, and enter on the Stripe settings page
- Then go to Developers > Webhooks. Leave this tab open for the next step
- On the WP Dashboard >WooCommerce Stripe> Settings page, it lists the “webhook endpoint”. Copy the whole url. Go back to the Stripe Dashboard (the webhook section) and click “Add endpoint”. Paste the url and then click “receive all events”. Then go to “signing secret”, click “Click to Reveal”, and copy that key. Go back to the WP Dashboard, and paste the key into “Test webhook secret.”
Now you have successfully created a testing environment.
Step 4: Launch:
- First, test your product: Go to your shop page and add the product to your cart.
- On the check out page, enter in the fake credit card details and click place order.
- Check your email- you should have received 3- an order confirmation and an email with the gift card as the customer AND an order received notification as the owner.
- Check your Stripe dashboard- the order should be there.
- Next, switch to "live" mode- Go to the Stripe Dashboard and click “get your live keys"
- Go to the WP Dashboard > WooCommerce > Settings > Payments, click on Stripe. Deselect “enable test mode” and then enter the live keys. You’ll also need to grab the live “webhook secret” from the Stripe Dashboard at Developers > Webhooks and click on the webhook to switch to live mode.
Congratulations, your e-commerce site is launched!
