WooCommerce Related products, Up-Sells and Cross-Sells Explained

When you work with WooCommerce products there are several ways to stimulate customers to buy other products. Often we talk about related or recommended products when we talk about products we want customers to buy on top of the one they are considering buying or put into their cart. In WooCommerce speak we talk about related products, up-sells and cross-sells. Let’s go through WooCommerce Related products, Up-Sells and Cross-Sells one by one here, shall we?

Related Products

Related products are products that are loaded below an individual product when they have something in common. They are related in some way. This commonality can be based on two things:

  • tags the product is tagged with
  • categories the product is under

So, to make related products work, or at least work on product pages you have to do the following. You should give your product tags so they can share those among each other and connect or relate that way. The other option is to put the products into categories. That way they can be connected by category. If you do not do either one of these related products won’t work well.

Up-Sells

Upselling means suggesting more expensive or better quality products for example. These products can be added manually to each product in the backend. You do this under product data (simple product) > linked products field:

Linked Products

When you click on the field it will ask you to add three characters so it can try to guess the product you want to connect it to:

Up-sells Search

Cross-Sells

Cross selling – suggesting product on the cart page before customers goes to the checkout – is something else. It does work in the same way as up-sells in the backend. You add cross-sells the same way. Where it differs is that cross-sells are offered in the cart view:

WooCommerce Cross-Sells

So if you would like to make customers buy other products before they go to the checkout cross-sells are the way to go.

 

Summary

Well, I think we covered WooCommerce Related products, Up-Sells and Cross-Sells pretty well here. Do make sure you use these options. They will helop you increase your sales. Displaying related products, doing cross-sells or up-sells  simply work really well. In increases your bottom line big time. That is why big stores use these techniques.

What is not covered here is trying to sell products on the checkout page nor suggested sales based on history or email campaigns suggesting products based on past sales. For that I will create another blog post or two one of these days.

 

WooCommerce – DIY One Page Checkout

To improve conversion on your WooCommerce website a one page checkout page is very useful. When you allow customers to skip the cart page and go directly to checkout this will make it easier for them to buy an item. This reduces the rate of potential customers dropping out during the buying process. A whopping one in ten people drop out because the checkout process is too long – Webcredible Poll. And that makes sense in this age of everything on demand, smartphones and Google doesn’t it. We do not like waiting. So let’s deal with this shall we? Let’s build a DIY One Page Checkout!

DIY One Page Checkout Prerequisites

There are paid plugins that help you with direct checkout, product button options and all on one checkout pages. There is for example WooCommerce Direct Checkout Pro. But this direct checkout plugin does not do all that is needed. You after all still need a checkout page that loads cart details, but not all cart view details.

There are also a couple of One Page Checkout plugins like WooCommerce One Page Checkout and One Page Shopping , but again they do not really offer what we need. The former offers custom one page checkouts while we want this to be for all products. The latter has a demo that currently is not working and support that is lacking.

There may be others that I have missed of course, but let’s go the DIY way and set all up ourselves shall we? Let’s build a DIY One Page Checkout setup.

To set up the whole one page checkout there are several things we have to take care of. To achieve better lead conversion and get your customers to buy using direct checkout you need the following:

  • Redirect to Checkout on clicking “add to cart”
  • Title change of “add to cart” to buy now or “process to checkout”
  • Add Cart or view cart details on checkout page
  • Checkout Cart Notice – Should not be loaded as it will be irrelevant

Direct Checkout

To get the add to cart button, not just add your product to the customer’s shopping cart, but send him directly to the cart you can add the following code to your theme’s functions.php

add_filter('add_to_cart_redirect', 'theme_prefix_add_to_cart_redirect');
function theme_prefix_add_to_cart_redirect() {
 global $woocommerce;
 $checkout_url = $woocommerce->cart->get_checkout_url();
 return $checkout_url;
}

This code will make the “add to cart” button redirect to the checkout page. This way the view cart is bypassed.

Product “Add to Cart” Button Change

To change the button text from “add to cart” to “proceed to checkout” or “buy not” there are two action hooks you can use. One to replace the text on the product archive page or shop page and one action to replace the text on the single product page.

To change the “add to cart” text on the single product page add the following filter:

add_filter( 'woocommerce_product_single_add_to_cart_text', 'woo_custom_cart_button_text' ); // 2.1 +
function woo_custom_cart_button_text() {
 return __( 'Proceed to Checkout', 'woocommerce' );
}

To change the “add to cart” text on the shop page add the following filter:

add_filter( 'woocommerce_product_add_to_cart_text', 'woo_archive_custom_cart_button_text' ); // 2.1 +
function woo_archive_custom_cart_button_text() {
 return __( 'Proceed to Checkout', 'woocommerce' );
}

Cart Content Display on Checkout

To load the cart view or cart contents at the top of the checkout page before the billing forms you can just add the shortcode for the cart before the checkout shortcode on the checkout page.

[woocommerce _ cart]
[woocommerce _ checkout]

NB Spacing added to avoid real display

This will then show the full cart on the checkout page. A lot easier than dealing with this using custom code. There may be a good action or filter for it, but I have not found one as of yet.

Abridged Cart View on Checkout

The issue with the cart loading as we are doing with the shortcode  is that the coupon code option will then be shown twice. To hide this in the cart display table use this CSS:

.woocommerce-checkout div.coupon {display:none;}


.woocommerce-checkout td > input.button {display:none;}

I may add an action or filter for this too at a later stage. But this CSS option does the trick and does not force you to add a checkout template to your-theme/woocommerce folder and tweak it. I prefer to avoid WooCommerce templates in child themes as you then depend on updates in WooCommerce AND the parent theme.

Hiding Cart Notice

It does not make sense to show the cart notice on the checkout page. The cart overview will be there already so no need to have this notice with a link to the cart. Especially if you have a cart icon with these options in the main navigation already. Use this CSS to hide this notice completely:

.woocommerce-checkout .woocommerce-message {display: none !important;}

Summary

And there you have it. A DIY One Page Checkout all done with all the tweaks needed:

  • direct to checkout from product or shop page
  • proceed to checkout or buy now button text
  • checkout cart notice removed
  • checkout page with cart overview

As mentioned here and there, some solutions could perhaps be replaced with better ones. Certainly the CSS tweaks would be better done as actions or filters. However until I find better and easier options these will work wonderfully well for you and me!

 

Disclaimer: All tested with Total Theme Child Theme

Keeping Local WooCommerce Site in Synch with Live Site

Been working locally on a WooCommerce site. Changed permalinks, changed the theme, using local theme supported FAQ instead of plugin based FAQ on live. Also dropped a Text based widget in favor of a menu widget and changed the slider. And some other stuff. So I changed a lot. In the meanwhile there have been orders as well as AWeber newsletter subscriptions. So how do I deal with keeping the local WooCommerce site in synch with live site?

Options to Keep Local and Production in Synch

Mind you, synchronization of files is not the issue here. That can be done with version control such as Git. Or in my case not an issue really as the client won’t update content or products so no new files will be added. The database synchronization is the issue.

Well there are three things you can do to keep your WooCommerce Stores in synch. You can export the products, variations,orders, refunds, coupons and webhooks  using the WordPress export tool and import them. Two, you can use the Customer/Order/Coupon CSV Import Suite . This way they do keep in synch. The other way is just to leave database synching alone and update the live site with file changes and update the database by activating and changing content live. Here the three options in detail with pros and cons.

WordPress Importer

This can be done using the slightly buggy WordPress Importer Tool. I have used it before for importing and exporting basic content from one site to another. I have also used table export and import. And it does offer the option to export:

  • Products
  • Variations
  • Orders
  • Refunds
  • Coupons
  • Webhooks – see docs

There will be issues though as it is kind of buggy – new tools in the works for ages – and not a WooCommerce only tool. So definitely not my first choice.

Customer/Order/Coupon CSV Import Suite

Then you think well, let’s use the WooCommerce Addon – the Customer/Order/Coupon CSV Import Suite – mentioned earlier. That should do the job. Well, not quite apparently according to Mike Jolly. Mike Jolley, a WooCommerce Developer stated in this WordPress support thread that:

I think it’s safer to move code than move data, imo anyway. Especially if it’s constantly changing.

That makes sense and shops of course do change constantly. But sometimes, and I my case, it would be nice to do so. It would be great to move all files and the database once all is done and in the meanwhile keep things in synch.

There is another bigger issue he mentions though with exporting and importing WooCommerce data. And that is worse:

The orders you import may have different IDs due to auto-incrementing IDs in the database. The problem is IDs may differ from your emails + records.

So you could later on have issues with order IDs not matching emails and records. And that would be a big problem. However, Mike Jolley talked about this 8 months ago. Seems like the latest Customer/Order/Coupon CSV Import Suite can do more now .

woocommerce customer coupon order import suite

Since June 2016 it can merge customer, order and coupon data that is. Isn’t that cool!  Still, you could of course have to cough up $79, but that certainly can be worth it in many situations including mine. The main issue I was having is a difference in orders. And this addon should help me with that.

Updating Live with Local Site Data

The final option is just to not keep the database locally and on production in synch. You could test all needed changes locally and do them on live when all is done. That does mean more downtime or maintenance time. This as you would have to move all changed files, added theme, and plugins to live first. Activate them there. Then configure them and adjust content when need be. So this option really depends on how confident you are you can do all this in the maximum downtime allotted by you and your client.

What to Choose?

Well, in my case I will probably go for leaving database synchronization alone for now. I have not tested that addon and I prefer not to spend extra $ on this project now. I may use it in the future though. And if you read this post and are a developer with experience using that addon do leave me a comment. And if you are an end user, well perhaps the addon is the right choice for you. It does sound like an awesome tool and Skyverge is a solid company.

PS I do hope Delicious Brains will have Mergebot up and running soon so I do no longer have to deal with these database synch issues – post on it here.

Footnote Image of the White Rabbit in Alice in Wonderland by John Tenniel is in the in public domain

WooCommerce Featured Products Page

Sometimes you would like to have a homepage with WooCommerce featuring products or a separate page to show of your current trending products. In that case you need to create a template that loads certain WooCommerce products. That and some code voodoo.

For the HumbleShop theme we have implemented this for a customer before. Let me show you what code is needed and what it does. If you prefer the full template see the final chapter of this post. Just remember that we load no. of featured items from the theme options page here.

Featured Products Custom Query

To load the featured products you need a custom query with arguments to load them. For that we use the WP_Query class. The custom arguments we added to it are:

  • post type
  • no of featured products per page
  • pagination
  • meta query loading the proper meta key and value
<?php
 $num = ot_get_option( 'hs_homefeatno' );
 $paged = ( get_query_var('page') ) ? get_query_var('page') : 1;
 $args = array( 'post_type' => 'product', 'posts_per_page' => $num, 'paged' => $paged );
 $args['meta_query'] = array(); 
 $args['meta_query'][] = array(
 'key' => '_featured',
 'value' => 'yes'
 );
 $loop = new WP_Query( $args );
 while ( $loop->have_posts() ) : $loop->the_post(); global $product; ?>
 <?php wc_get_template_part( 'content', 'product' ); ?>
 <?php endwhile; ?>
 </div>

With the arguments discussed further below you can start a new instance of WP_Query to load the the featured products. As you can see we added $product as a global variable. This to make the variable available outside the local scope. Reason for using WP Query is to customize the loop ( awesome Treehouse blog post on WordPress Loops) .

Post Type

WooCommerce creates the post type product so we add that as our custom post type to be loaded. It is a custom post type to be precise. WordPress has five post types or content types and they are:

  • page,
  • posts
  • attachments and
  • revisions
  • navigation menu items

WordPress allows you to add your own and WooCommerce takes care of that for us creation products.

Featured Items Theme Option

To add the no. of featured items to display we added an extra item to the theme options. You could hard code it as well, but this is much more convenient. HumbleShop uses the theme options Options Tree by Valet Designs. Their repository is here in case you want to learn more about it.

Here below the option we added:

 array(
 'id' => 'hs_homefeatno',
 'label' => 'Number of Featured Products',
 'desc' => 'Number of featured products you want to display on homepage',
 'std' => '9',
 'type' => 'text',
 'section' => 'general',
 'rows' => '',
 'post_type' => '',
 'taxonomy' => '',
 'min_max_step'=> '',
 'class' => '',
 'condition' => '',
 'operator' => 'and'
 ),

We load the number added with the code:

ot_get_option( 'hs_homefeatno' )

ot_get_option being an Options Tree option

