ARG MultiStep Checkout Documentation

If you have any questions that are beyond the scope of this help file, please feel free to email via our user page contact form here.

Files
Installation
Wizard Location
Wizard General Settings
Wizard Steps
Wizard Styles
Add Custom Steps^New
How To^New

Files

Download the plugin from CodeCanyon:

After you’ve purchased this plugin, you’ll need to access your codecanyon account and download the the ZIP archive (ARG Multistep Checkout for WooCommerce v1.0.zip) which contains the plugin installable folder (contains the plugin archive arg-multistep-checkout.zip) and the documentation folder (contains the plugin documentation).

↑back to top

Installation

Below you can find the steps you need to follow to install the plugin:

upload_plugin

Save a copy of the plugin on your computer from codecanyon
Login to your WordPress dashboard using an admin account
Navigate to Plugins > Add new > Upload plugin
Click on Choose File and browse the zipped file you’ve downloaded from codecanyon in first step (arg-multistep-checkout.zip) and press Install now button
Once the file is uploaded, don’t forget to activate the plugin

↑back to top

Wizard Location

All plugin settings can be found by navigating to Dashboard > WooCommerce > ARG Multistep Checkout:

wizard_location1

↑back to top

Wizard General Settings

Under the General Settings tab you’ll find options like: changing buttons text, custom text, wizard width, secondary font and error validation messages.

general

Buttons and Custom Text

Here you can find options like changing buttons text and wizard custom text:

buttons_costum_text

Skip Login Button Text

Use this option to change the text of the Skip Login button text. This button will allow you to move further with the checkout purchase without accessing any account.

skip_login_button

Next Button Text

This option will help you change the text of the Next button. You can go a step forward using this button.

next_button

Previous Button Text

This option can be used to change the text of the Previous button. You can go a step back using this button.

previous_button

Place Order Text Button

This is the option you need to use to change the text for the Place Order button. It will show off when the checkout process is done.

place_order_button

Custom Text

The wizard footer area contains a custom text that can be changed using this option. This extra text can include information you consider important. It will be displayed in the footer area on each step of the checkout process.

wizard_footer_text

↑back to top

Wizard Width and Secondary Font

Here you can find the options to change the wizard width and secondary font:

wizard_width_secondary_font

Wizard Maximum Width

Use this option to change the width of the main block which includes all the checkout content. The best part of the option is that you can be pixel specific and change the checkout maximum width to suit your website design.

wizard_width

Wizard Secondary Font Family

The checkout form is built to inherit the fonts you’re using on your website. If the theme you’re using allows you to load more than one font into your website, then you need to use this option to set a specific font that is already loaded. The option works on tabs, headings, labels, buttons, payment method labels.

secondary_font_family
secondary_font_family_01

Wizard Secondary Font Weight

Change the font weight for tabs, headings, labels, buttons, payment method labels highlighted above (see screenshot for Wizard Secondary Font Family).

↑back to top

Validation Error Messages

Multistep checkout has a built-in step by step validation so, when you navigate to the next step, all the required fields of the current step are validated. The exceptions are the Login and Coupon steps, because those are separated forms and have their own validation.

validation-error-messages-last

Required Field Message

Some of the form fields need to be completed by the user. You can use this option to change the text of the required field error message.

validation_messages_required_field

Required Checkbox Message

You can use this option to change the text of the required checkbox error message.

validation_messages_required_checkbox

Invalid Email Address Message

The email address field is required, so, to change the text of the invalid email address error message use this option.

validation_messages_invalid_email

Invalid Phone Number

Change the text of the invalid phone number error message.

Invalid Postcode/ZIP

Change the text of the invalid postcode error message.

↑back to top

Wizard Steps

These options refer to your checkout steps and all their content can be found here:

wizard-steps

Change Steps Names, Show or Hide Checkout Steps

In the first part of the wizard steps section, you’ll see on the left side the option to change the name of each checkout step (tab) and on the right side there’s the option to show/hide some steps.

steps

You can completely hide the Login, Coupon, Shipping, Order Review steps if you think one of them isn’t necessary on your website. Below is an example of hiding the login and coupon steps:

hide_login_coupon

Additional Information

If you don’t think it’s necessary to have the additional information block on your shipping section, then you can use this option to hide it.

Show or Hide Product Thumbnail

Use this option to show/hide product thumbnail in the checkout order review table.

↑back to top

Registration form

Here you can find the available options for the registration form:

Show Register Form

Use this option to show the registration form on the login step.

Login & Register Layouts

Use this option to change the login & register layouts:

1. Register form switched with login form: on the login step will be a single content area with two sections(login form and registration form), each associated with a heading. The user can click on headings to swap between content that is separated into logical sections.

Registration_form

2. Register form on right side

Register form switched with login form styles adjustments:

By default we set a 21px font-size for the login/register headings. If you want a different font size for the login/register headings(to perfectly match to your theme checkout headings) please paste this css styles where you can apply custom css code to your theme:

/*
*Adjust Login/Register Headings
*/

.argmc-login-tabs {
    font-size: 21px;
}

*Adjust Login/Register Headings

.argmc-login-tabs {

font-size: 21px;

}

and change the 21px value for adjusting the font size of the login/register forms headings to your needs.

Also please paste this css styles where you can apply custom css code to your theme if:
– if you want a smaller width for the login/register forms like in the demo or
– the width of the login/register forms is smaller than the step width then in order to vertically align the login/register headings with the login/register forms

/*
*Adjust Login/Register Forms Width
*/

.has-register .argmc-login-inner {
    max-width: 380px;
}

*Adjust Login/Register Forms Width

.has-register .argmc-login-inner {

max-width: 380px;

}

