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).
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
}
