Tutorials

WooCommerce is great and is the best plugin for most WordPress e-commerce websites. However its shipping options can be quite limited.

On the face of it, WooCommerce offers a good choice of delivery and shipping options - flat rate, free shipping, international flat rate, local delivery and local pickup.

Unfortunately this isn't as good as it looks for two reasons:

Fortunately, there's an excellent solution to each of these problems:

• Solution 1 - A lot of people add more flexible international shipping costs by using YITH's Product Shipping plugin. 
• Solution 2 - The WooCommerce Shipping Calculator plugin lets customers check whether you ship to their country, and calculate the cost, directly on the product page. This is a super-simple way to avoid the frustration of getting bad news on the checkout. Either use it on its own or with YITH's plugin.

How to set up Flat Rate per State/Country/Region for WooCommerce

1. Find the 'Flat Rate per State/Country/Region for WooCommerce 'plugin in the WordPress plugin repository. (Plugins → Add New in the WordPress admin for your website). Install and activate it as usual.
2. Go to WooCommerce → Settings → Shipping in the WordPress admin. You will see that the plugin has added a new link to the right hand side of the list of shipping options: Flat Rate per State/Country/Region.
3. Ignore all the information about which countries belong to different regions - you probably don't need this. Scroll down to the actual plugin settings and set up the plugin as required. It's pretty self-explanatory and you can hover over the question mark icons for an explanation of each option.

Note: If you use this plugin then it will control ALL your shipping options, replacing WooCommerce's built-in Flat Rate and International Flat Rate options. This means that you need to disable Flat Rate and International Flat Rate and use the 'Flat Rate per State/Country/Region' section to add ALL your postage costs, including your domestic shipping rate and the overseas shipping. If you forget to disable the other shipping options then they will appear as alternate shipping methods in the checkout.

An example of how to use the plugin

Although setting up this WooCommerce shipping plugin is fairly self-explanatory, here's a screenshot showing how to set it up to achieve the following scenario:

• Shipping cost of $6.95 per order for the United States only (this example assumes that the website is based in the US).
• Shipping cost of $15.00 for Canada.
• Shipping cost of $22.50 for the rest of the world.

But what about shipping to individual countries within the UK?

TheFlat Rate per State/Country/Region for WooCommerce plugin is ideal for setting separate shipping rates for each country or region. However there are times when you want to break down your shipping zones further. For example you might want to charge different postage for England, Scotland and Wales - which WooCommerce treats as a single country (United Kingdom).

Since writing this post, WooCommerce has introduced shipping zones into its core plugin. This gives extra shipping options without needing any further plugins, so it's worth experimenting with. I've written a separate post about how to charge different shipping rates for each UK country.

Let customers calculate international shipping costs on the product page

So far, you've learned how to solve the problem of not being able to add fine-grained shipping costs per country. The second problem was how to let customers check international shipping costs without having to add products to their cart first.

You can easily solve this by installing the WooCommerce Shipping Calculator plugin. This handy plugin adds a domestic or international shipping calculator to your chosen location on the product page. That way, customers can enter their country and see the shipping cost straight away. As a result, they can make an informed decision on whether to add it to their cart.

It's your turn

We've looked at two of the best WooCommerce shipping plugins:

• Flat Rate per State/Country/Region for WooCommerce
• WooCommerce Shipping Calculator

I'd love to hear how you use them to improve how you charge for shipping per country. Please share your experiences in the comments below.

One of our WooCommerce clients recently asked how to prevent duplicate usernames. She wanted to know what would happen if a new customer creates an account on her WordPress e-commerce online shop and tries to add a username that is already in use.

WooCommerce has features built in to prevent duplicate usernames. Since so many websites use WooCommerce, I will describe the options to help anyone else who is worried about this.

Create username based on the user's email address

If you log into the WordPress admin and go to WooCommerce > Settings > Account, you can scroll down to a section called Registration Options. This allows you to tick a box called 'Automatically generate username from customer email'.

