My "order confirmation" page doesn't actually state that an order has been placed

I started a website for my business and placed a test order. After placing the order, a page popped up with "pending fulfillment" highlighted in orange at the top of the page.

I verified that the sale went through and I received the funds. However, I know this is going to be confusing for customers.

After placing an order, I would like for my customers to see a very standard "order confirmed" page with the standard info you'd see when shopping online. I'm seeing tons of options for editing the cart/checkout process but nothing related to the "order confirmation" page.

Here's a screenshot of what I'm dealing with. Thank you

On 2/23/2023 at 4:16 PM, Levi_Tremblay said:

After placing the order, a page popped up with "pending fulfillment" highlighted in orange at the top of the page...I would like for my customers to see a very standard "order confirmed" page with the standard info you'd see when shopping online.

@Levi_Tremblay I agree with you - a bold "Order confirmed" message is needed. However, the Order Status page is brand new (February 2023) so now is a great time to pass this feedback to Squarespace Customer Care using a support ticket.

If it helps, I've written a post about customising the Order Status page and I've included some temporary code to workaround the current limitations of the page. You'll find my guide here: Customising the Squarespace order confirmation page. Hopefully it won't be long until Squarespace make their own improvements to this new feature.

Here are some status page examples where the code has been added:

Did this help? Please give feedback by clicking an icon below  ⬇️

Hi, we sell meditation classes & courses and do not send out products.  We've had customers emailing us to ask if their bookings are confirmed or not - their feed back is that the highlighted 'Pending fulfilment' is confusing...  we were wondering if it's possible to remove the words 'Pending fulfilment' from the Order confirmation / Status page? 

Just going in and changing each booking individually isn't really an option for us because our charity is run by volunteers and it would be difficult to spend time on that.  Even if we did there would still be a time-lapse with the initial Order Status still displaying the confusing 'pending fulfilment.' 

Thank you

Mandy

www.meditateinthewestmidlands.co.uk

31 minutes ago, Khechog said:

feed back is that the highlighted 'Pending fulfilment' is confusing...  we were wondering if it's possible to remove the words 'Pending fulfilment' from the Order confirmation / Status page?

I provided a way to hide the 'Pending fulfilment' badge in this earlier post. Let me know if that works for you.

Did this help? Please give feedback by clicking an icon below  ⬇️

Thank you.  Would I put this code into the CSS in Website tools or in the code on the Status page itself?  I haven't been able to find the Status page 🙃 

14 minutes ago, Khechog said:

Would I put this code into the CSS in Website tools or in the code on the Status page itself?

Put it into Code Injection > ORDER STATUS PAGE.

Hi Paul,

I've looked at your code for adding an 'Order Confirmed' title to the Order Summary page. 

https://sf.digital/squarespace-solutions/customising-the-squarespace-order-confirmation-page

This would be good to use because we're still getting people emailing us to query the 'pending fulfilment' badge.  We offer meditation classes & courses that people attend in-person so people can book their place through our Squarespace website  & no shipping is required.  Please could you let me know how we could remove 'when shipping information is available'  Thank you. Mandy Nicol

Hello Paul, this a great solution, thank you for this. 

I have small problem on my order status and order confirmation pages where a sitewide top business bar i added to show the contact details is not displaying properly, and it pushes down the page content so the page appears as blank if not scrolled down. 

My site is https://www.loiremontgolfieres.fr

The link to the order confirmation page - https://www.loiremontgolfieres.fr/commerce/orders/d45e2ca8-88c1-486c-b011-eaaba609f6c0

I added the business bar using this tutorial -https://www.youtube.com/watch?v=sE0Ft39MtCA

It works fine on every page except the order confirmation/status pages. 

Could you kindly let me know how I can hide this bar on the order pages. Thank you so much!

18 minutes ago, loiremontgolfieres said:

I have small problem on my order status and order confirmation pages where a sitewide top business bar i added to show the contact details is not displaying properly, and it pushes down the page content so the page appears as blank if not scrolled down. 

@loiremontgolfieres This is because the CSS that you've added to the Custom CSS panel, to style the business bar, won't be loaded with the Order Confirmation page. This leaves the business bar unstyled.

You should be able to resolve this by manually adding the relevant CSS (placed within style tags) into the Order Confirmation Code Injection panel. For example:

<style>
.business-bar-wrapper {
    background-color: #4e559b;
    padding: 10px 4vw
}
.business-bar {
    align-items: center;
    color: #fff;
    display: flex;
    justify-content: flex-end;
    margin: 0 auto;
    max-width: 1440px;
    font-weight: bold
}
.business-bar a {
    color: #fff;
    text-decoration: none;
    font-family: 'Clarkson';
    font-size: .87em;
}
.business-bar img {
    margin-right: 8px;
    max-width: 20px;
    vertical-align: middle
}
.business-bar--left,.business-bar--right {
    width: 20%
}
.business-bar--right {
    text-align: right
}
.business-bar--left p {
    margin: 0
}
</style>

When the CSS is included, it should style the bar correctly, like this:

Did this help? Please give feedback by clicking an icon below  ⬇️

Hello Paul, 

Sorry for the late response. I just saw your message, and I tried the code and it works. Thank you so much for your assistance.