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

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

  1. Save a copy of the plugin on your computer from codecanyon
  2. Login to your WordPress dashboard using an admin account
  3. Navigate to Plugins > Add new > Upload plugin
  4. 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
  5. 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

login&register-alternative

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:

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

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:

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:

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:

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:

– 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).

login-register-top-message

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:

– 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

login-register-without-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:

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:

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:

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:

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.

wizzad-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-next-button-bkg

Wizard Previous Button Background Color

Change the background color of the previous button.

wizard-previous-button-bkg

Wizard Place Order Button Background Color

Change the background color of the place order button.

wizard-place-order-button-bkg

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-arrow-inline

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
tabs-arrow-inline
Text Under Number Template
tabs-arrow-text-under
Hide Number on Tab Template
tabs-arrow-hide-numbers

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.

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.

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

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

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

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

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:

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:

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:

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:

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

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:

back to top

Add social media buttons

In order to add social media buttons on the checkout login step please follow this guide (if social media buttons are already on your default checkout page then they will be on the multistep too):

1. Generate your social media login/register buttons for the checkout page (to properly redirect to the checkout page after users will be authenticated or registered)

2. Navigate to plugins -> arg-mutistep-checkout -> woocommerce -> checkout -> and open form-checkout.php file

3. If you want to place the social media buttons at the top of the login step then please search for that line:

and insert your generated code before that line.

If you want to place the social media buttons at the bottom of the login step then please search for that line:

and insert your generated code after that line.

If generated code is a shortcode ( with brackets like [your_social_media_shortcode] ) then in order to use/apply that shortcode you have to use do_shortcode function:

If generated code is plain html like:

then just insert that code before or after the lines mentioned on step 3.

The only downside will be that on every update you will have to insert this generated code again.

If you are using the Woocommerce Social Login plugin from Woocommerce and the socials buttons appear on your default checkout but not on the multistep, please add this css code where you can add custom css code in your theme:

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:

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):

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):

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:

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:

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 DemoArgThemes