Thank You Page

WooCommerce Thank You Page Map Showing Customer Address

WooCommerce Thank You Page showing customer address on a Google Map

Pre-Requisites

You must have Elementor Pro installed as this code snippet makes use of the Google Map widget and Saved Template Shortcode.

How To Implement This Solution?

Watch the short video below on how to implement the Google Map showing the customer address on the WooCommerce Thank You Page (order-received endpoint).

About This Solution

If you’ve shopped online before, more than likely you’ve encountered a Shopify store 🤢

Unless you’ve read my WooCommerce Conversion Rate Optimisation eBook (you can read a page for free), I think we can all sadly agree, Shopify does a better job of providing a slicker checkout process.

However, with the right WooCommerce customisation snippets, WooCommerce does provide an extremely flexible platform for customisations to get the exact store you want, unlike Shopify.

Something a lot of Shopify store owners rave about is the thank you page and the map which shows the customer’s address post-purchase.

This snippet does exactly that, it shows a Google Map on the thank you page with the customer’s shipping address (or billing address if the shipping address doesn’t exist).

Elementor Pro
This implementation can give reassurance to the customer, knowing their order is being sent to the correct place.

You must have Elementor Pro installed as this code snippet makes use of the Google Map widget and Saved Template Shortcode. Remember to replace the template shortcode ID!

How To Implement This Code Snippet

/**
 * Snippet Name:	WooCommerce Thank You Page Map Showing Customer Address
 * Snippet Author:	ecommercehints.com
 */

// Shortcode for the Elementor Map Widget location
function ecommercehints_customer_address_shortcode( $atts ) {
	if( ! is_wc_endpoint_url( 'order-received' ) ) return; // Only on the Thank You page (order-received endpoint)

	global $wp;
    $order_id  = absint( $wp->query_vars['order-received'] );

    if ( empty($order_id) || $order_id == 0 ) return;

	$order = wc_get_order( $order_id );

	// Customer Billing Address
	$billing_address_1 = $order->get_billing_address_1();
	$billing_address_2 = $order->get_billing_address_2();
	$billing_city = $order->get_billing_city();
	$billing_state = $order->get_billing_state();
	$billing_postcode = $order->get_billing_postcode();
	$billing_country = $order->get_billing_country();
	$full_billing_address = $billing_address_1 .', ' . $billing_address_2 .', '. $billing_city .', '. $billing_state .', '. $billing_postcode .', '. $billing_country;

	// Customer Shipping Address
	$shipping_address_1 = $order->get_shipping_address_1();
	$shipping_address_2 = $order->get_shipping_address_2();
	$shipping_city = $order->get_shipping_city();
	$shipping_state = $order->get_shipping_state();
	$shipping_postcode = $order->get_shipping_postcode();
	$shipping_country = $order->get_shipping_country();
	$full_shipping_address = $shipping_address_1 .', ' . $shipping_address_2 .', '. $shipping_city .', '. $shipping_state .', '. $shipping_postcode .', '. $shipping_country;

	if ($order->has_shipping_address()) {	// Show billing address if no shipping address is entered
		return $full_shipping_address;
	} else {
		return $full_billing_address;
	}
}
add_shortcode( 'map_marker', 'ecommercehints_customer_address_shortcode');	//[map_marker] is given in the map widget's location

// Add the map to the Thank You page (order-received endpoint)
add_filter( 'woocommerce_thankyou_order_received_text', 'ecommercehints_thank_you_page_map', 1, 2 );

function ecommercehints_thank_you_page_map( $thank_you_title, $order ){
	return $thank_you_title . do_shortcode(''); // Add your Elementor template id here between the single quotes
}

Snippet Benefits

  • Reassure the customer that their order is being delivered to the correct address by showing a map with their address on the Thank You page (order received endpoint).
  • If the shipping address isn’t entered, the billing address will be shown.

100 WooCommerce Conversion Rate Optimisation Tips

This field is for validation purposes and should be left unchanged.

Let’s collaborate!

Need to outsource WordPress development?

Join forces with UnlimitedWP for an outsourced white label web development service you can truly rely on.

First Timer Here?

Sign up to receive 20% off on your first month with us.

26027
WELCOME OFFER