WordPress payments...........
Kent Elchuk installs, sets up and modifies an online store so that you can take online payments and integrate ecommerce with a point of sale system.
Kent Elchuk enhances our fledgling WordPress site by adding our own payment system and that even includes a PayPal option, yuk!
Although Wordpress is the most popular content management system in the world, there’s much more it can do than build a website with text, images and video. One of the major options for a website is to build an ecommerce site, which is the prime focus on this tutorial.
Throughout the tutorial, we’ll discuss how to make an ecommerce website. This will includes installing Wordpress with a free plugin call Woocommerce, and setting it up so that it works as it should. We’ll then go into all the relevant details such as items, categories, tax rates, shipping and integrating a point of sale system.
Going an extra step, we’ll make modifications to our ecommerce setup and enable it to synchronise with a point of sale system. This section is completely optional and will require some extra equipment such as a Square credit card reading device and an Android phone or iPad.
So, let’s get to it and direct our browser to Wordpress.org to download the latest version of Wordpress. Run through the straightforward process so that we can have a workable site, and then log into the admin panel. That’s where we’ll spend the bulk of our time when working with a Wordpress site.
Considering this tutorial is geared towards ecommerce, we won’t go into details about themes, pages and posts. We’ll stick to the cart and product settings.
Woooooooocommerce!
To start the ecommerce process on a web hosting account, we click Plugins>Add New. Near the top right of the screen, there’s a text box labelled Search plugins. Thus, we can type Woocommerce and will see it at the top of the list. The next to step is to click Install Now.
If we’re on a local server at home, we can get the plugin at https://en-ca.wordpress.org/plugins/woocommerce. Once the plugin is downloaded, we extract the zip file and move the folder inside the wp-content/plugins folder. After that, we can refresh our admin panel and select Plugins. Woocommerce will now be on the listed. To make it useful, we click Activate.
Once we click Activate, we’re instructed to make a setup for our currency and other settings. Now, you could do this later and click Not Right Now on the bottom. But we may as well get it over with and configure our custom settings.
The plugin is intuitive. It even knows worldwide tax rates for countries, states, provinces, territories and other regions. For now, when we get to payments, we can select Paypal for payments because it’s very simple to work with and we can quickly create a new account.
After payments, we select shipping fees like Flat rate or Free shipping. Later on, we can make all kinds of shipping rules, such as some options for free shipping or flat rate.
When we get to Jetpack, we can skip that step by clicking the link on the bottom of the page. Finally, we can create a
product or go to the Dashboard. Since we don’t have any categories, we may as well go straight to the Dashboard.
Once we return to the Dashboard, we can see Woocommerce and Products on the left sidebar. For our ecommerce setup and future usage, these two tabs will be where we spend most of our time. One will handle our product information, while the other will be used to tweak settings.
Category and products
To create a our first category, we hover over Products and click Category. After, we simply write a name and click Add New Category at the bottom of the page. For this exercise, the category is called Seedlings. As we can see, we now have one item in our category list.
The next step is to create an item for that category. To do this, we click Products>Add New. Then, we add a name, description, add a price, SKU number and select the Seedling category on the right sidebar. After that, we click Publish.
The SKU number is very important and required if we want to integrate the Woocommerce inventory with the point of sale system. If we forget to add information or want to change product information, we can edit the item and click Update to make instant changes.
Keep in mind there’s a lot we can do with each item, such as establish an inventory and item variations.
So, let’s go and make another item called tomato seeds which is a variable product. To make a variable product, select Variable Product from the Product Data drop-down menu. After that, select the Attributes tab.
Now, we can click Add to make a custom attribute. Let’s call the attribute Size. It will be used to make various seed packet sizes. Make sure to select the checkbox that says Used for Variations. Under values, write three sizes separated with vertical lines. Thus, Small | Medium | Large can be used for demo purposes. Once the attribute is made, click Save Attributes.
After the attributes are saved, select Variations. Then, click Go, which is next to Add variation. At this stage, a new list item emerges for which we can select a size from the drop-down menu and expand the variation. We can add a sku number, price, product image, dimensions and weight, stock status and a description.
Once we have our variation as we want it, we can save it. Let’s add the other two variations for medium and large. The process is the same. Finally, let’s save that entire product item to the seedlings category so we’ll be able to view it in the shop page and make a selection for small, medium or large.
Let’s stop here and see what out website looks like in a browser. As we can see, there’s a basic home page and no sign of a shopping cart. We need to change that. Since most websites, even ecommerce sites, have a detailed home page that’s different than a shopping cart, we’ll create our site to have three pages: our home page, shopping cart and a blog.
Peruse the menu
Let’s make our menu. The first step is to locate Appearance in the left sidebar and click Menus. At first glance, we see that we can write a menu name and click Create Menu. So, let’s do that. We can call this menu Main.
After we make the menu, we can check some of the settings; such as ‘Automatically add new top-level pages to this menu’ and ‘Top Menu’ and save the menu. After that, we can add items to the menu. So, if we take a look at the column on the far left, it will have three tabs; most recent, view all and search.
Under Most Recent, select Shop and Sample Page. Then click Add to Menu followed by Save Menu. Now, if we refresh our home page in a browser we can see our product for the shop and sample page.
That’s seems okay, except that the sample page should be our home page and the blog that’s currently on the home page should be moved to a blog page. We want that blog page for SEO purposes.
Let’s start the cleanup with the menu. To add the blog, we click Categories from the left column and tick the Uncategorized box. In time, we could add specific post categories and add them. For now, we’ll choose the only one we have and add it to the menu.
After that, we’ll change the order because we want the Sample page to be our home page. We can move it to the top with a simple drag and drop. The order is fine, but the titles are horrible. Thankfully, we can click the arrow on the Sample page and change the name to Home.
Just like the previous example, we can change Uncategorized to Blog. When all is good, we can save our menu and take a new look the site. Now, our menu makes sense and our links go to the correct pages.
Although we can freely add posts to the blog, and change our home page to customise our site, we’ll get back to the Woocommerce details so that our orders will work the way we want them to. At first, we’ll take a better look at shipping because that must be set up properly.
Shipping lanes
Earlier, we had a brief introduction to shipping. Now, we’ll take things further and configure it for our needs. To access the shipping section, hover the cursor over WooCommerce and click Settings.
There are seven tabs in the settings, and the one we obviously want to select is Shipping. At first glance, we see our zone name, region and shipping methods.
Let’s assume that we want to ship worldwide. We can click Add shipping zone and fill in the specifics. In our example, Zone name can be World. For zone regions, let’s add Africa, Europe, North America, Australia and Asia. For shipping method, let’s add Flat rate and save the changes.
We can add many shipping zones, even a local one with free shipping.
Now that we have two zones, let’s establish some shipping rates. We can set the flat rate for our zone by editing the zone, then hover over Flat rate and click Edit. The cost will be the shipping fee regardless of how many items the customer decides to buy.
Square point
Now, at the beginning of the article, we talked about having ecommerce. Ecommerce is a great way to make sales and advertise products 24/7. However, if we start Googling about statistics such as online sales versus bricks and mortar sales, we could see articles mentioning that online sales are just a small percentage of overall sales. Some references mention that over 90 per cent of sales are through real-life interactions.
Thus, here’s where a Point of Sale system integrated with ecommerce can enable a vendor to have both options. With a Square account and POS system tools, we can take orders with credit and debit cards. Meanwhile, we can synchronise our inventory with Wordpress.
So, if our intention is to use Square then we need a Square account, which we can obtain by signing up at square.com and we’ll require SSL for our domain. When we sign up, our email address will be associated with the account. It becomes a critical part, much like the importance of our email address that’s used with Paypal. We can keep it simple and use the same one, or create and use different ones for that matter. The choice is entirely yours.
We won’t spend a lot of time talking about the Square POS system and Wordpress because it requires a paid plugin called Square For Woocommerce. The plugin can be purchased for $69 (CAD$79) at https://woocommerce.
com/products/square/ and it works for the USA, Canada, Australia, Japan and the UK.
Once we buy and download the plugin we can install it with Wordpress or move it into the plugin directory and activate it.
Once the plugin is activated, we need to make some changes to make it useful. The first step is to locate the new Integration tab from the left sidebar, which can be found in Woocommerce>Settings. At the same time, we must be connected to our online account at Square.
We’ll need to accept permissions to let our application access and allow syncing. After that, we select our website and to be redirected. Now we just fill out simple details like Business Location, a notification email and log debug (which is optional) and then save the changes.
Sync in style
After we set up our application, we can alter the syncing settings at any time by selecting Woocommerce>Settings> Integration. In addition, we can sync our inventory from Square to Wordpress or Wordpress to Square with a click of a button.
With syncing, we can take off to market, make sales and update inventory when we’re done. Alternatively, we can sync our inventory to Square to take into account our weekly online sales before hitting our weekend markets.
After that, we can make a choice if we want to add Square as a Payment option for the website. That option is located at Woocommerce>Settings>Checkout. About one-third of the way down the page, there are checkout options separated by vertical lines. In this list, we can see Paypal (which is our current option) and Square.
Let’s click Square, enable it and select Save Changes. Now, when we go visit our site in a browser, we have two checkout options: Paypal and Square. Let’s give ourself a pat on the back for a job well done.
Now that we have the behind-the-scenes knowledge, we do need to use a Square device connected to our Android phone or iPad via the headphone jack, a contactless reader, or iPad point-of-sale stand. In addition, we do need the Square app on the device, in order to communicate with the card-reading device.
The reader for Magstripe is free when we sign up and it can swipe credit cards. It plugs right into the headphone jack of the phone or iPad.
The contactless reader connects to an iPad via Bluetooth or the USB port of the Square stand. This unit costs around CAD$59 and can accept credit cards and debit cards using swipe, chip reader or tap. This is the must for a serious business that needs to cover each angle.
The last option, the iPad point of sale stand, is the most expensive at roughly CAD$199 and requires power. However, it’s a convenient point of sale system with a stand that makes it easy to take sales, open cash drawer and print receipts.
Shop till you drop
And voilà, just like that we have a completed a crash course in setting up Wordpress, Woocommerce, a shopping cart with items and categories, and integration with a Point of Sale system. Our next step is to build a custom shop that will carry stock and suit our needs.
Although that’s all there is to building a shop, we may want to explore a little into upgrading the design with a stylish template because the default templates can look a little plain. In addition, once a single shop has been established, we could copy the files and set up the database on a new domain to build more shops, if the need arises. Congratulations are due on making it this far and hopefully you’ll have plenty of customers visiting the new shop.