4.9 (97.95%) 39 votes

Even all checkout page built with Magestore Magento 2 One step checkout shares the same fundamental rules like all checkout steps in the same page, or 3 checkout modes of guest, sign-up and logged-in, the checkout page of each business has its own requirements. The article is to help you manage all magento 2 checkout customization steps by OSC module and make it to be best-fit your business.

1. How to change One Step Checkout page

Firstly, it is necessary to remember that the onestepcheckout.phtml  is the parent of all children template in One Step Checkout extension:

<script type=”text/x-magento-init”>
“#checkout”: {
“Magento_Ui/js/core/app”: <?php /* @escapeNotVerified */ echo $block->getJsLayout();?>

In this file, we get all the JsLayout by the command: echo $block->getJsLayout(). It will render all the UI Component of One Step Checkout extension.

All Model-View of the UI Component is written in view/frontend/web/js/view and the template view of UI Component is written in view/frontend/web/template. So you can easily change the template by modifying the template files.

For example:

onestepcheckout.html: it call all the knockout children template

shipping.html: shipping address template

billing-address.html: billing address template

shipping-method/list.html: shipping method template

payment.html:  get the payment list

They are some important templates of the One Step Checkout extension. If you want to modify other blocks, you can find them in the view/frontend/web/template. It includes all the template files of the checkout steps.

If you want to change the JS Logic, you can change in the view/frontend/web/js/view. These files are regular Magento UI Component, so it is easy to read and customize for the Magento experienced developer.

If you want to customize the Login popup of the One Step Checkout extension, you can modify it in the .phtml file:



2. How to add Custom Field to One Step Checkout page

Like the Magento Default Checkout page, the One Step Checkout uses the UI Component and Knockout JS to render the UI at the web client. All the UI Components are declared in onestepcheckout_layout.xml. After using the onestepcheckout_layout.xml, we also use the LayoutProcessor (Magestore\OneStepCheckout\Block\Checkout\LayoutProcessor.php) to remove or change the templates of UI Component.

For example:

if(isset($jsLayout[‘components’][‘checkout’][‘children’][‘steps’][‘children’][‘billing-step’][‘children’][‘payment’][‘children’][‘afterMethods’][‘children’][‘discount’])) {



We remove the discount component at the payment and re-add it to the order review in onestepcheckout_layout.xml:

<item name=”discount” xsi:type=”array”>
<item name=”component” xsi:type=”string”>Magestore_OneStepCheckout/js/view/payment/discount</item>
<item name=”displayArea” xsi:type=”string”>discount</item>
<item name=”children” xsi:type=”array”>
<item name=”errors” xsi:type=”array”>
<item name=”sortOrder” xsi:type=”string”>0</item>
<item name=”component” xsi:type=”string”>Magento_SalesRule/js/view/payment/discount-messages</item>
<item name=”displayArea” xsi:type=”string”>messages</item>

So, there are two ways you can use to add the Custom Field to the OneStepCheckout. It ‘s in the onestepcheckout_layout.xml and in LayoutProcessor.php. Using LayoutProcessor is more dynamic than adding by the .xml layout because you can use PHP Logic to process.

After adding the component to the OneStepCheckout page, you can use knockoutJS to continue processing the logic.

To get the template, you can use the knockout.js. Example, in the onestepcheckout.html template, you want to get child template “delivery-date”, you can use:

<!– ko foreach: getRegion(‘delivery-date’) –>

<!– ko template: getTemplate() –><!– /ko –>


It will get all the child template has the region ‘delivery-date’.


3. How to hide some fields in One Step Checkout shipping address

You can hide some field of address by using the onestepcheckout_layout.xml and using the “visible” attribute.

Example hide the “company” field:

<item name=”company” xsi:type=”array”>
<item name=”validation” xsi:type=”array”>
<item name=”min_text_length” xsi:type=”number”>0</item>
<item name=”visible” xsi:type=”boolean”>false</item>

You can also change the validation of that field: min_text_lengthvisible.

4. How to submit additional data to the place order function

Because Magestore Magento 2 One Step Checkout extension uses the checkout logic of Magento to process the place order function, so before placing order, we save all the additional data to the Magento session. After that, we handle the observer-event to process the information which we stored in the session.

You will see the place order function at prepareToPlaceOrder() of web/js/view/osc.js. The saveAdditionalInformation is called before place order. The saveAdditionalInformation function which you can change is in web/js/action/save-additional-information, and the controller is in Controller/Index/SaveCustomCheckoutData.

After saving the information to the session, you can use the Observer-Event to continue processing.

5. How to add configuration data to the checkout page

In some cases, you want to add the configuration to the checkout page. For example: the configurations to enable delivery time, enable order comment, checkout title … Because we use Knockout Js in the checkout page, so the configuration is loaded by the global var window.checkoutConfig.

If you want to insert more vars to the window.checkoutConfig , you can edit the file Model/OneStepConfigProvider.php and the function getConfig(). This function returns one array.

You can push the value to the array like:

$output[‘example’] = ‘example’;

So you have inserted the ‘example’ var to the window.checkoutConfig. If you want to get the value in the JS file, you can use window.checkoutConfig.example.

6. How to make CSS and other visual changes to the checkout

In this version, we use the marterial 3-column design. All the rules for how the checkout is displayed with colors, fonts, images and more are defined in the CSS file which you can find here:  view/web/css/theme/material/onestepcheckout.css

Feel free to customize Magento 2 One Step Checkout as you desire for the extension is 100% open source. Try 6 techniques I just have introduced you above to create the checkout page that is perfect for your business!

Automating your eCommerce Site to Save Time and Money. HOW?
Magento 2 Migration - Simple & Definitive Guide