and change the 380px value for adjusting the login/register forms width to your needs.

Register form on right side styles adjustments:

By default we set a 19px font-size for the login/register headings. If you want a different font size for the login/register headings(to perfectly match to your theme checkout headings) please paste this css styles where you can apply custom css code to your theme:

/*
*Adjust Login/Register Headings
*/

.argmc-wrapper .register-visible .login-headings {
    font-size: 19px;
}

*Adjust Login/Register Headings

.argmc-wrapper .register-visible .login-headings {

font-size: 19px;

}

and change the 19px value for adjusting the font size of the login/register forms headings to your needs.

If you want to hide the login text (If you have shopped with us before, please enter your details in the boxes below. If you are a new customer, please proceed to the Billing & Shipping section.) please paste this css styles where you can apply custom css code to your theme:

/*
*Hide the login text
*/

.woocommerce-checkout .woocommerce .argmc-wrapper .login p:first-child {
    display: none !important;
}

*Hide the login text

.woocommerce-checkout .woocommerce .argmc-wrapper .login p:first-child {

display: none !important;

}

This text is part of the WooCommerce files and if you want to translate/modify strings that are added by WooCommerce, you will need to use the WooCommerce translation files: Translating WooCommerce (Localization)

If you want a smaller distance between login and register forms please paste this css styles where you can apply custom css code to your theme:

/*
*A smaller distance between login and register
*/

@media screen and (min-width: 992px) {

   .register-visible .argmc-login {
      padding-right: 10%;
   }

   .register-visible .argmc-register {
      padding-left: 10%;
   }
}

*A smaller distance between login and register

