Customize the checkout page

There are a number of way to customize the checkout page. You can do some changes via settings in the plugin, but you can also use hooks or you own template.

The default layout of the checkout page

In Qliro you have the option to change the checkout layout via the plugin settings.

1. Shopping cart and delivery options.
2. Customer order note.
3. Select another payment method button (if offering other payment methods).
4. Qliro checkout (where you enter personal information and choose payment method).

Switch between one column and two column layout

In the plugin settings, under Checkout Customization, there is a setting to switch between a one column layout and different two column layouts.

One column checkout

Two column checkout (Qliro in right column)

Two column checkout (Qliro in left column)

Two column checkout (Qliro in left column) – Storefront light

Remove, add and move with action hooks

If you want to make some more extensive changes to the layout of the checkout page, it is recommended to work with action hooks.

Hooks in WordPress essentially allow you to change or add code without editing core files. They are used extensively throughout WordPress and WooCommerce and are very useful for developers.

Read more about action and filter hooks here:

• WordPress hooks
• WooCommerce hooks

In Qliro for WooCommerce there are some action hooks available, mainly for how the checkout page should be displayed.

The checkout template file

templates/qliro-one-checkout.php

When Qliro for WooCommerce is displayed on the checkout page, the WooCommerce template file form-checkout.php is replaced by the qliro-one-checkout.php template file. On the Qliro for WooCommerce template page, there are several action hooks you can use to add code or content. These hooks have the following names:

• qliro_one_wc_before_wrapper
• qliro_one_wc_before_order_review
• qliro_one_wc_after_order_review
• qliro_one_wc_before_snippet
• qliro_one_wc_after_snippet
• qliro_one_wc_after_wrapper
• qliro_one_wc_after_checkout_form

Through these action hooks, you can easily add information to different locations on the checkout page.

Create your own template file

If you need to make changes that can’t be accomplished via action hooks, then you are able to overwrite the checkout template file via your theme. The plugin supports WooCommerce’s way of handling template files.

The template file used for displaying Qliro for WooCommerce is called qliro-one-checkout.php and it is located in the templates folder in the plugin. To overwrite the file, copy it from the plugin, then paste it into the /woocommerce folder in your theme. Now you have the opportunity to make the changes you want. 

Keep in mind that the action hooks qliro_one_wc_after_order_review and qliro_one_wc_after_wrapper must remain for the plugin to work properly.

Note: The legacy hook woocommerce_before_checkout_form is no longer used by the plugin. However, if you experience issues caused by third-party plugins, it may be a good idea to ensure that this hook is still present as well.