Smart Checkout Setup

WooCommerce Smart Checkout turns your checkout page into a mobile-first, multi-page form.

Installation

To install the plugin, upload the .zip file you downloaded after purchase under Plugins => Add New => Upload. Alternatively, you can upload the unzipped folder via SFTP to wp-content/plugins, then activate in the WordPress admin.

After plugin activation, the Smart Checkout form will be live. Go to your site, add a product to your cart, and checkout on a mobile device to see it in action.

Settings

The settings screen is under WooCommerce => Smart Checkout in the left-hand admin menu.

Google Places Key

Smart Checkout has an address autocomplete that uses the Google Places API. It looks up nearby addresses as you type, and then auto-fills all of the address fields.

To enable this feature, you must get a free Google Places API key. You can do that here. Make sure to get a server key. Once you have created a project, you can click "Credentials", and add a new server key.

Next, enable Google Maps Javascript API. Click "Overview" and search for 'maps javascript' then click the "Google Maps Javascript API" item.

Click the blue "Enable" button.

You can now copy your server API key, and add it to the Smart Checkout settings page. You should then be able to see an address autofill like the image below.

Address Translation

If you want your address to show up in a different language, you can add a language identifier to your Google Places API key. In the plugin settings, add:

YOURAPIKEY?language=ja

Find more information on languages  here.

Logo URL

Enter the full url to your logo file to place it at the top of the checkout screen. Make sure it is https.

Enable for desktop?

This is a beta feature that displays the Smart Checkout form for desktop, not just for mobile. It is displayed in a modal on larger screens. If you leave this unchecked, Smart Checkout will only display for mobile visitors.

Color Pickers

You can customize the colors of your form using the color pickers on the settings page. Further customization can be done with custom CSS.

Customizing the Form

The Smart Checkout form is fully customizable. It uses the default WooCommerce  checkout form hooks and filters, so any customizations you have made in a separate plugin or theme will still apply.

There are also additional hooks:

wsc_before_fields - action hook before the first form fields appear.

wsc_after_billing - action hook after step 1 billing details

wsc_after_shipping - action hook after step 2 shipping fields

Adding a custom step

To add a new step to the form, here's an example of custom code:

add_action('wsc_after_billing','my_plugin_custom_step');
function my_plugin_custom_step() {
	?>
	<section class="wsc-frame" style="display:none">
		<div class="wsc-row">
		<!-- your custom fields or any content here -->
		</div>
	</section>
	<?php
}

The code above will put custom code as the second step. Please note that if you are adding custom checkout fields, you will need to follow the proper steps outlined in the  WooCommerce documentation here.

Adding or Moving Checkout Fields

This product supports the default ways of moving WooCommerce checkout fields with  custom code, using a plugin such as Checkout Field Editor or adding special fields with a plugin such as Checkout Add-Ons.

Basically, pretty much anything you want to do with your checkout form can be done :)