@media screen and (min-width: 992px) {

.register-visible .argmc-login {

padding-right: 10%;

}

.register-visible .argmc-register {

padding-left: 10%;

}

and change the 10 value for adjusting the distance between login and register to your needs.

If you want to adjust the vertical line between login and register please paste this css styles where you can apply custom css code to your theme:

/*
*Adjust the vertical line between login and register
*/

@media screen and (min-width: 992px) {

   .register-visible .argmc-login:after {
      display: block;
      width: 1px;
      height: 181px;
      background: #ddd;
      top: 79px;    
   } 
}

*Adjust the vertical line between login and register

@media screen and (min-width: 992px) {

.register-visible .argmc-login:after {

display: block;

width: 1px;

height: 181px;

background: #ddd;

top: 79px;

}

– to hide the vertical line change display: block; into display: none;
– to make the vertical line wider change the 1 value (width: 1px;)
– to make the vertical line taller change the 181 value (height: 181px;)
– to set another color change the #ddd color (background: #ddd;)
– to set another top position change the 79 value (top: 79px;)

Login & Register Top Message

Use this option if you want to show a top message above the login/register sections (this option will apply only if you show the registration form on the login step).

If you want to adjust the Login & Register Top Message please paste this css styles where you can apply custom css code to your theme:

/*
*Adjust Login &amp; Register Top Message
*/

.login-register-message {
    font-size: 14px;
    line-height: 1.5;
    padding-top: 1px;
    margin-bottom: 41px;
}

*Adjust Login & Register Top Message

.login-register-message {

font-size: 14px;

line-height: 1.5;

padding-top: 1px;

margin-bottom: 41px;

}

– to modify the text font-size change the 14 value (font-size: 14px;)
– to modify the text line-height(distance between text lines) change the 1.5 value (line-height: 1.5;)
– to add extra space at the top change the 1 value (padding-top: 1px;)
– to add extra space at the bottom change the 41 value (margin-bottom: 41px;)

Login Heading

Use this option to change the login heading. This option will apply only if you show the registration form on the login step.

Register Heading

Use this option to change the register heading. This option will apply only if you show the registration form on the login step.

↑back to top

Force Users to Login or Register

Use this option if you want to force users to login/register before navigate to the next step (this option will apply only if you enter an error message and show the registration form on the login step). Leave the box empty and this option will have no effect.

How this works? Keep the next button and when the user will click on it to move forward to the next step an error message will appear:

custom-error-message-

or only on login step you can hide: the wizard footer entirely (border, custom text, skip button) or only the custom text or only the skip(next) button

If you want to hide the skip(next) button on the login step please paste this css styles where you can apply custom css code to your theme:

/*
*Hide Wizard Footer Skip(Next) Button 
*/

.argmc-wrapper.login-step .argmc-nav-buttons {
     display: none;
}

*Hide Wizard Footer Skip(Next) Button

.argmc-wrapper.login-step .argmc-nav-buttons {

display: none;

}

If you want to hide the wizard footer custom text on the login step please paste this css styles where you can apply custom css code to your theme:

/*
*Hide Wizard Footer Custom Text
*/

.argmc-wrapper.login-step .argmc-nav-text {
     font-size: 0;
     padding: 0;
     border-bottom: none;
}

*Hide Wizard Footer Custom Text

.argmc-wrapper.login-step .argmc-nav-text {

font-size: 0;

padding: 0;

border-bottom: none;

}

If you want to hide the wizard footer (border, custom text, skip button) on the login step please paste this css styles where you can apply custom css code to your theme:

/*
*Hide Wizard Footer
*/

.argmc-wrapper.login-step .argmc-nav {
     display: none;
}

*Hide Wizard Footer

.argmc-wrapper.login-step .argmc-nav {

display: none;

}

↑back to top

Move the Coupon to Another Step

Use this option to move the coupon on a different step. This option only applies if the “Coupon Step” option is set to “Hide”. You can move the coupon before order review table, after order review table, and before payment methods for now.

Coupon-on-Another-Step

To adjust the margins of the new coupon form position please paste this css styles where you can apply custom css code to your theme:

/*
*Adjust Coupon Form Margins
*/

.argmc-wrapper .coupon-wrapper {
     margin: 40px 0 50px;
}

*Adjust Coupon Form Margins

.argmc-wrapper .coupon-wrapper {

margin: 40px 0 50px;

}

and change the 40px value for adjusting margin top, and 50px for adjusting margin bottom to your needs.

Important Note

To completely hide the coupon, please make sure that the “Coupon Step” option is set to “Hide” and the “Move the Coupon Form to Another Step” option is set to “Default – Coupon Step”.

↑back to top

Combine Steps

Here you can find the available possibilities to combine your wizard steps:

Combine Billing and Shipping Steps

This option allows you to merge billing and shipping steps to show on single checkout step or you can have them separately. Right under this option, you can choose a new name for your two merged options.

combine_billingshipping

Combine Payment and Order Details Steps

This option allows you to merge payment and order details options the same way. You can have them on a single checkout step or separately. The two options merged can also be named using the option right under.

combine_orderpayment

↑back to top

Order Review Step

This is a very cool feature, available with version 1.9 – you can show/hide the order review step from the first section of the Wizard Steps tab using the “Show/Hide Step” options.

order-review-step-last

Customer Details Review after the Payment Methods

This option was built as an alternative of the previous option. If you decide not to show the order review step, you can use this option to show the customer details review (email, phone, addresses) after the payment methods.

order-review-after-payment-last

Order Table on Order Review Step

Use this option to show/hide order review table on the order review step. This option works only if you decide to hide the order step from the first section of the Wizard Steps tab using the “Show/Hide Step” options. In this case, the order table will be displayed on the order review step with all functionalities (not just the order table as plain text).

order-table-on-last-step-last

↑back to top

Wizard Styles

Here you can find the options to change your wizard styles:

wizard_styles

Wizard Text Color

Change the color of wizard footer custom text. This option is useful because you can select a color to highlight an important text.

wizard_footer_text

Wizard Accent Color

Change the accent color of the wizard. This is a useful option because you can go for the color you decided to mainly use on your website. Check the screenshot below to make an idea of the elements that will change the color once you decide to use it:

wizard_accent_color

Wizard Border Color

Change the color of the wizard footer border line which can be seen between the content section and the footer section. If you don’t need it, you can simply use white color and it will be removed.

wizard_border_color

Wizard Validation Error Messages Color

Use this option if you want to change the color of the validation error messages.

validation-error-messages

Change Wizard Buttons Styles (skip login, next, previous, place order)

By default your theme buttons styles will be applied. Enable this feature if you want to change the text/background color of these buttons and use the below options:

Wizard Button Text Color

Change the color of the button text.

Wizard Button Text Transparency on Hover

Change the opacity of the text button on hover. The opacity-level describes the transparency-level, where 1 is not transparent at all, 0.5 is 50% see-through, and 0 is completely transparent.

Wizard Next/Skip Login Buttons Background Color

Change the background color of the next/skip login buttons.

Wizard Previous Button Background Color

Change the background color of the previous button.

Wizard Place Order Button Background Color

Change the background color of the place order button.

↑back to top

Tab Styles

Here you can find the options to change your tabs styles:

tab-styles-last

Tabs Layouts

There are two built-in tabs layouts you can choose from: “square” and “arrows”:

Tabs Square Layout
tabs_default_template
Tabs Arrows Layout

Tabs Arrows Text Styles

There are three built-in tabs text styles you can choose from. Change the text styles of tabs arrows layout using:

Text Inline Template

Text Under Number Template

Hide Number on Tab Template

Tabs Square Text Styles

There are three built-in tabs text styles you can choose from. Change the text styles of tabs square layout using:

Text Inline Template
tabs_default_template
Text Under Number Template
tabs_text_under
Hide Number on Tab Template
tabs_hide_number

Tabs Width

You can choose from two built -in options:

Equals
tabs_default_template
Auto(changes the tabs width depending on the step name)
tabs_width_auto

Tab Number Color

Use this option to change tab number color.

tabs-number-color

Tab Text Color

You can change the text color of your tabs using this option. Note that the current/completed tab won’t have this text color.

tabs_text_color

Tab Background Color

You can change the background color of your tabs. Note that the current/completed tab won’t have this background color.

tabs_bkg_color

Tab Border Left Color

The checkout tabs are delimited by a fine border, so you can exactly see them. Use this option to change the border color so you can make it more visible or to hide it.

tabs_border_left_color

Tab Border Bottom Color

Change the border bottom color of the tabs. Note that the current/completed tab won’t have this border color.

tabs_border_bottom_color

Current / Completed / On Hover Tab Number Color

Use this option to change the number color of the completed/current/hovered tab.

tabs-number-color-on-hover

Current / Completed / On Hover Tab Text Color

The current/completed/on hover tabs need to be highlighted for a better user experience. Use this option to change the text color of those specific tabs.

tabs_completed_text_color

Current / Completed / On Hover Tab Background Color

The current/completed/on hover tabs need to be highlighted for a better user experience. Use this option to change the background color of those specific tabs.

tabs_completed_bkg_color

Current / Completed / On Hover Tab Border Bottom Color

Use this option to change the border color under the tabs of the completed/current/hovered tab.

tabs-border-color-on-hover

↑back to top

Checkout Forms Styles – login form, coupon form, billing form…

If you prefer the plugin checkout forms styles then select the “Plugin” option (the styles will be inherited from the plugin) and proceed with making the changes you want.
If not, by selecting the “Theme” option, your theme checkout form styles will be inherited.

Please note that whatever option you choose will not affect the wizard tabs and footer styles.

styles-woo-overwrite

The above checkout forms elements options are available only if you choose to inherit the “Plugin” styles.

Forms Text Color

Use this option to change the text color of the steps content.

form_text_color

Forms Headings/Table Headings/Labels Color

Use this option to change the color of headings, labels, table headings.

form_heading_color

Form Fields Border Color

Use this option to change form fields border color.

form_fields_border_color

Form Fields Background Color

Use this option if you want to change the background color of your form fields.

form_fields_bkg_color

Form Fields Border Radius

Use this option to change form fields border radius. Depending on the style you want to achieve, you can go for a few pixels and have a sharp corner or you can set more pixels for more rounded corners.

form_fields_border_radius

Invalid Form Fields Background

If you think the Validation Error Messages aren’t enough to highlight the required fields, then you can use this option to also change the background color of the invalid form fields.

form_fields_invalid_bkg_color

Validated Form Fields Border

Use this option to change validated form fields border color. A form field take this border color after is completed and validated.

form_fields_validated_border_color

Button Background Color

This option helps you change the background color of your buttons.

form_btn_color

Button Background Color on Login and Coupon Forms

Use this option to change the buttons background color on Login and Coupon steps.

form_login_coupon_btn_bkg_color

↑back to top

Add Custom Steps

Below you can find the steps you need to follow to add new tabs/steps to the wizard:

1. Choose what woocommerce checkout steps you need

Navigate to the plugin settings (Dashboard > WooCommerce > ARG Multistep Checkout > Wizard Steps tab) and use the built-in options to hide/show the default wooCommerce steps to your needs:

wizard_steps

2. Create new steps and add content to them

After you decided what steps you want for your multisptep checkout(in the previous step), create new ones by adding the below code at the end of your theme’s functions.php file:

use the first function argmcAddNewSteps($fields) to set the new steps names and positions(the step position is related to the steps defined above).
Also here you can set the css classes for the new created steps. Use “argmc-skip-validation” class if you don’t want to validate a new created step.
use the second function argmcAddStepsContent($step) to add content to the related steps created in the first function

Remove the “Add Second Step/Add Third Step” code blocks from first function and “Second Step Content/Third Step Content” code blocks from second function if you need only one custom step.

/**
/**
 * Add New Custom Step
 * @param array $fields
 * return array 
 */ 

function argmcAddNewSteps($fields) {

	//Add First Step
	$position = 3;     //Set Step Position
	$fields['steps'] = array_slice($fields['steps'] , 0, $position - 1, true) +
            array(
                'step_1' => array(            
                    'text'  => __('Tab Name', 'argMC'),     //"Tab Name" - Set First Tab Name                            
                    'class' => 'my-custom-step'             //'my-custom-step' - Set First Tab Class Name               
                ),
            ) +
            array_slice($fields['steps'], $position - 1, count($fields['steps']) - 1, true);
	
	
	//Add Second Step
	$position = 4;  //Set Your Step Position   
	$fields['steps'] = array_slice($fields['steps'] , 0, $position - 1, true) +
            array(
                'step_2' => array(
                    'text'  => __('Alt Tab Name', 'argMC'),                //"Alt Tab Name" - Set Second Tab Name
                    'class' => 'alt-custom-step arg-mc-skip-validation'    //'alt-custom-step arg-mc-skip-validation' - Set Second Tab Class Name
                ),
            ) +
            array_slice($fields['steps'], $position - 1, count($fields['steps']) - 1, true);

	
	//Add Third Step
	//...................
	

	return $fields;

}
add_filter('arg-mc-init-options', 'argmcAddNewSteps');



/**
 * Add Content to the Related Steps Created Above
 * @param string $step
 * return void 
 */ 

function argmcAddStepsContent($step) { 
	
    //First Step Content
    if ($step == 'step_1') {	
		?>
		<p>first step content ...</p>
		
		<?php
	}
        
		
    //Second Step Content
	if ($step == 'step_2') {	
		?>
		<p>second step content ...</p>

		<?php
	}
        
    
	//Third Step Content
	//..................
    
}
add_action('arg-mc-checkout-step', 'argmcAddStepsContent');

/**

* Add New Custom Step

* @param array $fields

* return array

function argmcAddNewSteps($fields) {

//Add First Step

$position = 3; //Set Step Position

$fields['steps'] = array_slice($fields['steps'] , 0, $position - 1, true) +

array(

'step_1' => array(

'text' => __('Tab Name', 'argMC'), //"Tab Name" - Set First Tab Name

'class' => 'my-custom-step' //'my-custom-step' - Set First Tab Class Name

) +

array_slice($fields['steps'], $position - 1, count($fields['steps']) - 1, true);

//Add Second Step

$position = 4; //Set Your Step Position

$fields['steps'] = array_slice($fields['steps'] , 0, $position - 1, true) +

array(

'step_2' => array(

'text' => __('Alt Tab Name', 'argMC'), //"Alt Tab Name" - Set Second Tab Name

'class' => 'alt-custom-step arg-mc-skip-validation' //'alt-custom-step arg-mc-skip-validation' - Set Second Tab Class Name

) +

array_slice($fields['steps'], $position - 1, count($fields['steps']) - 1, true);

//Add Third Step

//...................

return $fields;

}

add_filter('arg-mc-init-options', 'argmcAddNewSteps');

/**

* Add Content to the Related Steps Created Above

* @param string $step

* return void

function argmcAddStepsContent($step) {

//First Step Content

if ($step == 'step_1') {

<p>first step content ...</p>

<?php

}

//Second Step Content

if ($step == 'step_2') {

<p>second step content ...</p>

<?php

}

//Third Step Content

//..................

}

add_action('arg-mc-checkout-step', 'argmcAddStepsContent');

Helpful info

If you decide to add a new step which contains inputs fields before the billing form, you have to wrap the step content into a form statement like in the below example(same as the login and coupon steps which are wrapped into separated forms). After the billing form all new added steps will be wrapped by the default woocommerce checkout form.

<form class="custom-checkout-form" method="post">
   
       <label class="" for="first_custom_field">First Custom Field<abbr class="required" title="required">*</abbr></label>
       <input id="first_custom_field" class="input-text" name="first_custom_field" placeholder="" value="" type="text">
   
   
       <label class="" for="second_custom_field">Second Custom Field<abbr class="required" title="required">*</abbr></label>
       <input id="second_custom_field" class="input-text" name="second_custom_field" placeholder="" value="" type="text">
   
</form>

<label class="" for="first_custom_field">First Custom Field<abbr class="required" title="required">*</abbr></label>

<label class="" for="second_custom_field">Second Custom Field<abbr class="required" title="required">*</abbr></label>

</form>

To skip validation on a new created step, add arg-mc-skip-validation class, like in the below exemple:

//Add Second Step
$position = 4;  //Set Your Step Position   
$fields['steps'] = array_slice($fields['steps'] , 0, $position - 1, true) +
       array(
           'step_2' => array(
               'text'  => __('Alt Tab Name', 'argMC'),                //"Alt Tab Name" - Set Second Tab Name
               'class' => 'alt-custom-step arg-mc-skip-validation'    //'alt-custom-step arg-mc-skip-validation' - Set Second Tab Class Name
           ),
       ) +
       array_slice($fields['steps'], $position - 1, count($fields['steps']) - 1, true);

//Add Second Step

$position = 4; //Set Your Step Position

$fields['steps'] = array_slice($fields['steps'] , 0, $position - 1, true) +

array(

'step_2' => array(

'text' => __('Alt Tab Name', 'argMC'), //"Alt Tab Name" - Set Second Tab Name

'class' => 'alt-custom-step arg-mc-skip-validation' //'alt-custom-step arg-mc-skip-validation' - Set Second Tab Class Name

) +

array_slice($fields['steps'], $position - 1, count($fields['steps']) - 1, true);

To validate a new input field, add validate-required class on his parent, like in the below exemple:

<p class="form-row form-row validate-required">
   <label class="" for="first_custom_field">First Custom Field<abbr class="required" title="required">*</abbr></label>
   <input id="first_custom_field" class="input-text" name="first_custom_field" placeholder="" value="" type="text">
</p>

<label class="" for="first_custom_field">First Custom Field<abbr class="required" title="required">*</abbr></label>

</p>

3. Add custom javascript code

Now, if you want to add custom javascript code for the new created steps, or, why not, for the existing ones, please do the following:

create a new file named “arg-custom-steps.js” under the “js” folder in your theme
to load/register the new created js file, add the below code (function argmcAddStepsJs()) at the end of your theme’s functions.php file after the functions added at the previous step

/**
 * Add arg-custom-steps.js file
 */ 

function argmcAddStepsJs() {
    if (is_checkout()) {
         wp_register_script('arg-custom-script', get_stylesheet_directory_uri() . '/js/arg-custom-steps.js', array('arg-mc-scripts'), null, true);
         wp_enqueue_script('arg-custom-script');
    }
}
add_action('wp_enqueue_scripts', 'argmcAddStepsJs');

/**

* Add arg-custom-steps.js file

function argmcAddStepsJs() {

if (is_checkout()) {

wp_register_script('arg-custom-script', get_stylesheet_directory_uri() . '/js/arg-custom-steps.js', array('arg-mc-scripts'), null, true);

wp_enqueue_script('arg-custom-script');

}

add_action('wp_enqueue_scripts', 'argmcAddStepsJs');

Helpful Info/Events

There are two custom events for the plugin’s unique actions:

argmcBeforeStepChange – This event is fired after the step is validated(if the step requires validation) and before the step change. The function takes three parameters: event handler element, current step index and next step index.
argmcAfterStepChange – This event is fired after the step change. The function takes three parameters: event handler element, previous step index and current step index

/**
* Event is triggered before a step change
* @param {jQuery.Event} event Event handler
* @param {int} currentStep Current step position
* @param {int} nextStep Next step position
*/
     
$('.argmc-wrapper').on('argmcBeforeStepChange', function(event, currentStep, nextStep) {
    //JavaScript code here...
});
    

    
/**
* Event is triggered after a step change
* @param {jQuery.Event} event Event handler
* @param {int} prevStep Previous step position
* @param {int} currentStep Current step position
*/ 
  
$('.argmc-wrapper').on('argmcAfterStepChange', function(event, prevStep, currentStep) {
    //JavaScript code here...
});

/**

* Event is triggered before a step change

* @param {jQuery.Event} event Event handler

* @param {int} currentStep Current step position

* @param {int} nextStep Next step position

$('.argmc-wrapper').on('argmcBeforeStepChange', function(event, currentStep, nextStep) {

//JavaScript code here...

});

/**

* Event is triggered after a step change

* @param {jQuery.Event} event Event handler

* @param {int} prevStep Previous step position

* @param {int} currentStep Current step position

$('.argmc-wrapper').on('argmcAfterStepChange', function(event, prevStep, currentStep) {

//JavaScript code here...

});

All the steps have custom name classes so you can easily create custom actions on a specific step or before/after step changes. For example, if you want to create custom actions when the user navigate from billing step to shipping step do the following:

$('.argmc-wrapper').on('argmcBeforeStepChange', function(event, currentStep, nextStep) {
     
     var wizardSteps = $('.argmc-form-steps');
     if (wizardSteps.eq(currentStep-1).hasClass('argmc-billing-step') && wizardSteps.eq(nextStep-1).hasClass('argmc-shipping-step')) {
           //JavaScript code here... 
     }
 
});

$('.argmc-wrapper').on('argmcBeforeStepChange', function(event, currentStep, nextStep) {

var wizardSteps = $('.argmc-form-steps');

if (wizardSteps.eq(currentStep-1).hasClass('argmc-billing-step') && wizardSteps.eq(nextStep-1).hasClass('argmc-shipping-step')) {

//JavaScript code here...

}

});

It’s always better if you know the previous and current step, so we added the “previous” and “current” classes on tabs and steps.
If the user navigate to a specific step, the step get the “visited” class. When a step is completed(after validation, if needed), the step get the “completed” class.

Well, that’s it. We’ve tried to make this process as simple as possible. Enjoy!

↑back to top

How To

In order to fix/adjust some checkout elements(if necessary) please paste this css code where you can add custom css code in your theme:

Fix checkout page checkboxes

To adjust the “remember me” checkbox:

/**
 * Adjust the "remember me" checkbox
 */ 
 
.woocommerce-checkout .argmc-wrapper #rememberme {
   position: relative;
   top: 1px;
}

/**

* Adjust the "remember me" checkbox

.woocommerce-checkout .argmc-wrapper #rememberme {

position: relative;

top: 1px;

}

and change the 1 value to your needs in order to perfectly align the checkbox and the “remember me” text.

To adjust the “Ship to a different address?” checkbox:

/**
 * Adjust the "Ship to a different address?" checkbox
 */ 
 
.woocommerce-checkout .argmc-wrapper #ship-to-different-address-checkbox {
   position: relative;
   top: 2px;
}

