A community of agencies, freelancers, developers and designers building stores, products and services for WooCommerce.

Streamlining the WooCommerce Checkout Process with Clifton Griffin

Streamlining the WooCommerce Checkout Process with Clifton Griffin
WooCommerce

 
Play/Pause Episode
00:00 / 00:37:52
Rewind 30 Seconds
1X

Thanks to our sponsors

Working with a large client and going deep into the checkout process. That is how Clif started while moving to develop a product that makes checkout quicker and more efficient.

A Chat with Clifton Griffin with Checkout WC

In episode 53, Mendel Kurland and I chat with Clif about:

  • Scratching the itch as he moved into the WooCommerce space
  • Single page vs. multi-step checkouts
  • Making the checkout process quick
  • The product and how it emerged from client work
  • How they are embracing the new WordPress way
  • Perspectives on the maturity of WooCommerce
  • The release of CheckoutWC 3.0
  • Now and the future with blocks

Clifton dove into the eCommerce space early on in 2011 working for a company that ran a large eCommerce site. As WooCommerce came on the scene, four years ago he dropped in with what he saw as a large, growing popular plugin.

The itch came to make things better at checkout. He shared his idea of this plugin with some friends and they said, do it now.

We then chatted a bit about single page vs. mult-step checkouts. He gave some really great insights there and how the plugin was developed with intense research and looking at how people went through the checkout process. As they discovered challenges, he set out to take a default checkout that wasn’t meeting everyone’s needs and providing a solution.

He also gave his thoughts on where both WordPress and WooCommerce are today, how they got there and where we are going. He even touched on their approach more popular.

We round out the conversation with what comes in the new release of CheckWC, 3.0 and I ask how the new WooCommerce payments from 4.1 play into the mix.

Lastly, Mendel shares a new site he has launched that is running on WooCommerce. Looking for a mask these days to cheer others up with? Well, check out Cheeryface.com.

Where to find Clifton

The Conversation

Yes, this the transcript. But not in the traditional sense, transcribed word for word. We do not speak as we write. Often the flow of transcribed content is hard to follow. So I have taken it a few steps further by seriously editing, at times, the conversation and even using my editorial freedom to clarify some points. So enjoy.

Bob: Hey everyone, BobWP. We are here with another Do the Woo podcast—episode 53— where we talk with cool peeps in the WooCommerce community. We have great peeps as cohosts too. Joining me today, the wonderful, amazing, hope-he-doesn’t-get-swept-up-by-a-tornado, Mendel Kurland.

Mendel: Hey Bob, I'm hoping I don't get swept up, too.

Bob: Yeah, we're keeping our fingers crossed. I'm sure at least you'll be here through the podcast.

Mendel: That's right. And if I'm not, I'll hold on as long as I can.

Bob: Okay. Well, before I introduce our guest, I'm just going to give a quick shout out to our sponsors. WooCommerce.com. Go there, see everything they have going on. Also check out their Slack channel. There's a lot of stuff there that you can get involved in. Conversation. Learn stuff going on in core. They have a chat occasionally on core as well. Good stuff.

Then there's MyWorks QuickBooks Sync for WooCommerce. If you use QuickBooks and WooCommerce, you're going to save a lot of time and headaches because this is a two-way syncing platform. And WP Security Audit Log. Want to know why things went a little bit sideways on your store? You can see what your shop managers have been up to, and see if something went a wonky there along the way. So thanks to our sponsors.

Our guest today I've known for a while in WooCommerce space. He has both an agency and a great plugin out there: Clif Griffin. Clif, how are you doing today?

Clif: I'm doing great, thanks for having me here.

How Clif Does the Woo

Bob: We always start with the question of "how do you do the Woo?”. It’s an opportunity for you to tell us what you do with WooCommerce.

Clif: The main thing I do with WooCommerce is a plugin called CheckoutWC. CheckoutWC essentially replaces your checkout page with a Shopify-style checkout. Multi-step collecting information in a single domain of knowledge, and trying to automate as much as possible. This gives people a nice, cathartic experience of completing something while maximizing the conversions.

The Journey to WooCommerce

Bob: How did you get to WooCommerce? We always love to hear the trip there, the journey. I won't use the word struggle, but there's always some way you end up on WooCommerce. I know you have an agency, too. Can you tell us the story behind that?

Clif: My history in eCommerce started around 2011 with a plugin called Shopp. That was probably the first serious effort at eCommerce within WordPress. I think WPeCommerce may have come out a little bit before it, but it was a developer-focused plugin. So I went all in. I was working full-time for a company that had a big eCommerce site, so I got deep into customizing eCommerce at that point.

But, as many plugins did, WooCommerce came onto the scene and just shook everything up, and eventually with millions of installs, they won out in the end. Along the way, I got an itch to make things better, to not take default experiences, to try to customize, to be specific to the store we were working on and what those customers needed to maximize the conversion.

So about four years ago, I decided that I wanted to take what we had done for Shopp for one of our clients, which was essentially a Shopify-style checkout, and bring it to WooCommerce for everybody. So I shopped it around at WordCamp US in Philadelphia. Talked to Brian Krogsgard and a few other people at the after-party and asked, "Hey, what do you guys think of this? Does it sound like a good idea?" A couple of people told me, "It sounds like a great idea. You need to get started now, because this idea is not going to stay out there forever." So we started, and it took two years to launch, as these things sometimes do. Since then, I've gotten really deep into it. It was something we used here and there for client projects, but I really had no idea what I didn't know at that point. It's amazing to me how big the ecosystem is.

Single Page vs. Multi-Step Checkouts

Mendel: Yeah. What's surprising to me is that it's such a simple concept, but something that so many store owners don't do well, just because they're using the default checkout process. And there's a lot in the default checkout process that isn't optimized for every customer to exit after purchasing. So I'm curious. A lot of people have questions. Should I do a single-page checkout? Should I do two steps, three steps?

What makes CheckoutWC in particular more interesting? Does it help it convert better for customers, rather than a one-page checkout or a two-step checkout, or something like that? Give us your secret sauce, because we know that you already have it, and you're going to charge people for it anyway. So it's cool.

Clif: That's right. I think if you look at the research, it's pretty mixed on whether a single-page or a multi-step checkout page is ideal. I think it really is situational, not all multi-steps are equivalent, not all single pages are equivalent. So I think if you're really focused on reducing friction, that should be your ultimate goal. If you just have a digital product that doesn't have any shipping address or shipping options, then maybe a one-page checkout's going to make sense for you.

What we really connected to when we first saw Shopify's checkout a few years ago was the logical sequence, that it keeps you focused on one bit of information at a time. The first thing it asks you for is your shipping address, so there's no question of, "Is this the same address that's on my credit card?" Things like that. And then the next step is very logical after that, it asks you for your shipping method, how you want to get the package.

We've tried to take that and take it a little bit further. For example, our base-level service has ZIP auto-complete. Instead of asking for city, state, ZIP, we ask for country, ZIP, state, and city, so that when you enter in your ZIP code, it'll instantly fill in your city and state based on that lookup. We look for opportunities to take things that customers have to do that are manual and boring and say, "Well, can we do this for them?" And we do it if we can.

The other example of that would be around a big problem smaller retailers have. They want their customers to have accounts, but customers are often not frequently buying from your site. So they don't remember if they have an account. So when you type in your email address, we do a quick lookup to see if you have an account, and if you do then we show the login fields. If you don't have an account, then we automatically check the "create account" checkbox for you. Along with that, we strongly encourage people to use the auto-generated passwords. There's no reason to slow someone down during a checkout by asking them to come up with another password.

The Quick Checkout

Mendel: I like that it's a lot more nuanced than just, "Is it going to be a one-page checkout, two-page checkout, three-step checkout?" There's more nuance, and there's more that you're doing there to help people out. I think in a world where people are using Amazon and things are pre-filled, or using Target.com, or whatever it is, we are instacart nowadays. If you're using any of those services, you're accustomed to just logging in and having all of your information there. So anything that you can do to help people connect their information very quickly to that site and move on, that's super awesome and super helpful to get somebody out the other side with the sale.

Clif: Yeah, like you said, it's not rocket science. It's not even very sexy. But I think that eCommerce is really hard because of the number of use cases it has to cover. When you look at the standard checkout page, they're really just focused on something that's bulletproof, that will work for everyone. The downside is it's not customized or tailored to work really well for any particular type of business. So that's really our challenge.

I think our process is optimized for stores that ship products more than digital products. It does work with digital products and becomes a two-step checkout because you obviously don't need a shipping option step there. But we're also looking at, "What if we embrace the digital side?” Maybe it becomes a one-page checkout at that level. So we're always looking for opportunities like that to reduce friction.

I don't know if you guys have ever had an eCommerce experience where you just felt pulled along by the gravity of the site, everything just makes you want to move to the next step, it makes you feel like you're just along for a ride. And I think that feeling comes from good design and also an intuitive process where you don't feel like you have to think. So that's always what we're striving for as we make design decisions around the product.

Thanks to our sponsor:This episode is brought to you by MyWorks QuickBooks Sync for WooCommerce integration. 

If you use QuickBooks for your accounting, this is the route to go. This integration fills in the missing holes for you to sync all your sales, customer and payment data to QuickBooks to streamline your accounting. Plus it syncs inventory and products both ways on both platforms. When using MyWorks Sync, it takes care of the data entry that would otherwise takes hours to input manually. It’s compatible with QuickBooks online, Desktop Pro, Premier or Enterprise and Point of Sale. 

In a nutshell, this will make your accounting effortless, save you a ton of time and give you the needed accuracy in your accounting that we all know is very important and critical. and it’s easy to setup and use. 

So keep on top of one of the most important pieces of your WooCommerce shop. Go to MyWorks.software and find it under the integrations or you can download it directly from the WooCommerce marketplace. And now, back to our conversation.

Scratching the Itch. A Product Emerges from Client Work

Bob: Obviously from both the product and the client side of things, the user experience is important to you, and you do spend quite a bit of time with that in research. But going back to what you mentioned about scratching an itch, I know that a lot of our guests who do products have this same story, and it sounds as it that came out of a need from your client.

Clif: Yeah, not every client has the budget to really go deep to match the way my brain might want to on that stuff. Really, that itch came out of working with a bigger brand that wanted to go deep, and it allowed us to think through every step of the process and research the pros and cons of different strategies. We're never done. eCommerce changes all the time, WooCommerce changes all the time, all the add-ons change all the time, so it's a whack-a-mole process in some ways.

But we started out at the beginning and decided we weren't going to try to get out of that or take any shortcuts. That we were going to make a good faith effort to work with every single add-on that we could make it work for, and also try to not bloat our plugin and slow it down as part of that. It's been a good experience on the development side, of just seeing how fewer and fewer of the requests that come in like, "Hey, I have this addon that doesn't work with your plugin." It's more experiential like, "How can I change these colors or add things to the page?"

And I think because we've hit a good point of parity with that native checkout experience, as different as they are, that we've managed to create a compatible interface between the two so that most plugins think that they're on the normal checkout page and just work the same. So we don't have to have tons of code or things to make it work.

Working with the New WordPress Way

Mendel: So I'm curious, since you have such a popular plugin and you're spending a lot of time working on other people's sites with the agency, what sorts of obstacles have you come up against with the new way that WordPress is architecting itself with some of the new changes like Gutenberg or just different realities or paradigms that exist now within WordPress that didn't exist two years ago?

Clif: It's funny. We have mostly avoided compatibility issues because we are very opinionated. You just activate it, and once the checkout page loads, we intercept the whole thing at the template load hook and just substitute our own markup. And then we call some of the same actions that are in WordPress core, or things like that. So really there's no place that it touches Gutenberg. It doesn't really interact with the WooCommerce block system as far as Gutenberg. So far, we've totally been able to sideskirt that, and we haven't had any really huge issues.

We do have things where they'll need to change. Their localization scripts took forever to get working properly, because they wrote it to work on a page that has the billing address first, not the shipping address. We had to just hammer at it and we got to the point where we can load their localization scripts as far as, when you select a country, it populates the states, and all that stuff. That's a poor answer, but we've been able to skip the whole pain.

WooCommerce Growing Pains

Mendel: No, it's cool. I guess my follow-up to that is what changes or trends have you seen in the eCommerce space in general? As people create more stores, as WooCommerce gains even more popularity, as the platform begins that slow walk towards maturity, what are you noticing in that way?

Clif: Yeah, it's interesting. I don't know that I have seen any surprising trends exactly, in terms of how people are selling, but what I am really amazed by is just the type of customer that WooCommerce has. They're primarily not developers. They may have hired a developer to help them, but many of them are just setting it up themselves.

They may have been on Shopify or a platform like that and had some challenges. We have a ton of CBD stores, because Shopify makes it hard to sell CBD products. So we see a lot of people coming over, and their goal is to not have to build custom things. A lot of them say, "We loved our Shopify store, we can't use it anymore and this is exactly what we're looking for." Something that had parity on that user-experience level.

As far as trends in functionality, I think we're seeing a lot more interest in those express checkout options, whether it's Apple Pay, Google Pay, PayPal, the ability to skip the whole process. And that does leverage some of those things that Amazon has by default, which is decades of people storing their information in their system, so it's almost too easy to buy something on Amazon.

I think things like Apple Pay and Google Pay are becoming more popular, they're really starting to become accepted as not just get a gizmo that Apple made that may or may not be around for the longterm. Now it's becoming an absolute requirement. And I get it, I use it every time it's available, it's a way faster way to check out no matter what store you're on.

CheckoutWC 3.0 Released

Bob: One of the things we wanted to talk about and we were going to move it to announcements, but I wanted to pull it in here because of your recent update. You have quite a major update, I see this is the biggest one you've had since 2018, I think that's correct.

Clif: Yeah.

Bob: Tell us a bit about what is new in the update, and also revisit blocks, because I know that you are looking at it going down the road . You've already talked a little bit about how you're not having to touch that part of it, but how do you foresee it playing a role down the road? So first let's start with the new update.

Clif: Sure. 3.0 is the latest version that we released, and it was really an effort to synthesize everything we learned from the day we launched it until now. We thought we had a handle on the WooCommerce ecosystem when we launched in 2018. We definitely did not. I remember I posted a really dorky poll on Twitter when we were building the plugin and asked, "What gateways do you guys use?" I just had PayPal, Stripe, Authorize.net, because these were the gateways that my clients generally used. I had no idea there are literally hundreds of gateways out there, and none of them are especially popular. If you were to make a pie chart, it would just be a rainbow. We thought, "Well, most people just have Stripe, and so we'll just focus on that initially."

So all that we learned in having to painfully adjust our system to work with so many different add-ons and plugins, we realized that we had just done some things in an inefficient way, especially around the way that we template. Our templates were really verbose, and to create any small change you basically had to create your own child template and then make changes. But then you were missing out on any fixes we made to those templates. So we started from scratch on the template system.

Another thing we haven't talked about, we support what we call cart editing, which allows your checkout page to be your cart page. You can adjust quantities, you can remove items, etc. So we totally rethought how that works. We have a stepper now for quantity. We had this strange process before where it was a drop down and you would pick your quantity or enter in a custom quantity, but we realized all that stuff was just too much. The simple minus and plus incremental buttons were all we needed there.

So it really gave us a chance to step back and say, "Okay, if we were going to start from scratch, how would we have done this?" And then I started a new Git branch and started hammering away at it, completely expecting to break everything so badly I would just get depressed and revert. But we managed to fight our way through, and I think it's a lot more solid.

Working with Blocks

You mentioned the blocks, and really that's what we're trying to figure out right now. It's been a constant request, especially as our customer changes over time. I think you had those early adopters that are willing to just try things that are completely untested. They were way more forgiving than your average customer, and they also were more developer-minded than our average customer. To give them a little action hook that outputs in HTML, that wasn't intimidating to them.

What we're doing now is looking at, "How can someone who doesn't know how to code at all use our system?" The first thing we did in 3.0 is took a look at a lot of our snippets. We went through our entire knowledge base, and everywhere we had a snippet, I said, "Should this be an option? Is this being used so much that we should just formally bring it in as an option?" We did that for probably five or 10 different common use cases.

And the itch we still needed to scratch that I think is really going to help us keep some customers that we might be losing right now is how do people put custom blocks onto their checkout page? Things like badges or free shipping prompts like you've seen on some sites where it has "spend 50 more dollars to get free shipping". It's like a little progress bar. We want to have a library of those things where you can add your trust badges, it's pre-designed, and you just have to tweak some things.

We want to leverage what's happening in the WordPress space at large, and what's happening at WooCommerce, but we want to do it in a way that makes sense for our customers. Right now I'd say we're still in evaluation phase. Gutenberg is becoming more popular over time, it definitely has some rough edges that I'm reminded of every time I personally use it, but I think that may be the right approach. Because you have the ability to have these kinds of modules that feel magical when you're using them, that you can copy and paste and you don't have to worry about what's the underlying data source, because it just magically wires everything up.

So that's where we're at now, is just exploring. Because we don't want to commit, and then we have legacy technical debt that we have to maintain forever. We want to solve it in the simplest way we can.

Thanks to our sponsor:This episode is brought to you by WP Security Audit Log. We all know the importance of your WooCommerce store and security. And when you can keep track of everything through logs, the end product is security. But having those logs for your store is so much more.

Their comprehensive activity logs that you can use with WooCommerce keeps you on top of what is going on with your shop managers and your team. You will be able to monitor and record when they make changes to products, order and coupons. And notably, it will help you with your store compliances. They make it easy to troubleshoot when there is something going on. In fact, you will be able to configure emails and instant SMS notifications to get alerted of critical changes.

Want to go a step further? You will see who is logged in and what changes are being made in real-time. And if needed, you can mange, limit, block and even terminate any user sessions. This is perfect for membership or subscription sites as it can help you control limitations on single user access.

There is a number of reports you can generate from the activity logs. In a nutshell, stay on top of it all. What is going on and when. From that your site will benefit from the added security. So keep safe and secure and check out what they have to offer you at WPSecurityAuditLog.com. Now let’s head on back to the show.

WooCommerce 4.1 and WooCommerce Payments

Bob: One of the things that I was going to bring up also in the announcements was WooCommerce 4.1 came out, and it made me think of it when you were talking payment gateways. One of the things they've done, they haven't put it in core, is WooCommerce Payments, their new payment gateway. Through the wizard, when you're installing it, it now asks if you want to install it. So I went through that process, and it was surprisingly easy through the wizard, compared to going and getting your Stripe API and all these keys and everything and putting it in. It was seamless. The thing was, if you had Stripe already as a payment gateway, then you had two options for Stripe on your checkout page, so you had to choose.

There are still some things to work out there as far as knowing what to expect, but I think it's primarily aimed at the new WooCommerce user or store owner because it's part of the wizard. It being essentially a Stripe payment gateway, and you had mentioned the challenges with payment gateways, will this be easy to integrate?

Clif: Yeah, we haven't really messed around with it yet, partly because I knew it was based on Stripe and I assumed that the code would be very similar other than their novel approach of actually having the merchant dashboard be in the WooCommerce dashboard. That's really interesting. So we haven't really looked at that, though I've seen the same thing at Shopify, now it has essentially been white labeled like Stripe, same deal. And we're thinking about that too.

We have at this point 1300+ sites running CheckoutWC. A lot of those are multi-site licenses, so we don't have quite that many subscriptions, but the question becomes, "Are there things that we can do across the board to provide a service? One of the pain points we've had is PayPal. The way the express checkout works can be onerous and buggy, and there are a million different options out there. So we're starting to ask ourselves, "Would it make sense from a business perspective, and also just making this easier for our customers, to potentially have our own PayPal implementation, become a PayPal partner?"

Which I think is the same thing WooCommerce is doing, although they've got 4 million stores, I'm sure they're going to make a killing off of the ease of it and the fact that all of the setup happens right in the dashboard, but also those payment fees are going to be considerable. So yeah, we try to keep an eye on it. We know it's not an ecosystem we have a large amount of control over, but it seems like they're headed in the right direction now.

Bob: Mendel, have you had a chance to look at anything with 4.1 or anything?

Mendel: Yeah, we've been testing. I'm working on playing around with some of the intricate bugs, which I won't mention here, but bugs with how WooCommerce and certain plugins are interacting, trying to chase some of that stuff down. But mostly I think the direction that WooCommerce is going in is good. I think it's a little awkward when you set up a new site – I know this is going back a little bit – but the MaxMind integration and saying, "Hey, put in your information," when you're like, "I don't even know what this is, what are you talking about?"

But generally I'm happy with the direction things are going in. I think it's cool to see some of the advanced reporting features and things like that in 4.0 becoming part of core. I know that's something that people are stressed out about. I don't love when reporting features are run all at once on a server that might have difficulty in the first place, shared hosting and things like that. But they're also keeping that stuff in mind with new queuing systems and things like that. So all good, dig the direction it's going in. I haven't played with a ton of 4.1-specific features beyond just making sure that everything's working well on our platform.

Bob: Cool. I just update and let all the plugin developers and hosting companies deal with all that stuff. That's the extent of my testing, is update and move ahead, and thank you if things don't break.

Mendel: That's the way I feel about it too. I'm helping with some advanced migrations and stuff like that at Nexus, and I'll run into a bug and people are like, "You're the WooCommerce expert," and I'm like, "Hey listen, there's somebody that is smarter than I am in all domains." I mean, my therapist is smarter about me than I am. Everybody has somebody who is smarter than them. So yeah, I just go and talk to the expert experts. The experts for the experts.

Bob: Yep, and that's why I have this podcast, because I can basically bring on experts and become an expert by osmosis, so it's all good.

Clif: That's right.

cheeryface.com

Bob: Well, I know that you have one more announcement, Mendel, something Woo- based, but maybe not really Woo-based.

Mendel: Yeah, it is a little Woo-y. Actually, I did experience WooCommerce 4.1 as I was creating this site.I got to play around with the new setup wizard, which I thought was good. It terrified me at one point because I almost clicked "continue" on installing a bunch of plugins.

But anyway, the project is called Cheeryface.com. A lot of us are wearing masks, whether or not you are on the side of wearing masks or not wearing masks. I have bad allergies, so when I mow the lawn, I like to put something over my mouth and my nose to keep some of the big particles of grass from getting in my nose.

So anyway, I created this website and it just has a bunch of fun face coverings. I've been out in public and seen a lot of people with these old black face coverings that makes everybody look like they're just very somber and sad. So I wanted to brighten things up a little bit. If we're going to do this thing, let's do it right. So I created this site, and I'm releasing new designs every so often, and I'm also taking custom design orders. I've done a few custom dogs and cats for friends, colleagues, and random Internet users. So yeah, it's called Cheeryface.com.

Bob: Cool. Mendel's new empire. We’ll put in a link in so listeners can check that out.

Mendel: Yeah, I'm not getting rich off this, people, I'm not getting rich. The margins are slim.

Bob: Yeah, I bet, especially if you're doing custom. Well, this has been excellent, I'm going to have Mendel close out and get all this wrapped up in a nice tidy bow there. He's all set for that, right?

Mendel: I'm always set for it, Bob. Hey, I wanted to, once again, thank our sponsors. MyWorks QuickBooks Sync for WooCommerce. WooCommerce.com, you can't forget about them and WP Security Audit Log. And while we're at it, I also want to ask Clif—I feel weird calling you Clif because I barely know you but maybe we're closer now— Clif, can you tell people where to find you on the Internet? Because they're going to want to know.

Where to Find Clif

Clif: Sure, you can find me @clifgriffin on Twitter, Facebook, things like that. CheckoutWC.com, the plugin site, and then if you're looking for our agency, it'sObjectiv.co. I always struggle with how to spell this, but you can think about it as object-I-V.co.

Mendel: Yeah, those are the things you don't think about when you're naming a company, right?

Clif: Exactly.

Mendel: I want to encourage everybody to head on over to your favorite podcasting app, whether it's iTunes or Android's equivalent, and subscribe to Bob's podcast called Do the Woo. Sign up for the Woo News posts or podcasts. And of course, if you have the opportunity and you have a little extra change in your pocket, give it to Bob, because Bob does a great job of finding people to be on this podcast so that it's interesting for you to listen to, and also writing lots of great content. Become a friend of Do the Woo, and you can find all that over at BobWP.com.

Bob: Cool.

Mendel: Was that good, Bob? Did it work?

Bob: That was perfect. We are good to go. Thanks Mendel, and thanks Clif for joining us today.

Clif: Thank you guys.

Thanks to our current Community Sponsors

PayPal
WooCommerce