MasterWP is a project of HDC, the digital agency that’s leading the tech industry to a better future. Connect with us for your next design, development or enterprise WordPress project.
Boy, do I love puns. And you know what makes puns even better? Putting them on hats and coffee cups. And thus, I embarked on a mission to launch the new MasterWP Merch store.
In addition to shamelessly promoting our new gear – all proceeds from which go toward supporting initiatives to diversify tech – I’ll be outlining how I built our quickie WooCommerce site in a few hours over a weekend. My goal? Make it basically like Shopify, without actually succumbing to the sirens of closed-source software.
But before we start, have you grabbed your add_filter() mug yet? Get the pun? Because coffee is made with a filter!
I set up and build WordPress sites for a living, so I just made a copy of my standard WP Engine dev site install to get the new shop rolling. That being said, this is pretty much instantly “developer only” territory. But let’s assume, for the sake of argument, that a layperson would be able to do this on WordPress.com or a similar plug-and-play service. Within about 30 minutes, I’ve got WooCommerce and the Stripe and PayPal payment gateways installed, and we’re ready to add some products.
MasterWP Workshop, Tuesday, Nov. 8 – Starting Your First Blog with WordPress – From idea to launch, the step-by-step guide to launching your first blog on WordPress. Live and recorded!
Adding Products with Printful
This is super awkward, but on Printful’s site, they label Shopify as “Very fast” and WooCommerce as “Slow” and “Best for Ecommerce Experts.” After seeing this, I spent several minutes trying to figure out if I could get away with building a Shopify site on a MasterWP subdomain, and decided that there was no possible way I could justify that to the fans. So, I went the slow route – but at this point, I think pretty much anybody other than a developer (or “Ecommerce Expert”) would abandon ship for Shopify.
Printful is super cool, and I recommend you look into it for your next e-commerce site. Lots of great products, easy design editing, and simple drop-shipping. I already got my first hat and wore it to work, in what can only be described as an Epic Nerdy Dad move.
Making it look good
In the spirit of making the site fast, open-source and as close to free as possible, I used the free Storefront theme that comes with WooCommerce. As you’ll see, it looks decent! I brought in Google Fonts to match the main MWP site, removed many of the elements, and changed the colors – overall requiring about 50 lines of CSS in the Customizer Additional CSS console. Again, most non-developers could not do that, but I probably could have found a more attractive free or cheap theme if I’d wanted to do some digging. That said, since I wanted to match the existing MWP design, this made sense, even if it added a little extra work. Since the site is intentionally quite simple, I hid most of the header and menu elements entirely.
Storefront also has some “features” that I wanted to get rid of – such as the sidebar and the mobile footer bar (which has quick links to cart and account). I used PHP and the Code Snippets plugin to edit those, in order to avoid having to add a Child Theme just to add a functions.php file. Again, though, if my brother or my uncle tried to do this they’d destroy their site and have to switch to Shopify… or they’d call me for tech support 🙂.
Solving the Woo checkout disaster
My least favorite part about WooCommerce is the checkout experience. I think it almost certainly reduces conversion rates on pretty much every site that uses it. The Shopify checkout experience is so seamless and smooth that my brain literally craves it, and every time I see a WooCommerce checkout I sigh and settle in for tedium. Especially since I saved my payment details with Shop Pay and Apple Pay, Shopify checkouts are practically instantaneous for me – especially on mobile, where more and more of my purchases happen these days. I know this is a known issue, but it’s a huge problem that Woo is so far behind on this.
That said, CheckoutWC does a nice job of creating a Shopify-esque cart and checkout experience. (Not an affiliate link – I really did the research and liked them the best!) It’s $35/mo on a monthly plan, which combined with a $30/mo WP Engine account, is similar to the second-tier Shopify plan ($79/mo).
It took me about an hour to learn and set up CheckoutWC in its entirety – though I still haven’t quite figured out Apple Pay, which is, I’m sure, why you haven’t bought everything on the store yet.
WP Wallet is how WordPress professionals get paid. Try our free, powerful recurring-invoice tool, built specifically for WordPress pros to get reimbursed for plugins, hosting and more. Ditch the spreadsheets and track your expenses with WP Wallet.
My speedrun score
The whole process took me – a WordPress developer for more than 15 years – about 4 hours to build over the course of a weekend. Not horrible, but also, most of that was a result of decades of web dev experience. A layperson without CSS or PHP skills couldn’t have pulled this off, and would have needed to hire a developer. In fact, the moment I started tweeting about my project, I was immediately hit with ads for Upwork.
Even the algorithm knows WooCommerce is hard! So I guess it’s no surprise that Shopify has been sneaking up on WordPress and pulling away some of its e-commerce market share. Considering that e-commerce seems like one of the most profitable areas in which to “win” the CMS wars, we know this is a huge challenge for Automattic (which owns WooCommerce) and the WordPress community as a whole.
A high-end WP developer needed half a day to do something that could have been accomplished in a matter of minutes on Shopify… and if I am being honest, I still think it would look and feel a little nicer if I’d built the site with Shopify instead of Woo.
Once you get into bigger and more complex sites, Woo’s flexibility makes it the hands-down winner. But for simple e-commerce sites – which I assume makes up most of the market in terms of quantity of installations – Woo is just not there yet. As Automattic CEO Matt Mullenweg told Brian Coords recently, “Right now WooCommerce is a developer-first product, that we’re making easier and more accessible with every release, similar to WordPress in the 2000s. It’s still the early days.”
I’m not sure I buy the “early days” thing – WooCommerce launched in 2011 and was acquired by Automattic in 2015. Seven years ago, Mullenweg said: “I do believe that the web needs an open, independent and easy-to-use commerce platform that you can run yourself on your own website.” It’s 2022, and Woo really doesn’t meet the standard of being a tool you can “run yourself on your own website” without a developer’s help.
As Brian and I discussed on last week’s Press The Issue podcast, it’s simply not enough to be open-source these days – you have to actually be better than the competition, too. Most users don’t understand software licensing – they just want the thing that is easiest for them to use. If Automattic and WordPress need the e-commerce revenue, they would do well to become laser focused on making Woo easy for laypeople. As WP Tavern’s Sarah Gooding wrote in 2015, “If Automattic can play a part in democratizing the ability for regular folks to sell products online, it has the potential to globally transform e-commerce.”
That said, if you are an advanced WooCommerce developer, why not treat yourself to this delightful is_admin() mug? Show off your WordPress and WooCommerce pride – and even if we can’t win a speedrun yet, we can still build complex e-commerce sites in style.