How to unlock the power of WooCommerce on mobile

Written by Nicole Kohler on April 18, 2017 Blog, Design & UX, WordPress tips & tricks.

 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.

Scrolling, scrolling, scrolling…

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.

Shoppers are less likely to complete the payment process if it’s tedious or takes a long time. Nothing hurts more than losing a potential customer right at the very end!

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.

The updated gallery is fantastic on every device, offering improved zoom and detailed gallery views.

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.

Use extensions to take your store to the next level (and make mobile shoppers even happier).

Here are a few more extensions to try:

  • WooCommerce Social Loginallow 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 Photosget 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 Enginerecommend 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
  • Reactorbuild 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.

Try The New WooCommerce Mobile App for Key Metrics, Order Look-Up, and Notifications – cha-ching!

10 Responses

  1. Cai
    April 18, 2017 at 9:58 pm #

    Thanks for the write up! What theme or child theme do you typically recommend using for mobile-friendly shopping sites? By friendly, I mean the theme should be also lightweight and can be loaded to mobile browsers fast.

    • Nicole Kohler
      April 18, 2017 at 10:08 pm #

      Storefront is our official WooCommerce theme, and it’s super fast on mobile: Plus we have a lot of child themes to choose from 🙂

      But there are a ton of amazing options out there. Reading reviews is a safe bet to find out which themes actually deliver on their promises. Alternately, you could peek at some of the sites in our Showcase ( and peek at the source code to see which themes are behind the sites you like best.

  2. jsm
    April 19, 2017 at 2:35 pm #

    Thanks for all updates i am already using woocommerce on many website and regularly read updates once again thanks for great information.

  3. Gary
    April 20, 2017 at 8:20 am #

    How about security? WordPress sites are easy to hack and so highly targeted by hackers.

  4. Rach
    April 22, 2017 at 11:46 pm #

    Hi, how do you turn your woocommerce website into a mobile app? Is it true that woocommerce significantlu loads slower than a website made from lets say ruby on rails?

  5. monica
    April 25, 2017 at 6:44 pm #

    Hey there!

    I don’t usually expect to read something that makes me want to take action- BUT this article has me taking notes and and speaking to my partner about buying some of these plugins that you recommended!

    Great article Nicole! I hope to see you writing more! Thank you so much for the great suggestion!

  6. Jessica @ PLS
    April 30, 2017 at 9:32 pm #

    Thanks for the write up! What theme or child theme do you typically recommend using for mobile-friendly shopping sites? By friendly, I mean the theme should be also lightweight and can be loaded to mobile browsers fast.

  7. aasherwebsolutions
    June 23, 2018 at 10:16 am #

    I want my woocommerce add to cart button to be mobile friendly. How is it possibe?


The most customizable ecommerce platform for building your online business.

  • 30-day money-back guarantee
  • Support teams across the world
  • Safe and secure online payment
%d bloggers like this: