Smart Checkout Setup v2

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.

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.

For 1.x documentation about autocomplete and other settings, please  visit this page.