If you tick this box then when a customer creates an account during checkout, they will automatically be given a username based on the first part of their email address. Their username is not their actual email address, as most people assume. Instead, their username is the part of their email address which appears before the @. For example if my email is [email protected] then my username will be 'info'.

As you can see from this example, a lot of automatically generated usernames won't be very unique - how many people have info@ email addresses?! WooCommerce detects duplicate usernames and avoids the problem by adding a number after any duplicates. For example if I create an account when there is already a user called 'info' then my username will be 'info1'.

Many WooCommerce website owners aren't keen on this option because a lot of people like to choose their username to make it easy to remember. Fortunately there is another option.

Allow WooCommerce customers to choose a username

You can untick the 'Automatically generate username from customer email' box in WooCommerce > Settings > Account > Registration Options. This adds a field to your checkout page prompting customers to choose their own email address.

If a customer enters an email address that has already been chosen, WooCommerce will prevent any duplicate usernames. Instead of adding a number after the username, an error message will appear after you click the 'Submit' button. This prompts the customer to choose a different email address.

Which option is best?

As always, there are pros and cons of each option.

Some WordPress website owners like the convenience of automatically generating usernames. This is attractive because it's one less field for the customer to fill in. Research into what makes an effective online form has reliably shown that the more information the customer is asked to enter, the less likely they are to complete the process. This is a big deal on a WooCommerce website as store owners need to prevent abandoned carts and checkouts.

But for overall user-friendliness, it's nice for customers to be able to choose a username that will be easy for them to remember in future.

The decision largely depends on the purpose of your customer accounts. If customers will have little reason to log into their account in future then it's best to automatically generate their username as this speeds up the checkout process. If you want to encourage repeat business, or if customers will be logging in for many different purposes (e.g. if you offer online courses or a membership area) then they're more likely to want an easy-to-remember username. Think about your customers and choose the best option for them.

Whilst making some small improvements to our website recently, I came across a small problem displaying a random post in WordPress.

Background

Our website has a custom post type called "Testimonials". We use to this to record our client testimonials which are then displayed in various places throughout our site. In addition to this, we wanted to display a random testimonial on the sidebar, so that each time a page loads a different testimonial is shown. Sounds simple, right?

First Steps - creating a shortcode

The first step was to write a new shortcode which I could drop into a standard text widget in our main sidebar. I called my shortcode [random_testimonial]. I won't go into the details of creating a WordPress shortcode - this has been covered a lot elsewhere and the Shortcode API is a good resource if you need more information.

The next step was to implement the shortcode to retrieve and display our random testimonial. This shortcode would run when each time the sidebar is displayed. If you were looking to display other types of content in your sidebar or footer, you could easily modify this example to get display a random post or page, for example.

Attempt 1

This was the code I tried first. I'd already assumed this would be the way to do it, and I saw similar variants mentioned in other articles and forums:

if ( post_type_exists( 'testimonial' ) ) { 
 
   $testimonial_query = new WP_Query( array(
       'post_type' => 'testimonial',
       'orderby' => 'rand',
       'posts_per_page' => 1
   ) );
 
   if ( $testimonial_query->have_posts() ) {
      $testimonial_query->the_post();     
 
      // do something with post - e.g. the_excerpt(), the_content(), etc.
   }
   // Restore original post data
   wp_reset_postdata();
}

However, this didn't work as expected. One first load, it seemed to select a testimonial at random, but on second, third and subsequent loads, the same testimonial was displayed each time.

After a couple of minutes head scratching, I realised the problem might be to do with the object and database caching on our server. Our site is hosted with WP Engine and the query above is exactly the sort of thing that would be cached by their highly efficient caching infrastructure.

So I needed to try another approach.

Attempt 2

global $post;

if ( post_type_exists( 'testimonial' ) ) { 
 
   $testimonial_query = new WP_Query( array(
       'post_type' => 'testimonial',
       'orderby' => 'rand',
       'posts_per_page' => -1
   ) );
 
   if ( $testimonial_query->have_posts() ) {
      $random_int = rand( 0, $testimonial_query->post_count - 1 );
      $post = $testimonial_query->posts[$random_int];     
      setup_postdata( $post );
      
      // do something with post - e.g. the_excerpt(), the_content(), etc.
   }
   // Restore original post data
   wp_reset_postdata();
}

And this time it worked as expected, loading a different testimonial on each page load.

The key here is returning all posts from the database ('posts_per_page' => -1) and then randomly selecting from the list of returned posts (i.e. testimonials). In this case, we only have 15 or so testimonials so it's not a big database hit, and the query will be cached. But if you're querying 1000's of blog posts, you might want to limit your query to say 50 or 100, or perhaps limit on a certain category.

Once we have our list, we create a random number between 0 and the maximum length of the list (subtracting 1 as the array is zero-indexed). We then select the random testimonial from the posts list on the WP_Query object ($post = $testimonial_query->posts[$random]) and then call setup_postdata() on that post. Once we've done this, we can then call our usual loop functions such as the_title(), the_content(), etc., remembering to call wp_reset_postdata() afterwards to restore the original query's post data.

Important note: Did you notice the global $post; line at the top of this code snippet? Well spotted. That's because we have to pass the global $post object to setup_postdata() for this to work. So the variable we assign our random testimonial to must also be called $post!

Wrapping up

Hopefully this tip was useful to you. Let me know if you have any questions in the comments.

So you've designed a new WordPress website and it's ready to go live. Congratulations!

Going live is an important part of the web design process. Over the years, we have developed a detailed checklist of essential steps for launching a WordPress website. Read this checklist before you launch a website into the big wide world, and give it the best possible start.

1. Set the date

There's a right and a wrong time to go live. For some reason our clients always want to go live on a Friday. Bad idea!

Schedule the launch of the website for as early in the week as possible. This leaves the longest possible time to complete the go-live checklist and fix any teething problems before the weekend, when your WordPress web designer may not be available.

2. Move the WordPress website to its final location

Some people develop their WordPress website directly on their web host. If so, you can skip this step.

Others develop websites elsewhere, for example on a separate staging server or stored locally on their computer. This means that you'll need to arrange to move the finished website to your hosting account. This can take a while, so schedule it for at least a day or two before go-live.

Tip: If you haven't chosen a web host yet, we highly recommend WP Engine - the fastest, most reliable WordPress host we have ever worked with.

3. Final checks before going live

Our go-live checklist includes a few quality control checks to make sure we haven't missed anything during the WordPress web design process:

1. Test everything on the website and ensure it's working correctly. Leave no stone unturned!
2. Make a final check of the Settings section in the WordPress admin. Ensure things like the time zone are correct.
3. If you're using an off-the-shelf WordPress theme with a child theme, make sure no custom CSS has been added in the theme options. Custom CSS should be either in the theme options or the child theme, but not both.
4. Look at the Pages list in the admin and make sure all the pages are in the correct order. If there are lots of pages to re-order, consider a plugin such as Swifty Page Manager. This is worth doing even if you use custom menus and the order of pages isn't reflected on the public-facing website, as it makes it easier to work with the pages in future.
5. Ensure there's no demo content from the theme still on the website - e.g. pages, posts, custom posts, media files.
6. Go to Appearance > Themes, delete un-used themes and just keep the active theme (if you're using a child theme, you'll need to keep the parent and child theme) and the most recent default theme (e.g. TwentyFifteen).
7. Make sure all contact forms, admin emails etc. are set to the correct address - the WordPress designer's email address will often be used during the development process, so don't forget to change this before go-live.
8. Run the WP-Sweep plugin to remove all the page revisions etc. from the development phase. Delete this plugin afterwards.
9. Make sure none of the images are more than approx. 1,920 pixels wide, or bigger if you are using retina images. Use the Imsanity WordPress plugin to bulk-resize them if needed. Leave this plugin active to resize any huge images that are accidentally uploaded in future.
10. Use an image optimisation plugin such as WP Smush to bulk-optimise all the images on the site. Leave this plugin active if images will be added to the website in future.