/**

* Adjust the "Ship to a different address?" checkbox

.woocommerce-checkout .argmc-wrapper #ship-to-different-address-checkbox {

position: relative;

top: 2px;

}

and change the 2 value to your needs in order to perfectly align the checkbox and the “Ship to a different address?” text.

To adjust the “Terms and Conditions” checkbox:

/**
 * Adjust the "Terms and Conditions" checkbox
 */ 
 
.woocommerce-checkout .argmc-wrapper #terms {
   position: relative;
   top: 1px;
}

/**

* Adjust the "Terms and Conditions" checkbox

.woocommerce-checkout .argmc-wrapper #terms {

position: relative;

top: 1px;

}

and change the 1 value to your needs in order to perfectly align the checkbox and the “Terms and Conditions” text.

↑back to top

Fix shipping methods

If the shipping methods are too long and they exceeded the layout, please paste this css code where you can add custom css code in your theme:

/**
 * Fix shipping methods
 */ 
 
.argmc-wrapper table.shop_table td:nth-child(2n), 
.argmc-wrapper table.shop_table th:nth-child(2n), 
.argmc-wrapper table.review-table td:nth-child(2n), 
.argmc-wrapper table.review-table th:nth-child(2n) {
      max-width: 174px !important;
}
.woocommerce-checkout .woocommerce .argmc-wrapper ul#shipping_method { 
      white-space: normal;
}

