Open Nav

Elementor

Configure the WooCommerce plugin for custom Elementor checkouts

Updated 29 Sep 2020

Ideal Postcodes WooCommerce Extension - Elementor Guide

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:

Adjustments

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.

Navigate to shortcode-screenshot

 

Elementor shortcode-screenshot

Support

Contact us if you get stuck. Drop by our developer chat page for in-depth assistance.