ARG Multistep Checkout Documentation v1.2
Thank you for choosing ARG Multistep Checkout! Hope you'll find this plugin useful and reach your goals. 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 files 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).
Installation
Below you can find the steps you need to follow to install the 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
Wizard Location
All plugin settings can be found by navigating to Dashboard > WooCommerce > ARG Multistep Checkout:
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.
Buttons and Custom Text
Here you can find options like changing buttons text and wizard custom 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.
Next Button Text
This option will help you change the text of the Next button. You can go a step forward using this 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.
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.
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 Width and Secondary Font
Here you can find the options to change the wizard width and 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 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.
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).
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.
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.
Required Checkbox Message
You can use this option to change the text of the required checkbox error message.
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.
Important Notice
Please note that other validation error messages like: "Please enter a valid postcode/ZIP." or "Test is not a valid phone number" can be changed from WooCommerce plugin.
Wizard Steps
These options refer to your checkout steps and all their content can be found here:
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.
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:
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.
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 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.
Wizard Styles
Here you can find the options to change your 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 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 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.
Tab Styles
Here you can find the options to change your tabs styles:
Tab Template
There are three built-in tab templates you can choose from. Change the layout of your tabs using:
Default Template
Text Under Number Template
Hide Number on Tab Template
Tabs Width
You can choose from two built -in options:
Equals
Auto(changes the tabs width depending on the step name)
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.
Tab Background Color
You can change the background color of your tabs. Note that the current/completed tab won’t have this background 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.
Tab Border Bottom Color
Change the border bottom color of the tabs. Note that the current/completed tab won’t have this border color.
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.
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.
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.
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.
Forms Headings/Table Headings/Labels Color
Use this option to change the color of headings, labels, table headings.
Form Fields Border Color
Use this option to change 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 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.
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.
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.
Button Background Color
This option helps you change the background color of your buttons.
Button Background Color on Login and Coupon Forms
Use this option to change the buttons background color on Login and Coupon steps.
***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