Anyone have code to hide the "Pending Fulfillment" tag on the Order Status/Confirmation page?

I have a site that is only service products being used as membership dues so nothing will ever be "fulfilled" to the customer. Right now the confirmation page is confusing because of the orange tag that says "Pending Fulfillment" Anyone have code or ideas on how to hide this on the customer facing page? 

On 8/19/2023 at 6:15 AM, paul2009 said:

You could hide it with CSS like this:

<style>
  #order-status-page-root .css-1uny5ea {
    display: none!important;
}
</style>

But there's a problem. It will stop working the next time that Squarespace make any code changes to the order status page. This is because Squarespace didn't include semantic, human-readable class names when they designed the order status page. (Don't ask me why - I'd like to know!) So, instead of this label having a persistent class like .badge-fulfillment-status it only has the auto-generated class .css-1uny5ea which will change every time they update the page! 🤷‍♂️

A better solution would be to write some Javascript to look for the label text and either remove it or modify it to fit your needs. I'll look at adding this to my guide. 

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

Got it! Thanks for your help! 

Hello, We have the continuing problem of customers getting confused with the 'Pending fulfilment' badge on the order confirmation when they book their meditation classes & courses

I've tried using the code above to hide the badge but it keeps 'greying' out when I put it into css so I don't think it's working - please can you offer any other solutions?

Thank you

Mandy, Jangchub Ling Centre

On 4/19/2024 at 2:53 PM, Khechog said:

I've tried using the code above to hide the badge but it keeps 'greying' out when I put it into css

The workaround I provided above must be added to the Code Injection panel for the Order Status Page (in Website > Pages > Website Tools > Code Injection). It won't work if added to the Custom CSS panel 🙂.

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

Hi Paul and thank you.

I've put the code in the Code Injection panel but it hasn't removed the 'Pending fulfilment' badge... I've attached a couple of screenshots to show - is there another option that might work?

Mandy