Magento 2 Custom Checkout Steps allows the admin to create special checkout steps that will be visible to the customer at the time of checkout.
Meanwhile, the customer needs to follow those steps in order to complete the checkout. This is a perfect feature for those store owners that are keen to obey customer demands.
Further, this module helps to add some particular steps in the product checkout process. Moreover, this feature will also amaze the customers as they will experience something out of the box.
Watch the video tutorial below to understand the extension workflow:
- Admin can create multiple custom checkout steps from the admin panel.
- Existing custom options can be edited by the admin.
- The admin can create a form using custom options from the admin panel.
- The admin can take actions on created custom steps like Enable, Disable, and Delete.
First, the customers will get a zip folder and they have to extract the contents of this zip folder on their system.
After that, the extracted folder has an src folder, inside the src folder you have the app folder.
The user needs to transfer this app folder into the Magento2 root directory on the server as shown below.
After the successful installation, you have to run these commands in the Magento2 root directory:
First command –
php bin/magento setup:upgrade
Second Command –
php bin/magento setup:di:compile
Third Command –
php bin/magento setup:static-content:deploy
After running the commands, the user have to flush the cache from the Magento admin panel by navigating through System > Cache management as shown below.
For the multilingual support, the admin will navigate through Store > Configuration > General > Locale Options and select the locale as German (the language into which admin wants to translate the store content).
For translating the module language, navigate through app > code > Webkul > CustomCheckoutSteps > i18n and edit the en_US.csv file.
Further, translate the words on the right and upload the modified file to the same location. The filename of the translated file should be according to the language and region code like de_DE.csv.
The user can edit the CSV like the image below.
On installing the module successfully, the admin can set the basic configurations by navigating through Stores > Configurations > Checkout Steps.
The admin will find Checkout Steps Settings under Checkout Steps tab, where the module status can be enabled as shown in the image below.
Create Custom Checkout Step
Thereafter, the admin will move forward to create the custom steps by navigating to Custom Checkout Steps > Create Custom Steps under the admin panel.
After that, the admin will find two sections Steps Details and Custom Options.
- Status: The admin can Enable/ Disable the step by toggling this radio button.
- Step Title: The admin will enter the title of the step, that will be visible in the front end.
- Step Order: The admin will enter the sort order of the step.
The admin can add any of the custom fields as per the requirement. The permitable options are visible in the image below:
The admin can use following Option Type:
- Field: The admin can enter the option with the text field.
- Area: The admin can use the text area for the custom option.
- Drop Down: The customer can use a drop-down option type for selecting one among many.
- Radio Button: The admin can use the radio button in case the customer can answer by toggling it.
- Checkbox: The admin can add the custom option with a checkbox.
- Multiple Select: The customer can use multiple select options for selecting more than one option available in the dropdown.
- Date: The admin can use this input type in a case to enter the date.
- Date And Time: The admin can use this input type in a case to enter the date and time.
- Time: The admin can use this input type in a case to enter the time.
Finally, the admin will tap on the Save Steps button to save the changes.
Manage Custom Checkout Step
Just after clicking on the Save Steps button, the admin will land to the Manage Custom Steps Page.
Also, the admin can navigate to the same page via the admin panel by navigating to Custom Checkout Steps > Manage Custom Steps as shown in the image below:
Under this page, the admin will be able to check the list of created custom steps. The admin can also edit the existing custom steps.
Admin End Actions – Magento 2 Custom Checkout Steps
Under the Manage custom steps page, the admin can also take some actions against the created options. The admin can Enable, Disable, and Delete the single or bulk of steps in just one click. The tab is visible as shown in the image below:
Front End Visibility Of Checkout Process
Once all the backend configurations are completed, the feature will be visible in the frontend. The customer will add the product to the cart.
After that, the customer will move to the checkout page by clicking on the “View and Edit Cart” button under the cart icon or can directly initialize the checkout process by clicking on Proceed to checkout button.
Further, the customer will click on the Proceed to Checkout button to reach the checkout page.
On the checkout page, the customer will have to provide the shipping address and the shipping method first. The custom checkout steps will be visible here, by completing all the custom steps the customer will be able to place the order successfully.
Finally, the custom step created by the admin will be visible as shown in the image below:
Here the customer can add the desired message and can click on the checkbox.
*Note: These custom steps will depend on how the store owner creates it with the option types and sort order.
Here in this, the admin have created two custom steps. The customer will enter the details in all the custom steps.
Finally, the customer will select the payment option and accept the terms and conditions.
And the customer will receive the success message once the order is completed as shown in the image below.
Admin End: Order View
The admin can view the details of the order that the customer places by navigating thorugh Sales > Orders, in the admin panel.
The details of the custom steps can be seen under Additional Steps Information as shown in the image below.
That’s all for the Magento 2 Custom Checkout Steps. Still, if you face any issue feel free to add a ticket and let us know your views to make the module better https://webkul.uvdesk.com/
Current Product Version - 4.0.0
Supported Framework Version - 2.0.x , 2.1.x , 2.2.x , 2.3.x, 2.4.x