Pagination

The $paged variable activates pagination for the featured product page. It uses the get_query_var function. The same snippet and more details can be found in this codex article. Basically it loads pagination for the current page. Without it the pagination navigation won’t work. You can add pagination links with the code below:

<nav id="home-products-nav">
 <?php previous_posts_link( '&laquo; PREV', $loop->max_num_pages) ?></li>
 <?php next_posts_link( 'MORE PRODUCTS &raquo;', $loop->max_num_pages) ?>
 </nav>

It works thanks to the earlier added pagination in the custom query.

Meta Query

Meta_Query is part of the WP_Meta_Query class. It is an argument of that class and an array at that. It can contain the meta key (custom field key) and value (custom field value). And this is needed here as we need to check whether a product is featured and if so add it to the loop.

WooCommerce Product Content

Once the loop has been started up we load the products with this WooCommerce request:

wc_get_template_part( 'content', 'product' );

WooCommerce Get Template Code is documented here and the function in detail can be checked here. It looks for the WooCommerce template in your theme root or woocommerce folder inside your theme and then grabs that content. We have woocommerce/content-product.php in the child theme that can be loaded.

NB woocommerce_get_template_part is deprecated and

wc_get_template_part

is the new WooCommerce template tag and recommended now. It has been deprecated since WooCommerce 2.1

After all that code has been added the while loop will be closed. All should be well and then content should be loaded. Pagination loading follows below it, but we covered that discussing the pagination argument for the WP_Query earlier.

Full Template Code

Here below is the full template code we use for displaying the featured posts on the homepage for our HumbleShop child theme. As you can see we load a slider as well. This and some other snippets and html tags we need to display all well. This piece of code and others you can leave out of course.

Just like any other page template you can this one to your theme’s root.

<?php
 /*
 Template Name: Homepage
 */
 get_header(); ?>

<!-- ============ -->
 <!-- MAIN SECTION -->
 <!-- ============ -->
 <div class="container">
 <section class="feat">

<?php get_template_part( 'slider', 'index' ); ?>

<div class="row">

<!-- Content -->
 <div class="col-xs-12">
 <?php while ( have_posts() ) : the_post(); ?>

<div class="row">

</div>

<div class="row">
 <div class="col-xs-12">
 <?php do_action('woocommerce_before_shop_loop'); ?>
 </div>

<div class="products clearfix">
 <?php
 $num = ot_get_option( 'hs_homefeatno' );
 $paged = ( get_query_var('page') ) ? get_query_var('page') : 1;
 $args = array( 'post_type' => 'product', 'posts_per_page' => $num, 'paged' => $paged );
 $args['meta_query'] = array();
 $args['meta_query'][] = array(
 'key' => '_featured',
 'value' => 'yes'
 );

$loop = new WP_Query( $args );
 while ( $loop->have_posts() ) : $loop->the_post(); global $product; ?>

<?php wc_get_template_part( 'content', 'product' ); ?>

<?php endwhile; ?>
 </div>
 <nav id="home-products-nav">
 <?php previous_posts_link( '&laquo; PREV', $loop->max_num_pages) ?></li>
 <?php next_posts_link( 'MORE PRODUCTS &raquo;', $loop->max_num_pages) ?>
 </nav>
 </div><!--/.products-->

<?php wp_link_pages( array( 'before' => '<div class="page-links">' . __( 'Pages:', 'humbleshop' ), 'after' => '</div>' ) ); ?>
 <?php edit_post_link( __( 'Edit', 'humbleshop' ), ' <p class="text-center"><i class="fa fa-pencil"></i>', '</p>' ); ?>
 <?php endwhile; // end of the loop. ?>
 </div>

</div>
 <?php
 $brand = ot_get_option( 'hs_brand' );
 $brandlist = ot_get_option( 'hs_brandlist' );

if ($brandlist) { ?>
 <h5 class="subhead theme brands"><strong><?php echo $brand; ?></strong></h5>

<div class="tab-brand">
 <div id="flexcarousel-brands" class="flexslider">
 <ul class="slides">

<?php foreach($brandlist as $key => $value) {
 echo '<li>';
 if ($value['hs_brandimage']) {
 echo '<img src="'.$value['hs_brandimage'].'" alt="'.$value['title'].'" />';
 } else {
 echo '<img src="http://cambelt.co/200x100" />';
 }
 echo '</li>';
 } ?>

</ul>
 </div>
 </div>
 <?php } ?>

</section>
 </div>

<?php get_footer(); ?>

WooCommerce Customer Loyalty Tips

Just today I read a great post by Nicole Kohler at WooCommerce It had some great tips on improving customer loyalty for WooCommerce users. Here my take on her WooCommerce Customer Loyalty Tips.

Pre Purchase Strategy Downsides

I have a lot of customers that do work with pop-ups and often then offer a discount right away. This seems to be a good way to get customers on board, but perhaps not the best one long term. If you can reward a customer for when he returns you can make more customers happy long term and get them to come back for that second order.

Post Purchase Reward

A reward after a purchase seems like an interesting strategy and perhaps better than the off the bat discount for the first purchase. This as a repeat customer tends to be way more valuable than a one of buyer. So this way you can hit multiple birds / customers with one stone. And we can all agree that is a great outlook.

Multiple Purchases Rewards

Buying a certain product multiple times should be rewarded too. This can be done giving discounts or reward badges like big players like Target do. Basically you should build something into your WooCommerce store to reward customers if they:

  • buy certain items multiple times or
  • buy from certain categories multiple times
  • belong to special groups like veterans

Dynamic Pricing Extension

WooCommerce also has an extension to dynamically adjust pricing based upon customer purchases. Totally new to me to be honest, but this sounds really awesome. This extension automatically can adjust the price based on

  • amount of products or
  • customer user role (silver members, gold members,…) or
  • product category

You can configure this all with is from the backend and adjust again when need be. Sounds like a great WooCommerce extension doesn’t it!

Members Only Programs

She also mentioned other tips such as loyalty programs for members only. So giving additional or general discounts for people who become a member. You could create bronze, silver and gold membership programs for example and give each its own discount category. Many malls globally do this and people do love these deals.

There are many member websites already out there that I know of. I do think many entrepreneurs have thought about this or tried this out. But this might be harder to get started at the beginning stages. Still something to keep in mind though.

Changing the Number of Product Columns in WooCommerce

Been working on a WordPress theme that will support WooCommerce. Needed to display less columns per row on the product category page. Fortunately changing the number of product columns in WooCommerce can be done with built in WooCommerce functionality.

WooCommerce Column Filter

I found WooCommerce documentation on a filter that we can use. It is a simple WordPress / WooCommerce filter that allows you to filter the WooCommerce loop and choose the amount of columns to be displayed. Really happy no extra coding on my part was needed really. More information on implementation you can check out here below.

WooCommerce Filters in Roots Sage

Code you can use inside WooCommerce templates in a Sage based theme is the following:

/**
*
* Change number or products per row to 2
* https://docs.woocommerce.com/document/change-number-of-products-per-row/
*
**/
 add_filter('loop_shop_columns', __NAMESPACE__ . '\loop_columns');
 if (!function_exists('loop_columns') && is_tax('product_cat')) {
 function loop_columns() {
 return 2; // 2 products per row
 }
 }

For working with filters in Sage you need PHP namespaces  – Roots Sage Blog Post on this. That is why the filters are slightly different. Also see I added an extra condition to load it on the Product Category page.

Column Filter in Non Namespaced themes

For regular themes not using namespaces you can use the following add_filter:

// Change number or products per row to 3
 add_filter('loop_shop_columns', 'loop_columns');
 if (!function_exists('loop_columns')) {
 function loop_columns() {
 return 3; // 3 products per row
 }
 }

as shown in the WooCommerce Documentation. It is similar to the Sage implementation as you can see. This a just a little simpler. And it can also be added to the functions.php file in your theme.

Filter Location Caveats

Do make sure you add the filter to the WooCommerce template and not to functions.php if you are working with conditionals directly this way. See more information on conditional tags in WooCommerce documentation here . Also conditional tags in the WordPress Codex is a good place for you to look into. It is not impossible as shown below, but it depends on how it is loaded there.

Functions File Workaround

Did in the end try a workaround to add it to files being included in function.php despite using WooCommerce conditionals. Took some effort on my part though. Initially when I added this function:

function loop_columns() {
 if (is_product_category()) :
 return 2; // 2 products per row
 endif;
 }
