Configure the WooCommerce Plugin for Custom Elementor Checkouts
Updated 30 Dec 2020
Ideal Postcodes provides a WooCommerce extension that adds UK address search and validation across a WooCommerce Store.
Elementor is a free WordPress website builder, which also allows you to create custom checkouts for WooCommerce.
Elementor stops checkout plugins from running by disabling the default page actions. Follow the steps below to fix this:
Step 1. Add a PHP snippet to your WordPress site either via functions.php
or a PHP snippet plugin. The snippet defines a function which activates the WooCommerce specific checkout hooks.
/**
* Re-invokes certain WooCommerce hooks to activate the Ideal Postcodes address validation plugin on checkout
* Requires a shortcode "[do_woocommerce_hooks]" to be added to the checkout page
*/
add_shortcode('do_woocommerce_hooks', function(){
// Loads JavaScript and CSS assets
do_action('woocommerce_before_checkout_form');
// Injects credentials and initialises above assets
do_action('woocommerce_before_checkout_form');
});
Step 2. On your custom checkout page, add a shortcode with the following contents:
[do_woocommerce_hooks]
This will cause the function defined in Step 1 to run, loading in address validation.
Contact us if you get stuck. Drop by our developer chat page for in-depth assistance.