Avarda Checkout – Customize the checkout page
Introduction
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:
In Avarda Checkout for WooCommerce there are some action hooks available, mainly for how the checkout page should be displayed.
The default layout of the checkout page
The appearance of the Avarda Checkout page comes with a two-column layout. In this layout we have the following sections displayed:
- Shopping cart and delivery options.
- Customer order note.
- Select another payment method button (if offering other payment methods).
- Avarda Checkout (where you enter personal information and choose payment method).
Sometimes you need to change the design of the checkout page. With Avarda Checkout for WooCommerce it is possible in several different ways.
Switch between one column and two column layout
In the plugin settings there is a setting to switch between one column layout and a two column layout. Tick the checkbox to enable two column layout.
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.
The checkout template file
When Avarda Checkout is displayed on the checkout page, the WooCommerce template file form-checkout.php is replaced by the avarda-checkout.php template file. On the Avarda Checkout template page, there are several action hooks you can use to add code or content. These hooks have the following names:
aco_wc_before_checkout_formaco_wc_before_wrapperaco_wc_before_order_reviewaco_wc_after_order_reviewaco_wc_after_wrapperaco_wc_after_checkout_form<br>aco_wc_before_avarda_checkout_form<br>aco_wc_after_avarda_checkout_form<br>
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 Avarda Checkout is called avardactor-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 aco_wc_before_checkout_form, aco_wc_after_order_review and aco_wc_after_wrapper must remain for the plugin to work properly.