/**

* Fix shipping methods

.argmc-wrapper table.shop_table td:nth-child(2n),

.argmc-wrapper table.shop_table th:nth-child(2n),

.argmc-wrapper table.review-table td:nth-child(2n),

.argmc-wrapper table.review-table th:nth-child(2n) {

max-width: 174px !important;

}

.woocommerce-checkout .woocommerce .argmc-wrapper ul#shipping_method {

white-space: normal;

}

and adjust the 174 value to your needs in order to perfectly fit the shipping methods into your layout.

↑back to top

Center the navigation buttons

In order to hide the footer bottom text and center the navigation buttons(next, previous…), please paste this css code where you can add custom css code in your theme:

/**
 * Center the navigation buttons
 */ 
 
.argmc-wrapper .argmc-nav-text {
     display: none;
}

.argmc-wrapper .argmc-nav-buttons {
    text-align: center;
    border-top-width: 1px;
    border-top-style: solid;
    padding-top: 25px;
}

/**

* Center the navigation buttons

.argmc-wrapper .argmc-nav-text {

display: none;

}

.argmc-wrapper .argmc-nav-buttons {

text-align: center;

border-top-width: 1px;

border-top-style: solid;

padding-top: 25px;

}

↑back to top

Remove checkout fields autofocus

To remove checkout fields autofocus (woocommerce 3.0 – because look like an error if billing is not the first step) please paste this code in your function.php theme file at the end:

/**
* Hook in
*/

