creative designer

For some stores the map on the Shopify Order status page can actually add confusion - especially if you don't ship products and are pickup only. There's a simple enough way to hide the map so let's peek at some code to do it.

CSS or JavaScript. Pick your poison.

You got two options here and both are going to require adding code into the additional content and scripts section found the Admin Checkout Settings.

The safest option is to use CSS but it comes with the drawback of leaving an partial remains of the container behind (see pic below). It bothers the hell out of me but you might not care or notice it. Here's the CSS in any case.

<style>.map {display:none }</style>

Now if you wanted to use JavaScript instead would could get of the container as well as the map, fixing that little UI quirk. If you want to stick with the jQuery version, here's the JavaScript for that method:

<script>
if(Checkout && Checkout.$ && Checkout.$.fn){ Checkout.$('.map[data-mapbox]').parent().remove(); }
</script>

Or you could use some vanilla JS for the same result.

<script>
document.getElementsByClassName('map')[0].parentNode.remove()
</script>

And that's that. 

Like to work with me?

Let's talk