PWACommerce Review: Turn WooCommerce Into A Progressive Web App
If you’re running a WooCommerce store, you’re probably familiar with the stats around mobile shopping. If not, now’s a good time to do some research because more than 50% of eCommerce sales happen on mobile devices in 2018.
That means the mobile version of your WooCommerce store needs to be as usable and conversion-friendly as the desktop version.
PWACommerce is a freemium plugin that can help make your store more shoppable for mobile users by turning WooCommerce into a progressive web app built with ReactJS.
While the PWACommerce plugin itself is still fairly new, it comes from the same developers as the popular WordPress Mobile Pack plugin that we previously reviewed. So these guys know a thing or two about turning WordPress into a progressive web app.
In my PWACommerce review, I’ll first share a bit about the benefits of a progressive web app over your average responsive design. Then, I’ll go hands-on with the actual PWACommerce plugin and show you how it works.
PWACommerce Review: Why A Progressive Web App?
Unlike a native app that you’d download from the app store on your phone, a progressive web app is able to deliver an app-like experience over the web. Without requiring your visitors to download anything, you’ll still be able to include:
- App-like experience – stuff like smooth transitions, quick load times, etc.
- Offline mode capability – also great for slow Internet connections (e.g. 3G).
- Web push notifications – you can still use push notifications to connect with shoppers.
- Add to home screen – shoppers can still add your app to their home screen for easy access.
Does all that actually matter for eCommerce stores? Well, Alibaba was able to boost their mobile conversion rates by 76% after implementing their progressive web app. They also saw an increase in users and 4X higher interaction rate from Add to Homescreen.
So…I think it’s something that’s worth at least experimenting with.
How Does PWACommerce Work?
PWACommerce is a freemium plugin that you install at your WooCommerce store to turn the mobile version of your store into a progressive web app.
The free version sets you up with good basic functionality. And if you go with the Pro version, you’ll be able to add:
- Offline mode
- Push notifications
- Add to home screen
As well as some other features, like product search (though the developers might include this in the free version soon).
Hands-on With The Free Version Of PWACommerce
I’m going to start off with installing the free version of the plugin that’s available at WordPress.org. Then, I’ll cover what the Pro version can do in the next section.
Configuring PWACommerce is pretty simple. There are only a couple things you need to do.
First, you should enter your Google Analytics ID so that you can see what’s happening at your store. Then, you need to also enter your WooCommerce Keys:
To get your WooCommerce keys, you go to WooCommerce → Settings → Advanced → REST API → Add key:
The documentation isn’t clear on what permissions the plugin needs, but I’ll assume Read/Write (you might want to verify this if you decide to use PWACommerce):
Then, once you generate your API keys, you just need to plug those into the plugin’s interface:
Then, your progressive web app store should be working. The only other thing that you might want to do is add a custom home screen icon:
All in all, it’s a pretty painless setup process. I think the whole thing took me about a minute.
What The Free Default Theme Looks Like
Here are some shots of what my demo store looks like using the default theme in the free version.
The main homepage shows a list of the latest products, complete with their prices:
Users can expand the sidebar to access categories or their shopping cart (they can also access the cart from the top-right corner). You can also get your own custom pages to show up in this sidebar, which is helpful if you want to include FAQs or a contact page:
And individual products have a nice streamlined look:
More than just the looks, though, it’s the experience. I’m not sure how to demonstrate this with screenshots, but it does indeed have a very “app-like” feel to it. There aren’t any hard page reloads and the animations/transitions between actions (like adding an item to your cart) feel very much like a native app.
With that being said, there are a few things that aren’t ideal…
First off, the free version lacks any product search functionality. This feature is available in the Pro version (you’ll see it in a second), and the devs have written about making it available in the free version. But, right now, there’s no product search in the free plugin.
Second, right now the checkout process is incomplete. This isn’t PWACommerce’s fault – but it’s still important to note.
See, while the shopping cart page works great…
…PWACommerce can’t actually handle the full checkout process because the WooCommerce REST API currently lacks endpoints for the checkout process. So what PWACommerce does is defer to the checkout page that you set in WooCommerce (Settings –> Advanced –> Page setup).
That means users will go from the app-like PWACommerce interface to your theme’s normal responsive design for checkout. Again – this isn’t an oversight from the developers – it’s a limitation of the WooCommerce API.
Using The Pro Version Of PWACommerce
Ok, so the free version sets you up with that default theme you saw above. But what about Pro?
The main setup process is almost identical. Only now, you get the option to enable the service worker for offline mode and add to home screen. As the text explains, this requires manually moving the file to the root of your site:
Once I moved the file, I was indeed able to browse offline. I confirmed this by turning on airplane mode on my phone. Even with no data or wifi, I was still able to browse my test site’s store.
The other new addition is the option to enable web push notifications by integrating with the free OneSignal plugin.
New Front-end Product Search Feature
Beyond the ability to incorporate offline mode, add to home screen, and push notifications, the Pro version also adds product search to your progressive web app:
Again, this feature might well come to the free version soon.
Right now, you only get that one default theme that you saw in the screenshots. Eventually, PWACommerce plans to sell different themes that you can use to create a more custom-looking store.
Additionally, they also plan to give you options to customize individual themes for even more control.
But again, these extra themes and customization options aren’t here quite yet.
Are There Any Drawbacks To This Approach?
Potentially. Namely, if you use any third-party WooCommerce plugins for important parts of your mobile store, you’re likely going to lose access to those if you go with a progressive web app.
This isn’t really a knock on PWACommerce specifically because it’s unrealistic to expect them to support every single plugin – it’s just a cost of using a progressive web app instead of your theme’s normal responsive design.
With that being said, PWACommerce does say that you can contact them if you need a specific integration.
Final Thoughts On PWACommerce
Excluding the specific issues I highlighted above, everything else about the functionality of the PWACommerce web app for my test store was quite nice.
Load times were snappy and the animations/transitions looked great. I also loved the offline mode.
Overall, the experience was indeed “app-like”, especially in comparison to a normal responsive WooCommerce design.
With that being said, the styling options and available themes need to make a jump because most people won’t want an all-purple store. Given the range of options available in WordPress Mobile Pack, I’m confident that PWACommerce will improve with respect to design options.
If you’re interested, play around with the free version on a demo site. If you like the functionality, you can go pro for $149 for use on up to 3 sites.