add_filter( 'woocommerce_checkout_fields' , 'remove_checkout_fields_autofocus' );


/**
* Our hooked in function - $fields is passed via the filter!
*/

function remove_checkout_fields_autofocus( $fields ) {
     $fields['billing']['billing_first_name']['autofocus'] = '';
	 $fields['shipping']['shipping_first_name']['autofocus'] = '';
     return $fields;
}

/**

* Hook in

add_filter( 'woocommerce_checkout_fields' , 'remove_checkout_fields_autofocus' );

/**

* Our hooked in function - $fields is passed via the filter!

function remove_checkout_fields_autofocus( $fields ) {

$fields['billing']['billing_first_name']['autofocus'] = '';

$fields['shipping']['shipping_first_name']['autofocus'] = '';

return $fields;

}

↑back to top

Show registration form first (login switched with register layout)

In order to show registration form as first tab (and login form as second tab) navigate to wp-content –> plugins –> arg-multistep-checkout –> woocommerce -> checkout and open to edit form-checkout.php file. After that search for this block of lines:

/**
* Login/Register Tabs Style
*/

/**

* Login/Register Tabs Style

<!--argmc-login-->

1	<!--argmc-login-->

<!--argmc-register-->

1	<!--argmc-register-->

and replace it with this one:

/**
* Register/Login Tabs Switch Style
*/

