How to hide default SnipCart Thank You page while page loads to navigate to my own thank you page

I currently am navigating users to my custom thank you page when they complete a purchase. The issue I am having is that before users makes it to my page, the default SnipCart thank you page shows up and is displayed for a few seconds before the navigation to my custom Thank You page happens. Is there a way to completely just NOT show the default SnipCart page, and make it wait until mine comes up?

This is important for 2 reasons:

  1. When the customer sees that page, they might quickly think they can just close the browser/page/tab because to them it looks like the transaction is complete and they are done. They saw the order total and saw and order number and bam they close it. When in reality I still have some post purchase information to show them on my page that they need to see, like follow up information, upsells on other products, contact info in case they need support…etc…

  2. I have a few purchase conversion tracking snippets on my custom Thank You page(Facebook, Pinterest, Bing Ads, Google Conversion Tracking etc…). Since that default SnipCart page comes up first and displays for a few seconds, I have noticed that sometimes the data that was supposed to be collected/tracked by the pixel is actually not recorded because the “user” has closed the tab on the default thank you page. So this causes my page to never load which is what triggers the conversion tracking, the event that my page has loaded and the user has actually landed on that page.

Is there a way around this? Can I somehow HIDE or stop the cart from showing that default page while it waits for mine to load?

The code below is what I wrote that is currently allowing my custom thank you page to load when the cart completes checkout.

<script type="text/javascript">

    document.addEventListener('snipcart.ready', function () {

        console.log('Snipcart was ready, so this console.log message displayed! (1)');'cart.confirmed', (cartConfirmResponse, customerOrderResponse) => {            
            console.log('Transaction completed so this console.log message displayed! (2)');
            var url = '/purchase/thank-you/order/' + cartConfirmResponse.token;
            window.location.href = url;

            console.log('Made it to the Thank You page so this console.log message displayed! (3)');

            //The users order info is passed to my controller so this info can be saved to my database.
            // I have tested removing this ajax code that saves to my database just to see if that
            // would make the default thank you page go away or not display as long but it did 
           // not have any effect so we can rule this out if being a possible reason.
                type: "Post",
                url: "/Purchase/SaveOrderDetailsToMyDatabase",
                dataType: 'json',               
                data: '{"Token":"' + cartConfirmResponse.token +
                    '", "InvoiceNumber":"' + cartConfirmResponse.invoiceNumber +
                    '", "email":"' + +                                                                        
                    '" }',

                contentType: 'application/json; charset=utf-8',
                success: function (result) {
                    console.log('Transaction db complete');



Hi @EdRod, thanks for reaching out!

While we do not support overriding this component, you could try hiding the Thank you notice with CSS, with comsething like:

.snipcart-order__details {
display: none:

It would then show a blank page while yours loads.

Would this help in your case?


@nelitow that is a a great idea, hiding the components on that page, thanks!
Would it be possible for me to also add some text on that page like… “Please Wait…Loading Confirmation Page you will be redirected soon…” How would I do that?

Hi @EdRod

You could for example replace the Billing details component with whatever needed for example.

So you would replace this component with your text.

And hide the other elements.

You can read more about customization here:


Thank you for these suggestions, I implemented them and quickly solved my issue by creating custom templates for these components and referencing them from an external file.
Thanks again!

1 Like