Learn how to unlock beautiful conversion optimized checkout for WooCommerce with Clif Griffin in this episode of the LMScast podcast hosted by Chris Badgett of LifterLMS. Clif shares his inspiration for creating CheckoutWC and the journey he has been on over the past few years with creating the plugin.
WooCommerce is an ecommerce plugin for WordPress that allows you to sell products on your website. LifterLMS has a native checkout system, but we also do have a WooCommerce extension you can use if you would prefer to use WooCommerce to handle payments.
The checkout page available from WooCommerce out of the box is not very customizable. And there is a lot of information on the screen for users to fill in, so it can be overwhelming for customers who are buying. Seeing the need for a better ecommerce experience, Clif and his team developed a plugin that allows you to take more control over the WooCommerce checkout and create a user-friendly flow for customers checking out on your website.
Shopify is a tool that allows you to build websites, more specifically online store websites. It is a competitor to WordPress in the ecommerce space. Chris and Clif talk about how Shopify has created a standardized experience for checkout, and WooCommerce out of the box can match that functionally, but the experience is not of the quality it is with Shopify.
When developing CheckoutWC, Clif looked at what Shopify does well for their users and aimed to create a simple process for checkout for WooCommerce. CheckoutWC will work with almost any WordPress theme, and Clif breaks down the steps it provides for your checkout process, including collecting information on multiple screens and the soon to come automatically filling in of city and state based on zip code.
The advanced side of design is all about minimalism and taking things away to make the processes in business design easier. Chris and Clif touch on this subject and the ways that inspired the design for CheckoutWC.
If you’re working with WooCommerce, we recommend you checkout CheckoutWC to learn more about what Clif and his team have been developing for WooCommerce users. They have a 7-day free trial of CheckoutWC, and you can use the code ‘LifterLMS’ to receive an additional 10% off your order.
At LifterLMS.com you can learn more about new developments and how you can use LifterLMS to build online courses and membership sites. Subscribe to our newsletter for updates, developments, and future episodes of LMScast. If you like this episode of LMScast, you can browse more episodes here. Thank you for joining us!
Episode Transcript
Chris Badgett: You’ve come to the right place if you’re a course creator looking to build more impact, income, and freedom. LMScast is the number one podcast for course creators just like you. I’m your guide Chris Badgett. I’m the co-founder of the most powerful tool for building, selling and protecting engaging online courses called LifterLMS. Enjoy the show.
Chris Badgett: Hello, and welcome back to another episode of LMScast. I’m joined by a special guest, Clif Griffin. He’s from Checkout for WooCommerce. You can find that at checkoutwc.com. Welcome to the show, Clif.
Clif Griffin: Yeah, thanks for having me.
Chris Badgett: I’m really excited to talk about WooCommerce with you and just ecommerce conversion optimization in general. It’s really important to the course building and the membership community, the ecommerce community, which is the majority of our listeners here. How do you describe Checkout for WooCommerce? Like how do you position it?
Clif Griffin: Sure. Well, Checkout for WooCommerce is basically a drop in solution that completely takes over the checkout page. If you’ve ever set up a WooCommerce site, you know that the checkout page is pretty generic, and it’s extremely functional. It’s robust, but it’s pretty mediocre maybe from a design standpoint, especially depending on the theme you’re using. The backstory is that we basically saw a need for better ecommerce experiment, your experiences, and we had built a few of those for some other e-commerce plugins. About three years ago, we decided this could be solved for many people with one plug in instead of all these bespoke experiences that we’re building. That’s kind of our main goal is install it, activate it, and you’re already, you know, way better than where you were.
Chris Badgett: What do you like about Shopify? Before you’ve built this product, where was Shopify winning over like a WooCommerce experience?
Clif Griffin: Yeah, that’s a great question. You know, Shopify takes a really hard problem. We used to say, or I used to say, there’s no standard e-commerce experience. Every store has something that wasn’t anticipated. But what they’ve done is kind of forced people into, in a good way, a really good tested e-commerce flow. You have lots of control over the theme, but their product pages work really well. They convert really well and their cart and checkout experiences are just consistently delivered to I think millions of stores. May not be quite a million yet, but because of that, they take away lot of that uncertainty where I picked a WordPress theme, are these experiences going to be good?
Clif Griffin: I think that’s really appealing to a lot of merchants. They just want to sell their stuff. They want it to look good, and they’ve kind of mastered that. That’s a monumental problem. I would’ve never been crazy enough to try it, but it seems to be working really well for them.
Chris Badgett: Right on. Is Checkout for WooCommerce a plugin or a theme?
Clif Griffin: It’s a plugin. The nomenclature gets a little bit sticky because of the semantics around themes. We try to use the word template. Maybe it’s a little bit clear. Checkout for WooCommerce actually contains three separate templates. The actual flow of how you go through the fields is extremely similar between them, but it gives people just stylistically three starting places to match up with their preferences. It’s really a total theme takeover. What we’re doing is, I don’t want to get too technical, but when WordPress is loading a page, it gets to a hook called Template Redirect. This is where the the theme decides which page template to send to the user.
Clif Griffin: We actually jump in right there and we say, “Actually we’re going to load our stuff right here.” We don’t even load like the base HTML or the greater theme context from your WordPress theme. It’s completely our stuff at that point. We minimize a lot of those conflicts. When a WordPress theme just loads crazy stuff that can just break things, none of that stuff is going to happen in our template. It’s kind of a sandbox in that sense.
Chris Badgett: Checkout for WooCommerce could literally work with any WordPress theme? You just add it to your site.
Clif Griffin: There are instances where we have to work around stuff. A lot of times a theme has like a separate add-on plugin and that add-on plugin doesn’t know what to do unless the regular theme stuff is there. But most of that stuff is really simple. We only have like five or six of those workarounds.
Chris Badgett: Well, at LifterLMS, the way I say that is LifterLMS works with any well-coded WordPress theme. I can’t say everything because there’s always something out there.
Clif Griffin: We went out of the gate really aggressive. We’re like it works with everything, and we were being like super strong arm, like we’re not going to load the theme’s style sheets and JavaScript files and all that stuff. Then that just became more of a headache than it was like a value. As we were able to improve the code base, we said, “Okay. We’re going to go ahead and let these things play more nicely together.” But really on the theme side, it’s still pretty… We try to keep them at bay. We don’t need their stuff on our template. Sorry.
Chris Badgett: Could you speak to some of the elements of Checkout for WooCommerce that contribute to a more conversion optimized design or experience?
Clif Griffin: Yeah. The main kind of conceptual flow, and you’ll notice it really resembles Shopify. That’s not on accident. We said, “Hey. They’re doing this on a million stores.” We personally love this flow. Everybody we talked to says, “Man, yeah, they do such a good job with checkout.” But the idea is that you keep your user in a domain of knowledge, a single domain of knowledge at a time, and you structure the sequence so that you have the information you need at the right time. For instance, in our checkout templates, we have three tabs. The first tab is called customer information and that’s where the user enters their shipping address. When they do that, now we have enough information to estimate their shipping.
Clif Griffin: The second tab allows them to pick their shipping method, and then the third tab is where they specify their payment and billing information. When people stay in a single context, a single domain of knowledge, it’s easier for them to complete forms because they’re not having to sort of switch gears and, “Oh, what was my credit card information? Oh, what did I pick for shipping?” We’re taking you in a logical sequence. Beyond that, what we do is we try to automate everything that we can. This is something that I think is kind of a unique advantage that we have right now. I don’t anticipate we’ll get this advantage for very long because I think some of these things are pretty easy to do.
Clif Griffin: But for instance, a personal pain that I’ve had is that when I’m buying at a store that I know I’ve ordered at before, but I don’t order frequently, I don’t remember if I have an account. A lot of stores can be really aggressive about trying to force you to log into your account or remember these things. What you’ll do is you’ll say, “No, I didn’t sign up for an account.” You’ll fill out the form, and you’ll say, “Submit my order,” and they say, “You have an account. You need to log in.” Error message. It’s like, “I don’t know the password. It’s not in my password manager. It must predate my password managers.” Now I’m trying to guess passwords and waiting on reset password notifications, et cetera.
Clif Griffin: What we did is try to cut all that out. As soon as you enter your email address, we immediately look up to see if you have an account. If you do, we dropped down the password field. Now you have a login button and you can enter it right there. If you don’t have an account, we automatically check the box to create an account because most merchants want their users creating accounts impossible. It’s easier for the user because now they have a single place to go look at all their orders. But the most important thing is sticking with that principle of we don’t want any friction between the user and a successful order is that we override and basically allow every order to go through as a guest order, with the exception being if it’s a subscription product.
Clif Griffin: We can’t do that obviously. They can always, always, always order regardless, but we automatically show them if they have accounts and kind of give them a leg up on that memory work. Then beyond that, like another automation that’s kind of super easy to do, more people should do it, I’m glad they don’t right now, is that it’s not hard to find someone’s city and state in most cases, especially in the US with their postcode. Most order forms are structured where it’s you put in your country or you put in your city, state, country, zip. That’s how it’s on the envelope, and so that’s how they order it. We do country, zip, and then we automatically immediately fill in your city and state if we can find it. There’s some really weird stuff on that.
Clif Griffin: You can’t do it in every country because, believe it or not, like post offices in different countries actually copyright that information. To actually store a complete list of these postal codes match up with these cities and states is a copyright violation, but you can do it in the US, and you can do it on a lot of other countries too. I get mad now and I’m using the normal… Even Amazon, it’s like you know this information. Don’t make me fill out three fields when I could fill out one.
Chris Badgett: That’s awesome. I mean, I literally like… There’s a company that lost a $80 pair of jeans sale that I was trying to complete. I had bought them there like four years ago before my password manager. I went through it. I’m like, “All right. Which email did I use?” Finally, I was like, “Forget it. I’m just trying to buy it, and it wouldn’t let me buy it.” I’m like that’s a bad user experience.
Clif Griffin: Yeah. E-commerce is complicated. It’s hard, you know, like I said earlier. I get why a lot of these things end up so poorly, especially when it’s designed by committee. You have all these like lesser business goals that end up sort of taking over the whole experience. You know? A Lesser business goal could be like we want everyone to have an account. Sometimes the exact wrong answer fills in, which is, well, we just won’t let them purchase unless they can remember their account information. You know? But making money should be your real goal. It’s like a Pyrrhic victory. You won the battle. You lost the war.
Chris Badgett: I mean, this is really interesting. I was just pulling some numbers. I think you said Shopify had something around a million stores?
Clif Griffin: Yeah. I wanted to say it was over a million, but then I had a memory that maybe they were still in search of that.
Chris Badgett: Well, I saw a 500 active stores… 500,000 active stores as a recent stat, but I went to the WooCommerce and there are over four million installs of WooCommerce, which is really amazing to me just how big the WooCommerce-
Clif Griffin: It’s crazy.
Chris Badgett: …ecosystem is. I’ve used WooCommerce for a very long time, probably a decade, and the interface, it was always like lagging behind the hosted solutions. But again, that’s the beauty of like WordPress and the ecosystem is you can come in and you could focus exclusively on this experience and build on top of that and optimize it. I mean, I’m sure WooCommerce is just scrambling to keep it all together and not lose anybody’s-
Clif Griffin: Yeah.
Chris Badgett: Whatever. The design is not their top priority and experience.
Clif Griffin: Well, it’s really hard for them to fix because they have this technical debt, you know, of these templates have worked a certain way for 10 years. If you pull out the rug from underneath everybody, you’re potentially disrupting four million stores. They have to be really careful. I do think that they will eventually address this stuff, but I do think it’s also good that they have sort of left this large area for themes and plugins to improve.
Chris Badgett: Yeah, that’s a great point. If you look at themes who do design in general, and there are some WooCommerce specific themes out there, but not every theme gives attention to WooCommerce. I mean, it gets more attention than a lot of other plugins because it has a large user base, but when you say plain Jane WooCommerce and the purple buttons and everything, it’s not bad, but it looks a little out of place with the theme usually.
Clif Griffin: Themes have to be hardest development of all the kind of WordPress ecosystem products. Themes have to be the absolute worst in terms of the sheer amount of exposure you have to niche problems. I think that e-commerce is just doubling the size of that. When you really get down to it, there’s so many things you have to be careful of in e-commerce. We’ve actually had a couple of like, you know, pretty major themes you probably would’ve heard of reach out and kind of approach us on whether we wanted to be acquired and things like that because I think themes are looking for solutions to not have to deal with this probably pain point in their ecosystem of they’re constantly having to fix issues on their unique checkout flow. That’s not really their main business.
Chris Badgett: Could you speak to some of the plugins that says Checkout for WooCommerce works with the plugins you love like PayPal or Stripe, Woo Subscriptions? What does your checkout do in relation to those things? Does it just know which fields are coming because of them and it’s ready for them?
Clif Griffin: Yeah. We need to update that list for sure. That was kind of what we launched with. But you know, this is the hardest problem that we sort of carved out because we’re so opinionated about how the experience should work. That put us at odds with a lot of the defaults of how WooCommerce usually handles the template.
Chris Badgett: Okay.
Clif Griffin: A good example of that is in our flow, like I said, the shipping fields come first, and then on the payment gateway or the payment method screen, you have a toggle that says, “Use my shipping address as the billing address or specify a different billing address.” Well, that’s the exact opposite of how WooCommerce does it, but the problem is it’s kind of the opposite and also different. You can’t just say, well, you know, just mean the opposite of that flag that WooCommerce already has because it doesn’t really mean the opposite of that exactly. Also, there’s all these hooks throughout the template. We can’t really add parody for all those hooks because the hooks just mean different things because of the context around them.
Clif Griffin: If there’s a hook that’s like before billing details, that means before billing details, but also probably means something else specific to how the WooCommerce checkout is laid out, which is we want it at the top of the screen. It wouldn’t be at the top of the screen and our flow. We couldn’t just add all those hooks that already exist. We added as many as we could and that’s been a process of experimentation. Like let’s add a hook, launch it, see how many unintended consequences there are, and then we have to deal with those. We’re trying to basically synthesize this functionality. Most of the time it’s pretty easy. We take a plugin and they output a field on the page. When user installs, “Oh, hey. This field’s not there.”
Clif Griffin: We just take a look at the plugin. We see, oh, they’re out putting on this hook, and we basically just add that same function on our own hook and problem solved. Most of our compatibility we separate them out into classes. Usually they’re like 15 lines, you know, which is really just mostly scaffolding. There are edge cases that take a lot more work. Sometimes we even have to like pull in JavaScript, but it’s all about our commitment to the design first. We don’t want to just have like sort of an average mediocre implementation of anything we add. We want to make sure that it fits the whole ecosystem. That does create problems.
Clif Griffin: One of the things we do if you have Stripe is you can have an Apple Pay button and a Google Pay button and things like that, but we want all those buttons to look the same.
Chris Badgett: Yeah.
Clif Griffin: You know? We use a PayPal for WooCommerce, which is a fantastic PayPal gateway. It’s free, and they do a really good job with the smart button. But what they can’t control is the fact that PayPal puts all their smart buttons in one iframe. Now you have this problem like do we want them all to look the same or do we want all the buttons to be able to show up? Currently what we recommend is people just turn on only one of those buttons and that allows us to make them look all the same height and same width, things like that. But we’re just constantly sort of grating against this like we want the experience to be extremely high level. We don’t want to like compromise that by just throwing everything that you know can be thrown into that area of the screen.
Clif Griffin: Because a lot of those defaults are pretty bad. It’s like pay faster and like advertisements basically, billboards. We don’t want that stuff. We want to just have like an area that has payment request buttons that are a faster way to checkout.
Chris Badgett: Yeah. Well, that’s awesome and that shows a lot of maturity and advanced design opinion because it’s all about… On the far side of design, it’s about minimalism and taking things away and unification. That’s really cool. I find when it comes to things like e-commerce or business models or design, especially e-commerce where we’re kind of product focus or LMS where we’re kind of learning focused, it’s like let’s keep it minimal and keep the focus on the product or the course and not get too carried away with things that don’t really matter that much in the grand scheme of things. Having a nice WooCommerce checkout with Woo Subscriptions, clean checkout, that’s really what you want.
Clif Griffin: Yeah.
Chris Badgett: Keep it simple.
Clif Griffin: Yeah. It’s a constant dance. We think that we’ve heard of every WooCommerce plugin known to man, and then we’ll get five integration requests in a week. Sometimes we have to say no, like that just doesn’t work with our flow. We’ve had requests to have like the multiple shipping addresses where you can drag card items into buckets for shipping addresses. I’m sure that’s useful for someone, but it’s just that’s not… We can’t please everyone. We can’t be a solution that works for absolutely every single WooCommerce store, but we want to hit like the 80% mark. If you have a really niche thing, we may not be right for you and we’ll tell you that. We’re not going to just try to jam it in there and compromise the whole design to make it work.
Chris Badgett: I’ve just come across a lot with WooCommerce and there are a lot of edge cases. If you go to WooCommerce Extensions, and these are just the ones that WooCommerce itself promotes and puts out there, not necessarily made by them, and there’s a lot more after that. There’s so many edge cases like, well, buy a gift for somebody else or name your price.
Clif Griffin: Yeah. It’s infinite.
Chris Badgett: Yeah.
Clif Griffin: It’s amazing and terrifying.
Chris Badgett: Well that actually leads to my next question, what do you love about WooCommerce?
Clif Griffin: I think the biggest thing I love about WooCommerce is just because there’s four million people all contributing by using it. There’s just an amazing ecosystem around it. You think of any problem and it’s more likely that someone else has solved it and solved it at scale. They’ve developed a product that people are using or it’s being updated than not. In the past when I’ve used smaller e-commerce plugins, you’re just constantly custom building modules. In a recent store we built, for example, they wanted to have all their variations show up as single products in the grid. It looked too small. They have like three products. Each of those products have like 20 variations. They wanted to be able to show it all up, you know, like the normal shopping grid.
Clif Griffin: Well, there’s a plugin. It does it. It’s great. It hides the initial product and just shows the variance. They all look like fully qualified products, and then you click on one, it auto selects that variation. That’s just stuff you won’t get unless you have this massive audience of potential stores where all these niche problems aren’t just affecting a few people. There’s literally 10,000 stores that need it. The downside is that, like you said, there’s so many integrations and there’s a lot of technical depth., so here’s areas of WooCommerce that I really would love them to improve. Like the order statuses are kind of nebulous what they mean. They don’t have separate statuses for payment statuses and shipping status.
Clif Griffin: If an order is complete, usually that means, well, it was paid for. Well, what if it’s being shipped in three different boxes? How can I at a glance know that two of the three boxes are away and we still need to ship the third? I think there’s areas that it can kind of grow up and become more of an enterprise solution over time. I think it does work for enterprises, but I think there are certain areas where like the accounting and the way that statuses are tracked could be improved and really make it a better solution for some of these high level large stores that need really, really discreet tracking for different things.
Chris Badgett: Yeah, that’s awesome. I just want to note for you out there this listening, if you’ve heard of LifterLMS, we have our own simple Stripe and PayPal checkout, but a lot of our community uses WooCommerce to checkout. I want to explain the reasons why they would do that. If you are going to do that, I’d encourage you to go to checkoutwc.com and see what your checkout could look like using WooCommerce. I’m thinking of like some of our customers who already have a WooCommerce store, they have products like photography, maybe coaching packages, maybe physical goods and equipment. I’m thinking of one person in particular who teaches a certain kind of weaving and she sells all these other like fabrics and things to create the weavings.
Chris Badgett: It’s just a full on WooCommerce experience, and she just wanted to add courses and memberships and things like that later. That’s a reason to use Lifter with WooCommerce. If you want an advanced… Like another add-on that WooCommerce makes, like if you’re falling in love with Checkout for WooCommerce, that’s a great reason to use it. If design and conversion optimized checkout is important for you, perhaps you’re maybe even coming from Shopify and you want it to look like what you’re used to, that’s another good reason. But WooCommerce is fantastic. I personally use it for selling software. We had to build our licensing system, but we use Woo Subscriptions. I use something called Metorik where I get extra reporting it, which is awesome. I love that. It’s a very powerful tool and just the community around it.
Chris Badgett: Like Clif here, there’s all these great people working on these specific problems within WooCommerce. We’ve mentioned Metorik. Bryce, the guy behind that, I mean, he has some card abandonment stuff that is working amazing with that, but that’s not part of WooCommerce’s core. We added that through that system. I think this is really beautiful what you have here because it is frustrating when somebody’s trying to buy. I love that idea of enter your zip code and shouldn’t it just know. I learned something new from you because it is a hard problem and we get that request a lot with our checkout. Then, you know, there’s all these different countries. I didn’t realize all the nuances around the copyright or whatever of the zip code.
Clif Griffin: It’s crazy. Yeah.
Chris Badgett: Making it simple is not easy. WooCommerce by default, you know, when it loads the two columns and everything’s exposed all at once, it’s a little bit overwhelming as someone’s checking out.
Clif Griffin: Yeah. Something we’re going to be releasing soon is an add-on. I think there are some plugins out there that do this, but we think we can address it very specifically for our audience is like a full address auto complete from Google Maps.
Chris Badgett: How’s that one?
Clif Griffin: Well, one of the nice things is that their algorithm geo locates you. It says when you’re entering 100 Main Street, you don’t mean all Main Streets. You mean probably this one near where you are right now.
Chris Badgett: Oh Wow.
Clif Griffin: It can really speed up the process of… Then you’re filling in street address one, two, country, city, state in one go. That’s something we’re going to be releasing soon to just try to further short circuit the process of having to make decisions and think of things when you’re going through a checkout flow.
Chris Badgett: That’s very cool. When you said three templates I believe, were you talking about like three different styles or the more like the cart, the checkout, and the…
Clif Griffin: Right. Right now we only deal with the checkout page. We have three templates that have three kind of takes on the overall sort of design of…
Chris Badgett: Could you describe how those are different?
Clif Griffin: Yeah.
Chris Badgett: It’s hard. I know we’re on a podcast here, so to to checkoutwc.com. Look at it. But people have design opinions, so I’m sure they’re different. What are they?
Clif Griffin: Yeah. Our default theme is… The flow is very inspired by Shopify in all cases, but the default theme’s pretty stripped down. It’s white background. There’s not like the cart area on the right. It’s like a sidebar that’s also got a white background. It’s just very understated, and then we have a theme that’s called Copify, which is obviously a very close clone of Shopify because we thought when we launched, “Well you know, people who want it to just look like Shopify, there’ll be happy with the default theme.” They weren’t. They said, This looks great, but here’s 10 things that can make it look exactly like Shopify.” Okay. We get the message. You literally want it to just look like Shopify, and we can accommodate that. Then we have a theme called Futurist, which kind of uses like a future styl.
Clif Griffin: Like it has breadcrumb dots and just different styling elements. It’s just slightly different. It’s really the same basic guts, but a lot of people love that theme. It sets things apart a little bit differently. We’ll probably add more in the future, but right now it seems to be a good place no matter where your aesthetic preferences lie, you can start with one of these. Of course, you can always modify it if you want to.
Chris Badgett: Yeah. You can try those out for free over at checkoutwc.com. Thank you so much for doing this show with us, Clif. Is there anything else for people to look at or where you want want to send them to find out more?
Clif Griffin: Well, I was going to say I’m going to create a discount code called Lifter. If your audience wants to try it out for a seven day free trial for everybody. But if they want a 10% off, they could use discount code Lifter when they’re checking out.
Chris Badgett: Awesome. Well, thank you so much for that. This is amazing. I’m really excited about it. I hear people talking about they just want smooth checkout, and I’m really glad you’re working on this problem. It looks beautiful. Thanks so much. I really appreciate it and thanks for the generous coupon.
Clif Griffin: Well, thanks so much for having me on. It was great.
Chris Badgett: That’s a wrap for this episode of LMScast. I’m your guide, Chris Badgett. I hope you enjoyed the show. This show was brought to you by LifterLMS, the number one tool for creating, selling, and protecting engaging online courses to help you get more revenue, freedom, and impact in your life. Head on over to lifterlms.com and get the best gear for your course creator journey. Let’s build the most engaging, results giving courses on the internet.
