How to unlock the power of WooCommerce on mobile

 As manufacturers pack more power into mobile devices — and they become readily available worldwide — our tendency to use them for everything possible has risen dramatically.

Why pick up a laptop or sit in front of a desktop computer if you can accomplish the same task on your cell phone? Larger screen sizes and improved hardware mean they’re just as easy to use for games, research, note taking… and shopping online.

But a consumer viewing your store from their phone is much different than them buying from it. An iAquire and SurveyMonkey study found that 40% of mobile users will leave a website and go back to their search results if the first site they visit isn’t mobile-friendly.

Imagine reducing your bounce rate by 40%. Now imagine what keeping more of those visitors on your store might do for your sales.

If your WooCommerce-powered store isn’t accommodating to mobile visitors, you’re leaving money on the table. Fortunately, there are a few simple ways to improve your store — without undergoing a costly redesign — that will help you keep more shoppers on your store, plus potentially improve the number of purchases they make.

Let’s take a look at how you can unlock WooCommerce’s hidden power for mobile shoppers using built-in design options, ideal payment gateways, and a few amazing extensions.

Review your homepage, product pages, and checkout experience

Responsive design — website design that automatically scales its content up or down to match the viewer’s screen size — is the first thing you’ll usually hear about when the topic of mobile friendliness comes up.

But there’s much more you can do to improve the experience of shoppers with small screens than switch your theme and call it a day. And WooCommerce has both built-in options and paid extensions that will give you the ability to improve your layout and boost shopper happiness.

Let’s take them one by one.

Reduce your homepage content to avoid scroll overload

Your store’s homepage is often (but not always) where new shoppers first learn about your business, what you sell, and how you’re different from your competitors.

It’s tempting to stuff as much information as you can onto that first crucial page, but keep in mind that what looks amazing on desktop may translate into endless scrolling on mobile. Large graphics and menus will probably scale down fine, but lists of products, blocks of text, and widgetized content areas could take up too much room on those small screens.

To avoid bombarding shoppers with too much information, limit your homepage to “mission critical” items. This might mean a single responsive graphic or slider, links to product category pages, and just a little text.

Remember that you can easily direct homepage visitors elsewhere: for example, if you want to feature your most popular products, limit the listing to 3-4, but then use a shortcode on a new page to display as many as you like. This will help you save space and boost sales.

Make sure products are easily accessible

As we just mentioned, you can easily link new shoppers (or returning visitors) from your homepage to category or product pages. But homepage links are just one step in making products easily accessible from mobile devices.

Mobile shoppers need to be able to quickly find and learn about the items you sell, and do so in the ways they prefer. A few tips for making this happen:

• Make sure your store menu links to category and/or product pages, and that shoppers don’t have to navigate through multiple screens to find those links.
• Double-check that your site search is both accessible and easy to use on small screens.
• Also on the topic of search — if you sell a lot of products, consider trying an extension like WooCommerce Product Search to “weigh” the most popular or important ones so mobile shoppers don’t have to sift through dozens of results looking for something they already know about.

Keep the checkout as simple (and speedy) as possible

Finally, look at your checkout experience on small screens. This can be a huge factor in cart abandonment, especially if you’re asking for too much info or the process takes too long.

If shoppers are being asked to fill out unnecessary fields during checkout (for example, if they’re asked for a shipping address when all you sell is digital goods), consider using the Checkout Field Editor extension to remove, add, or change these fields and make the experience as smooth as possible.

If you’re worried that the checkout itself is causing issues, you can always try reducing it to a single page, if it’s currently taking multiple steps. You can read in detail about optimizing the checkout flow (and how to know which option is best for your store) here.

You may also want to think about how payment options could be slowing down the checkout. We’ll talk about some alternate options you can try there in just a little bit.

Utilize a mobile-friendly product gallery

Shoppers consider a lot of factors when making a purchasing decision, from copywriting to reviews. As you probably already know, the photos or images of your products also have a big influence on whether or not they click “buy.”

If your mobile shoppers aren’t able to properly view and explore your products’ images from their devices, they may be less likely to make a purchase. Fortunately, we’ve built an amazing mobile-friendly experience right into WooCommerce as of our latest release.

WooCommerce 3.0 includes a new product gallery that vastly improves the mobile experience. With the new gallery, images now display at their true size on mobile. Additionally, touch gestures have been improved — you can swipe right and left to scroll through images, pinch to zoom, swipe up to close, and more.

If you haven’t updated yet, you can find out more about WooCommerce 3.0 here.

Make payments faster and easier for mobile shoppers

When a customer is literally trying to give you their money, nothing should stop them. But sometimes your choice of payment processor can interfere with these final steps, if only because they’re just a little too slow or tedious for impatient shoppers.

Once you’ve addressed every other factor on the way to the cart, you should make the process of paying hassle-free for those with small screens. The good news: you can accept fast or one-touch mobile payments through a variety of WooCommerce extensions, including:

• Apple Pay — offered via the Stripe payment gateway, Apple Pay offers one-touch payments and uses safely stored information to make ordering fast, easy, and super secure.
• PayPal — PayPal’s mobile experience is fast, simple, and trusted in many countries. It’s also super secure, thanks to 2-factor authentication, and customers can pay via safely stored card or bank information.
• Amazon Pay — This free extension lets your customers pay for their orders using information already stored with Amazon. Bonus: customers never leave your site. Double bonus: it’s compatible with WooCommerce Subscriptions.

Alternately, if you happen to be located in South Africa, where credit cards aren’t widely used online, you can take payments via SnapScan. This allows shoppers to use stored payment details to pay for mobile orders (or, if shopping via desktop, to scan a QR code and pay with their phone).

There are plenty of mobile-friendly options out there, and they all have their perks, so have a look at the payment options supported by WooCommerce and let us know if you find a new favorite. 🙂

Extensions for an optimal small screen shopping experience

We’ve already mentioned a few WooCommerce extensions that might help your mobile shoppers see product details easily, make payments quickly, or complete the checkout with less hassle. But there are plenty more ways you can optimize the shopping experience on smaller screens.

Here are a few more extensions to try:

• WooCommerce Social Login — allow shoppers to create or log into their account via Facebook, Twitter, etc., eliminating the need for another password and making the sign-in process super speedy for returning customers
• Variation Swatches and Photos — get rid of difficult-to-tap drop-down menus for choosing product variations and replace them with color swatches or photos of your available options
• Recommendation Engine — recommend related products on each page so mobile customers keep browsing without needing to return to category pages or start a new search
• One Page Checkout — ideal for allowing customers to instantly purchase products without leaving the page, so no one needs to take extra steps to make a purchase
• Reactor — build your very own custom app for your store for even easier mobile shopping, plus get extra features like push notifications

Cater your site to mobile shoppers and watch sales soar

As mobile devices grow more powerful and more consumers use them to shop online, you’re going to find that having a responsive theme is not enough. Luckily, WooCommerce has plenty of options that will help you out.

One other thing to consider: there’s no limit to how you can change your store to cater to what your shoppers like best. So if your mobile customers buy more when you don’t have product copy — or alternately, have a lot of it — there’s nothing stopping you from changing your design or content to suit their needs.

We hope these ideas prove helpful for you in the long haul! Have any questions about tapping into the power of mobile with WooCommerce? The comments are open and we always love hearing from you.