add_filter('loop_shop_columns', __NAMESPACE__ . '\loop_columns');

to extra.php which is loaded into functions.php I got this error on product pages (category pages were fine and loaded the columns dictated):

( ! ) Fatal error: Uncaught DivisionByZeroError: Modulo by zero in /srv/www/domain.com/current/web/app/plugins/woocommerce/includes/wc-template-functions.php on line 250

which referred to the WooCommerce loop:

if ( 0 === ( $woocommerce_loop['loop'] - 1 ) % $woocommerce_loop['columns'] || 1 === $woocommerce_loop['columns'] ) {
 return 'first';
 }

And the DivisionByZero PHP error refers to a trial to divide a number by zero using the division operator %. More information on it here. Googling I found a lot of sites suffering from this error. Some due to the use of a plugin WooCommerce Product Archive Customizer . No quick solutions or explanations really though.

In the end I figured I needed the function to tell what amount of columns to display in other situations not equal to the condition. So I created this function that did work:

function loop_columns() {
 if (!is_shop()) {
 return 2; // 2 products per row
 } else {
 return 4;
 }
}
add_filter('loop_shop_columns', __NAMESPACE__ . '\loop_columns');

Decided to change the condition here and use shop. Might revert to product_category at a later stage, but this seems to work for me. And it saves me loading another WooCommerce template in my theme!

NB Function is loaded at the end of the extra.php

Columns of Choice Displayed

If you did all this changing the number of product columns in WooCommerce should have been a lot easier than we both thought. It is also code that you can adjust with ease in the future. A win win situation!

WooCommerce Storefront Theme Configuration

To set up your site with WooCommerce and for it to look well you need a theme that is built with WooCommerce in mind. WooCommerce works with a specific set of templates to turn WordPress into an ecommerce site and these templates should be styled in the style of your theme.

Storefront

In this tutorial we shall install WooCommerce’s Storefront. It is a great WordPress theme that is free and created by the people running WooCommerce. And therefore this theme will work with the WooCommerce plugin out of the box and work of the bat. Follow the earlier mentioned link, download it and then go to appearance > themes . There you need to click on the button add new:

add new theme

Uploading WooCommerce Storefront

Next step it to click on upload theme and upload the zipped file

upload theme

Uploading of zipped theme file:

upload zipped theme

And then do not forget to activate the theme:

activate storefront theme

WooCommerce Storefront Options

It will then offer you the option to follow a guide to get started with Storefront which can be useful. It will show you a screen with news on Storefront, options to enhance the theme with (paid) extensions such as:

  • menus,
  • product hero
  • Designer
  • Reviews
  • Blog customizer
  • WooCommerce Customizer

Get started with Storefront

Storefront Welcome Screen here below is where they will indicate whether or not WooCommerce has to be installed, how you can enhance Storefront:

Storefront Welcome

 

This as well as what (paid) child themes are available for Storefront like Outlet for $39:

Outlet Storefront Child theme

 

Dummy Content

You can add dummy content to it if you start out from scratch. This will give you the demo look and a start to begin building your site with. Dummy content in my opinion is very useful to start out with. But if you prefer not to you skip this section. Click on link to dummy content and you will see this Github repo file you can then check as raw content and then save that to a file with the same or another same with the extension .xml. This you can then import.

dummy data

To import the dummy xml content you save the xml file and upload it using the WordPress Importer under Tools > Import.

dummy data xml file

 

When you pick WordPress to import WordPress data

Import WordPress Data

you may have to install the WordPress importer plugin and once that is done you can import the dummy data. Choose the xml file from your PC and upload it.

dummy data xml file import

You can then choose to attach all data to an existing user or the user it was created with. It is called assigning authors. And you can also decide whether or not to import the file attachments. As the latter often does not work you could skip and and just deal with the content instead.

assign authors and import attachments

You will probably get warning that there are errors or that importing of this or that failed – a new importer has been in the works for some time – but most if not all dummy data should get imported anyways. Here a screenshots of dummy products:

dummy products

Pretty useful to see what type of products can be added and to see what configurations are possible. You will however have to delete or adjust all imported content at a later stage.

Besides general dummy data you can also import dummy tax rates, product variations and general products. See overview at Github of all dummy data files here.

Well that is it for this post. The next one in this series will be one configuring WooCommerce in general!

WooCommerce Installation

As mentioned in a previous post introducing WooCommerce I would explain how you can install WooCommerce.  In this article we will go through the steps for doing just that. We will start out with a WordPress website, assuming you have taken care of that. Based upon that setup we will install WooCommerce and do the basic setup.

Logging into the backend

To do the WooCommerce installation go to the WordPress Dashboard or backend. This means you need to go to domain.com/wp-admin most of the time. You will be redirected to wp-login and there you can enter your username and password to login.

Logging into WordPress

If you were logged in already you will see the Dashboard right away.

WordPress Dashboard

Installing WooCommerce Plugin

There go to plugins > add new in the sidebar menu. Then search for WooCommerce – in Rhand‘s favorites (my nick) I added it already – and click on install now.

installing WooCommerce Plugin

After the installation make sure you choose activate the plugin as well:

Activate Plugin

WooCommerce Guided Setup

We then are sent to the WooCommerce guided setup. A really user friendly way to setup your ecommerce site using WooCommerce. You can skip the setup and do it later, but we do think it smart to set up most if not all necessary information right away.

WooCommerce Guided setup

Page Setup

Next page in the guided tour that comes up is the page setup. Here it will tell you what essential pages will be stored.

WooCommerce Page Setup

It will also tell you these can be managed from the pages section on your WordPress website. It will also tell you where menu items can be added. The pages that will be created are:

  • Shop
  • Cart
  • Checkout
  • My Account

Product pages and categories you will be adding yourself later on.

Store Locale Setup

The next step is the store locale. You will have to indicate

  • where the store is based,
  • what currency the store will be using,
  • which units you will be using for product weight and
  • what units you will be using for product dimensions

Store Locale Setup

Many nations will be using the metric system, but customers in the UK or US for example will be using the imperial system. After this shipping and taxes are up.

Shipping and Tax

In most countries sales tax are charged and most shops do ship physical goods, but not all and not every nation applies the same rules. So this is where you check whether you will be using shipping and whether taxes will be charged.

Shipping and Tax Setup

Let’s say you pick both and have sales tax and you ship goods. This is what you will see:

Sales Tax and Shipping picked

So now you could enter shippings costs for x $ per order or item or both. You will now also be able to choose to show prices including or excluding sales tax or VAT. And there is also a neat option to import some starter tax rates. Will will discuss this in detail some other time. The same goes for more complicated setups with different shipping rates per product type, location and weight.

Payments

Important part of any ecommerce setup is the payment methods. WooCommerce comes with PayPal out of the box. Just need to add your email address and you are ready to roll.

Offline payments are also easy to add. There are the following options to check / select:

  • Cheque
  • Cash on Delivery
  • Bank Transfer

The cheque is no longer used a lot, but a lot of customers do want to use bank wires as well as the cash on delivery option. There are also options to work with Stripe, iDEAL (Netherlands), Authorize.net and many other payment providers. For those WooCommerce extensions have to be added. This can be done a little later on.

WooCommerce Payments

Store is ready

After this the final screen will tell you that your store is ready. They will ask you if you would like to share non sensitive data for diagnostics. They will also show you some places you can get tutorials at. You will also be able to add your first product or WooCommerce’s dummy data to get started. We will discuss this in more detail the next time.

All set!

Your store is ready

Introduction to WooCommerce

Been wanting to write this introduction to WooCommerce blogpost for quite some time now. What is WooCommerce all about and is WooCommerce good for me and my business endeavours? How does WooCommerce compare to an eCommerce system like Magento? How can I set it up? Does it work with my local payment provider? Who is behind WooCommerce? This being an intro to WooCommerce I will not answer all your questions right away, or at least not in great detail. But I will however get you two acquainted and explain to you why we love WooCommerce as we love WordPress.

WooCommerce

WooCommerce is an eCommerce system that works in harmony with the state of the art Content Management System WordPress.

WordPress is web software you can use to create a beautiful website, blog, or app. We like to say that WordPress is both free and priceless at the same time.

The company behind WordPress, Automattic, recently bought WooCommerce. It realized WooCommerce is the best ecommerce extension WordPress has on offer and decided the two should join forces.

WooCommerce is a plugin or extension that turns a WordPress website into an online store. It is a very powerful plugin that allows you to sell just about anything, anyway you want, from anywhere, using just about any payment gateway you would like to use. During the installation process WooCommerce guides your way using breadcrumbs and specific steps to get your store up and running. Really nice.

WooCommerce, a great eCommerce Choice

WooCommerce is great for many reasons. It works in harmony with WordPress, thereby dipping in the greatest ecosystem globally provided by the best open source CMS in the world, WordPress. Two, is is very easy to use and easy to setup – see earlier mention of setup process. Unlike other systems out there like Magento or Prestashop, WooCommerce is very intuitive and you do not need nerdlike skills to run you shop. No commandline voodoo needed here. And no sudo or root server access needed like Magento 2 now needs. Magento even agrees with me settings things up is hard here

We know it’s challenging to install the Magento software.

Well with WooCommerce it is a breeze.

And finally one more great reason to go WooCommerce, the variety of options and themes. There are many WooCommerce themes to choose from. Themes that run well with WordPress and WooCommerce. Check out themeforest and other places and you will be blown away. And the extension variety it is also awesome. Sure you will spend some bucks, but still cheaper than other markets like Magento Commerce and way better options.

Setting up WooCommerce

So how can I get started? How can I get my shop setup online to start selling my products? Or how can I create a catalog to show off my stuff for my customers to buy in my shop offline later on? As stated it is not hard to get up and running. But it depends on your skills and how far you are in the process with your online store / website in general.

If you already have WordPress as a site up and running it is easy. If you have some webdesign or nerdy skills even better. You will just install the plugin and can start configuring. One thing to keep in mind is that your theme may not be WooCommerce compatible. This means most of the time that you can show your products, but that the styling will be horrible. So make sure you check this.

If you are starting with a shop from scratch you will have to setup WordPress, WooCommerce, pick and or buy a theme, create a site structure and other things. Things can perhaps be daunting at first and this is not the best way to go for all people who want to sell online. Here below a long list and short list of things to think about.

Things to think about – Long List

Whether you have a site up and running or are starting from scratch you will need to figure out things like:

  • page to load the store
  • menu item for shop
  • product categories
  • product varieties
  • product descriptions
  • product images
  • no of products
  • pricing
  • discounts
  • taxes
  • currency
  • email templates
  • cross sells and upsells
  • payment gateways
  • delivery options

As you can see quite a list, but also a list containing many items you should be familiar with dealing with selling products in the real world. Best to work these out with your web developer.

Things to think about – Short List

Before you start populating your store you should think about things like:

  • shop structure – categories, sub categories, type of products
  • amount of products
  • product varieties, product descriptions and or images
  • shop location on site
  • payment options

These are things you can, and often better can, work out alone. You know your product, you know your market, you know the payment providers you would like to work with. And if there is uncertainty in any area, you again contact your developer.

Follow Up Posts

This will be a series of posts. In the next posts we will cover topics such as :

WooCommerce Sequential Order Numbering

Those who have been working with WooCommerce may have noticed that the order numbers are not sequential (seems like certain orders are missing in action) and may have been wondering why they are not neatly in order and seem to skip numbers every now and then.

Why WooCommerce Orders are not Numbered Logically

Well the reason why is because WordPress Post IDs are used and if an x no of ids have been taken after the latest order the new number will get a different ID number. It may be that a new page or post with a certain ID no has been created or a Custom Post Type. See a more thorough explanation here at Speaking Bites.

WooCommerce Sequential Order Numbering Plugin

If you find this annoying and you want to have the numbers in order there is a nice plugin you can use for this. It is called WooCommerce sequential order numbers and the free version can be downloaded from the WordPress Plugin repository here. The author summarizes the plugin as follows:

This plugin extends WooCommerce by automatically setting sequential order numbers for new orders. If there are existing orders at the time of installation, the sequential order numbers will start with the highest current order number.

NB So it does not fix earlier discrepancies, but will make sure future orders follow each other nicely and orderly.
There also is a Pro version. This version offers more than just allowing you to make orders follow each other number wise. In addition to this it allows you to:

  • set the starting number
  • add a custom prefix*
  • add a custom suffix*

* ie, you’d prefer something like WT101UK, WT102UK, etc