/**

* Register/Login Tabs Switch Style

<!--argmc-login-->

1	<!--argmc-login-->

$checkout)); ?>

<!--argmc-register-->

1	<!--argmc-register-->

That’s it, the registration form will be visible first (with Register as first heading tab) and the login form will be in the background (with Login as second heading tab). The only downside is that on every plugin update this block must be replaced again.

↑back to top

Set Order Table as first step

In order to set the Order Table as first step, please navigate to wp-content –> themes –> your theme and open to edit functions.php file. After that scroll down to the end of this file and add the below code:

/**
* Order Table - First Step
*/

/*
 * Add New Custom Step
 * @param array $fields
 * return array 
 */ 
 
function argmcAddNewSteps($fields) {
 
     //Add First Step
     $position = 1;     //Set Step Position
     $fields['steps'] = array_slice($fields['steps'] , 0, $position - 1, true) +
         array(
            'step_1' =&gt; array(            
                'text'  =&gt; __('Order Review', 'argMC'),             //"Tab Name" - Set First Tab Name                            
                'class' =&gt; 'my-custom-step argmc-skip-validation'  //'my-custom-step' - Set First Tab Class Name               
             ),
         ) +
         array_slice($fields['steps'], $position - 1, count($fields['steps']), true);
 
     return $fields;
 
}
add_filter('arg-mc-init-options', 'argmcAddNewSteps');
 
  
/**
 * Add Content to the Related Steps Created Above
 * @param string $step
 * return void 
 */ 
 
function argmcAddStepsContent($step) { 
	
    //First Step Content
    if ($step == 'step_1') {
    ?&gt;

/**

* Order Table - First Step

* Add New Custom Step

* @param array $fields

* return array

function argmcAddNewSteps($fields) {

//Add First Step

$position = 1; //Set Step Position

$fields['steps'] = array_slice($fields['steps'] , 0, $position - 1, true) +

array(

'step_1' => array(

'text' => __('Order Review', 'argMC'), //"Tab Name" - Set First Tab Name

'class' => 'my-custom-step argmc-skip-validation' //'my-custom-step' - Set First Tab Class Name

) +

array_slice($fields['steps'], $position - 1, count($fields['steps']), true);

return $fields;

}

add_filter('arg-mc-init-options', 'argmcAddNewSteps');

/**

* Add Content to the Related Steps Created Above

* @param string $step

* return void

function argmcAddStepsContent($step) {

//First Step Content

if ($step == 'step_1') {

Back to cart and/or a link to the shop page Continue Shopping‘); ?>

    <!--?php	
	    do_action('woocommerce_order_review');
    } 
}
add_action('arg-mc-checkout-step', 'argmcAddStepsContent');


</pre-->

<!--?php

do_action('woocommerce_order_review');

}

add_action('arg-mc-checkout-step', 'argmcAddStepsContent');

</pre-->

On the step content you can add text, links, php code or anything else. Above the Order Table we added a translatable text as an example. Please remove this code if you don’t want that translatable text above the Order Table:

/**
* Remove this code from "Add Content to the Related Steps Created Above" block
*/

    ?&gt;

/**

* Remove this code from "Add Content to the Related Steps Created Above" block

Back to cart and/or a link to the shop page Continue Shopping‘); ?>

    <!--?php

</pre-->

<!--?php

</pre-->

Important Note

This feature will work only if the Order Table doesn’t need to be automatically updated:
– if on the checkout page are not other plugins which add extra fee or something else on the fly to the Order Table;
– if on the Order Table is no more then one shipping method.

↑back to top

Skip step link above the login/register sections

In order to faster navigate to the next step if the user doesn’t want to login or register, add a link like “Continue as quest” above the login/register section. Navigate to plugin options -> wizard steps and in the “Login & Register Top Message” box please paste this link:

 <a class="argmc-skip-step">Continue as quest</a>

1	<a class="argmc-skip-step">Continue as quest</a>

and modify “Continue as quest” text to your needs. You can add this link at the beginning of that message, at the end or anywhere in that message. Also, if you want to transform that link into a button, just remove the above code and replace it with the below one:

 <a class="argmc-skip-step button">Continue as quest</a>

1	<a class="argmc-skip-step button">Continue as quest</a>

↑back to top

Show the “Next Button” above the “Previous Button” on mobiles

In order to show the “Next Button” above the “Previous Button” on mobile devices add the below css code where you can add custom css code in your theme (don’t forget to hit CTRL+F5 to see the changes in the browser):

/**
 * Show the "Next Button" above the "Previous Button" on mobiles 
 */ 
 
@media screen and (max-width: 767px) {
   .argmc-wrapper .argmc-nav-buttons {
      display: flex;
      flex-direction: column-reverse;
   }
}

/**

* Show the "Next Button" above the "Previous Button" on mobiles

@media screen and (max-width: 767px) {

.argmc-wrapper .argmc-nav-buttons {

display: flex;

flex-direction: column-reverse;

}

↑back to top

Show Steps Headings on Mobiles

In order to show steps headings on mobile devices add the below css code where you can add custom css code in your theme (don’t forget to hit CTRL+F5 to see the changes in the browser):

/**
 * Show Steps Headings on Mobiles
 */ 
 
@media screen and (max-width: 767px) {     
    .argmc-login-step .step-name,
    .argmc-coupon-step .step-name,
    .argmc-billing-step .step-name,
    .argmc-shipping-step .step-name,
    .argmc-billing-shipping-step .step-name,
    .argmc-order-step .step-name,
    .argmc-payment-step .step-name,
    .argmc-order-payment-step .step-name,
    .argmc-order-review-step .step-name
    {
      display: block !important;
      font-size: 18px !important;
      margin: 1px 0 25px !important;
   }
}

/**

* Show Steps Headings on Mobiles

@media screen and (max-width: 767px) {

.argmc-login-step .step-name,

.argmc-coupon-step .step-name,

.argmc-billing-step .step-name,

.argmc-shipping-step .step-name,

.argmc-billing-shipping-step .step-name,

.argmc-order-step .step-name,

.argmc-payment-step .step-name,

.argmc-order-payment-step .step-name,

.argmc-order-review-step .step-name

{

display: block !important;

font-size: 18px !important;

margin: 1px 0 25px !important;

}

and adjust 18 (font-size), 1 (margin-top) and 25 (margin-bottom) values to your needs. For heading margins negative values (like -15 it’s just a random value , add the value you need) are also allowed. Also, if you don’t want to show the heading on a specific step, just remove the line which contains the step name from the above code (example: if you don’t want to display the heading on the login step just remove the first line: .argmc-login-step .step-name, or if you don’t want to display it on the billing step too just remove .argmc-billing-step .step-name, line too). Make sure the last line from the remaining ones doesn’t end with comma like .argmc-order-review-step .step-name is displayed now or just keep this line and ignore this last info.

Also, if you want different heading (different margin-top or margin-bottom) margins on a specific step, just add the below code:

.argmc-login-step .step-name 
{
    margin: 4px 0 35px !important;
}

.argmc-login-step .step-name

{

margin: 4px 0 35px !important;

}

and adjust 4 (margin-top) and 35 (margin-bottom) values to your needs. Negative values (like -15 it’s just a random value , add the value you need) are also allowed. Just replace login name with the step you need (all steps names are listed in the previous block of code: login, coupon, billing, billing-shipping, order, payment, order-payment, order-review) and the heading margins of that step will be adjusted with the new distances.

↑back to top

Amazon Pay Plugin

Navigate to Plugin Options -> Wizard Steps and turn on the “Combine Billing and Shipping Steps” option. That’s it, everything should work as expected.

In order to show the Amazon Address and Payment Method boxes one under another, please paste this css code where you can add custom css code in your theme:

/**
 * Amazon Pay Styles
 */ 
 
.argmc-wrapper #amazon_customer_details .col-1,
.argmc-wrapper #amazon_customer_details .col-2 {
	width: 100%;
	float: none;
}

.argmc-wrapper #amazon_customer_details .col-1 {
	margin-bottom: 60px;
}

/**

* Amazon Pay Styles

.argmc-wrapper #amazon_customer_details .col-1,

.argmc-wrapper #amazon_customer_details .col-2 {

width: 100%;

float: none;

}

.argmc-wrapper #amazon_customer_details .col-1 {

margin-bottom: 60px;

}

↑back to top

Credits

jQuery & jQuery Validation Engine

As I said at the beginning, I’d be glad to help you if you have any questions relating to this plugin. No guarantees, but I’ll do my best to assist.

ARG Multistep Checkout Demo ArgThemes

ARG MultiStep Checkout Documentation

Table of Contents

Files

Installation

Wizard Location

Wizard General Settings

Buttons and Custom Text

Skip Login Button Text

Next Button Text

Previous Button Text

Place Order Text Button

Custom Text

Wizard Width and Secondary Font

Wizard Maximum Width

Wizard Secondary Font Family

Wizard Secondary Font Weight

Validation Error Messages

Required Field Message

Required Checkbox Message

Invalid Email Address Message

Invalid Phone Number

Invalid Postcode/ZIP

Wizard Steps

Change Steps Names, Show or Hide Checkout Steps

Additional Information

Show or Hide Product Thumbnail

Registration form

Show Register Form

Login & Register Layouts

Register form switched with login form styles adjustments:

Register form on right side styles adjustments:

Login & Register Top Message

Login Heading

Register Heading

Force Users to Login or Register

Move the Coupon to Another Step

Important Note

Combine Steps

Combine Billing and Shipping Steps

Combine Payment and Order Details Steps

Order Review Step

Customer Details Review after the Payment Methods

Order Table on Order Review Step

Wizard Styles

Wizard Text Color

Wizard Accent Color

Wizard Border Color

Wizard Validation Error Messages Color

Change Wizard Buttons Styles (skip login, next, previous, place order)

Wizard Button Text Color

Wizard Button Text Transparency on Hover

Wizard Next/Skip Login Buttons Background Color

Wizard Previous Button Background Color

Wizard Place Order Button Background Color

Tab Styles

Tabs Layouts

Tabs Arrows Text Styles

Tabs Square Text Styles

Tabs Width

Tab Number Color

Tab Text Color

Tab Background Color

Tab Border Left Color

Tab Border Bottom Color

Current / Completed / On Hover Tab Number Color

Current / Completed / On Hover Tab Text Color

Current / Completed / On Hover Tab Background Color

Current / Completed / On Hover Tab Border Bottom Color

Checkout Forms Styles – login form, coupon form, billing form…

Forms Text Color

Forms Headings/Table Headings/Labels Color

Form Fields Border Color

Form Fields Background Color

Form Fields Border Radius

Invalid Form Fields Background

Validated Form Fields Border

Button Background Color

Button Background Color on Login and Coupon Forms

Add Custom Steps

1. Choose what woocommerce checkout steps you need

Credits