4. Set up caching measures for improved page load times

Caching is an important way to speed up a WordPress website. Most people don't use caching during the development process because it can interfere with your work, for example by preventing you from seeing your changes straight away. This means that you need to set up caching immediately before the website goes live.

Caching is most effective when applied at hosting level. If your host doesn't offer caching, install a caching plugin.

• If the site is hosted on WP Engine (our recommended WordPress web host), log into WP Engine and change the following settings:
  • CDN > Enable (this isn't caching, but it also boosts performance if it's available on your plan)
  • Utilities > Enable Object Caching
• If the site is hosted on SiteGround (our recommendation for smaller or personal websites) or another company that provides caching - set up caching using the instructions from your web host.
• Other hosting - install a caching plugin. Our favourite (if you're using an inferior web host that doesn't do their own caching!) is W3 Total Cache. To use it to its best effect, it ideally needs setting up by a WordPress professional as it requires quite a lot of knowledge to get right.

5. Set up automatic backups

Our recommended web hosts WP Engine and SiteGround have such good backups that we don't use backup plugins, unless a client has very specific requirements for storing backups. If you're using a web host with less good backups, or just want extra peace of mind, then it's worth adding a plugin.

Our favourite backup plugin is BackupWordPress and we also quite like BackWPup. For most websites, I'd recommend scheduling a weekly file backup and daily database backups. You will want more frequent backups if you're planning to make significant changes on a regular basis or if your website includes a lot of user-generated content.

Go through the settings for your backup plugin carefully and make sure it's not backing up anything non-essential such as the WordPress core and backup folders (don't backup your backups!). If you're running file and database backups at separate intervals, don't bother with a 'Full' backup as this will double up on other backups. Set your backups to auto-delete after a set period so they don't take up too much space.

The simplest option is to set your backups to save to a folder within your hosting account. For extra peace of mind (for example if anything happens to your web host), save your backups to a third party location such as a separate FTP account with a different host, Dropbox or Amazon storage.

Tip: Backup plugins use a lot more server resources than backups created directly on the server. This means that the website may slow down while a backup is being created using a plugin. Schedule the backups to take place in the middle of the night, and consider doing backups in some other way - particularly for very large websites.

10. Submit to search engines

You should also submit the website to search engines, whether it's a new site or a redesign of an existing website. This encourages the main search engines to crawl the new website as soon as possible to index the new content.

• Google - https://search.google.com
• Bing - bing.com/webmaster/SubmitSitePage.aspx

11. Set up Google Analytics

Google Analytics is a powerful tool to track how many people are visiting the website and how they are interacting with it. In my experience, nearly all WordPress websites will benefit from having Google Analytics or a similar tool installed. This should be done as soon as the website goes live on the final domain.

1. Log into Google Analytics and add the website as a new Property
2. Install and set up the Google Analytics for WordPress plugin

Tip: I recommend using the above method even if the theme has a 'Google Analytics Tracking Code' box. This is because using a separate Analytics plugin means that you won't lose your tracking code if you ever switch theme.

12. Set up Google Webmaster Tools

Log into Google Webmaster Tools and add both the www and non-www versions (e.g. www.barn2.com and barn2.com) so that you can tell Google which is your preference. Verify it using your Google Analytics account, which you just set up in the previous step.

Look at the information in Google Webmaster Tools to make sure Google is able to crawl the site correctly. Fix any problems that are reported. (Webmaster Tools will also email you if it detects any major problems in future.)

Other search engines have their own version of Webmaster Tools which are specific to them. Our go-live process only includes Google Webmaster Tools because Google is the main search engine and the issues they are having will be relevant to other search engines too.