hollyfeld Posted August 18, 2023 Share Posted August 18, 2023 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? Link to comment
Solution paul2009 Posted August 19, 2023 Solution Share Posted August 19, 2023 (edited) On 8/19/2023 at 12:02 AM, hollyfeld said: the confirmation page is confusing because of the orange tag that says "Pending Fulfillment" Anyone have code or ideas on how to hide this You could hide it with some styling like this. Add it to the Code Injection panel for the Order Status Page (in Website > Pages > Website Tools > Code Injection😞 <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 ⬇️ Edited April 20 by paul2009 TechyBecky_101 1 Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥. Work: Founder of SF.DIGITAL. We provide high quality original extensions to supercharge your Squarespace website. Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links. Forum advice is completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional. Link to comment
hollyfeld Posted August 20, 2023 Author Share Posted August 20, 2023 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! Link to comment
Khechog Posted April 19 Share Posted April 19 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 Link to comment
paul2009 Posted April 20 Share Posted April 20 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 ⬇️ Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥. Work: Founder of SF.DIGITAL. We provide high quality original extensions to supercharge your Squarespace website. Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links. Forum advice is completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional. Link to comment
Khechog Posted April 21 Share Posted April 21 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 Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment