Express checkout with Drupal Commerce

Drupal Commerce is a robust, flexible e-commerce platform. Wading through its several pages of configuration options isn't always easy, though. That's why we've put together a cheat-sheet for configuring a clean, simple express checkout with Drupal Commerce.

What is express checkout? For the sake of this post, we'll call it a single page checkout process that any user - including an anonymous user - can complete in a snap. We'll also assume that you want your users to proceed to checkout the moment they click a Buy now button, instead of having to first proceed to a shopping cart page.

An express checkout can un-clutter your website's online shopping experience and keep your users happy. It's also very easy to set up — we'll do it in five steps and about ten or fifteen minutes. Before we get started, make sure you've installed commerce and configured your first products. After that, you're ready to go.

Create a rule to redirect users to checkout

First we'll add a system rule to redirect users to the checkout page after they click the Add to Cart button. On to the redirect:

  1. From http://www.example.com/admin, click on the Configuration link, then Rules, then Add a new rule
  2. Enter Redirect to checkout on add to cart as the rule's name
  3. Select After adding a product to the cart from the React on event dropdown, then click Save
  4. Under the Actions section, click Add action
  5. Under the Select the action to add dropdown, select Page redirect
  6. Type checkout in the Value dialogue, then click Save
  7. Click Save Changes

There! Now your users will go directly to checkout instead of hassling with the pesky shopping cart page.

Shift your checkout panes out of review order

Commerce separates different portions of the checkout process onto separate pages. For large, complicated orders, this makes a lot of sense. For a simple order, though, it just means more clicks and skim-reading before your users' orders are complete. Getting rid of the multi-page process is a cinch:

  1. From http://www.example.com/admin, click on the Store link, then Configuration, then Checkout settings
  2. Drag the Review item out of the Review order section and down into the Disabled section
  3. Drag the Payment item out of the Review order section and up into the Checkout section
  4. Click Save Configuration

Presto! Emptying the Review order section of the checkout process is the gist of a single page checkout.

Grant anonymous users the Access checkout permission

By default anonymous users aren't permitted to complete the checkout process. Changing this is almost as easily done as said:

  1. From http://www.example.com/admin, click on the People link, then Permissions
  2. Under the Checkout section, grant the Access checkout permission to anonymous users
  3. Click Save Permissions

Voila! Now your anonymous users can shop to their hearts' content.

Set your users' expectations with a custom order complete page

Drupal Commerce creates a user account on the fly when an anonymous user checks out. It can't, however, log them in after account creation. This means that the user will need to activate their account in order to view their order or receipt information. It might be smart to create an order completion page for anonymous users wherein you let them know about these fairly important details. Once you've created a custom order completion page for your anonymous shoppers, you can use rules to make sure they see it:

  1. From http://www.example.com/admin, click on the Configuration link, then Rules, then Add a new rule
  2. Enter Redirect to anonymous order completion as the rule's name
  3. Select Completing the checkout process from the React on event dropdown, then click Save
  4. Under the Conditions section, click Add condition
  5. Select User has role(s) from the Select the condition to add dropdown
  6. Type site:current-user in the Data Selector dialogue
  7. Select authenticated user from the Value options under Role
  8. Check Negate near the bottom of the page, then click Save
  9. Under the Select the action to add dropdown, select Page redirect
  10. Type the path of your custom order completion page in the Value dialogue, then click Save
  11. Click Save Changes

Listo! Your custom order completion page will make sure your anonymous users don't feel deserted after their payment has gone through.

Change your button text to make better sense

You'll want to use the String Overrides module to change the Add to Cart text used on product pages to Buy now, and the Continue to next step text on the checkout page to Express Checkout. String Overrides is pretty simple to use, so we'll forego a walk through for this portion.

And a note about your shopping cart…

You may notice that the cart displayed on your checkout page isn't editable. Depending on what type of buying process you're trying to build, you may want to change that. You can remove the cart from the checkout page altogether by simply dragging it into the Disabled section under Commerce's Checkout settings. You can also replace it with an editable cart by first dragging it into the Disabled section, and then displaying the Shopping Cart block on the checkout page. You can do that last bit using Drupal's standard block management interface at admin/structure/block.

Drupal Drupal Planet Usability User Experience

Read This Next