Squarespace: Order Confirmation Page

Change “Order Confirmed” text

div#confirmed-page h1 {
    visibility: hidden;
}
div#confirmed-page h1:before {
    visibility: visible;
    content: "You’re registered for reimagining justice";
}

Hide Order Info

div#confirmed-page p {
    display: none;
}

Order Confirmation Page Background

body#order-confirmed, body#order-confirmed .Main {
    background: green !important;
}

Change Font Style

To change font style (color, font name, text size,…) you can add this to Home > Design > Custom CSS

/* order title */
#confirmed-page h1 {
    color: red;
    text-transform: uppercase;
    font-size: 20px;
    font-family: monospace;
    letter-spacing: 2px;
    font-weight: 600;
}
/* order message */
#confirmed-page p {
    color: gray;
    font-family: fantasy;
    font-weight: 300;
    font-size: 18px;
}

Add Text + Links

Add this code to Home > Settings > Advanced > Code Injection > Header

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
$(document).ready(function() { 
    $('div#confirmed-page').append('<p class="t-order">Back to <a href="/shop">Shop<a></p>');
  });
</script>
<style>
.t-order a {
    text-decoration: underline;
    color: green;
}
</style>

Order Confirmation Page Background Image

Add to Home > Design > Custom CSS

body#order-confirmed {
    background-image: url(https://beaverhero.com/wp-content/uploads/2020/06/twitter-292994_640.jpg) !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
}

Remove Header/Footer

body#order-confirmed {
header.Header.Header--top {
    display: none !important;
}
footer.Footer {
    display: none !important;
}
}

Remove Price

/* remove price in order confirmation page */
div#confirmed-page p:nth-child(3) strong:first-child {
    display: none;
}

Notes: Each template will have a different class name for header/footer. If the code doesn’t work, please share link to your site. I can send new code.

4 thoughts on “Squarespace: Order Confirmation Page”

  1. Would like to integrate with http://www.offset.earth Impact API where we could POST a number of trees to be planted from the order confirmation code injection.

    Would also like to show the customer how many trees they planted in the order confirmation. I guess I could use thee variables provided in the Order Confirmation code injection bit.

    Thank you for your help. Happy to donate some money if we can get this sorted. 🙂

    Reply
    • Hi. I’m not familiar with Ecommerce features. You can post on some FB Groups: Squarespace Customization Resource Group, Squarespace Community, Squarespace Entrepreneurs

      Reply
  2. Hi Tuan, I have following you a lot and you’ve been the most informative of squarespace. I am on dead end so I figured I’d message you if you can help.

    I am trying to track my websites purchase events for facebook pixel tracking, facebook has been monitizing from me by getting Purchases report without actual conversion.
    The url I’m Tracking is my website confirmation page , I tried to order on my site so I can get the URL. attached to the events tracking but it is invalid. please look at the URL below, if this is facebook’s problem let me know, i keep thinking maybe my confirmation page needs coding.

    I tried 3 URL below

    https://westreverie.com/checkout/order-confirmed?oid=6102242d08b5ac5ffa5fb69f&authCode=NjEwMjI0MmQwOGI1YWM1ZmZhNWZiNjlmOjIwMjEtMDctMjlUMDM6NDQ6MzkuNTkwWvUiPA6w38YV6EgjG341Cpf09wFGlzN-V-44a9BxYRQw

    https://westreverie.com/checkout/order-confirmed?

    https://westreverie.com/checkout/order-confirmed

    Reply
    • Hi,
      Is there any other way, other than needing a link? eg. inserting code into Order confirmation page?
      if no way, I can’t help with this.
      I haven’t worked with FB tracking code, so can’t offer any advice.
      You can post on some FB groups
      + Squarespace Customization Resource Groups
      + Squarespace Community

      Reply

Leave a Comment