Customize order confirmation page

Site URL: http://www.annatenne.com

Hi everyone! 🙂
I'm relatively new to SS, and really been struggling to customize the order confirmation page (I sell digital products!)

I'd love to customise to better highlight the download link, as most people seem to miss it or don't know the link will expire in 24hrs.
I've customised the confirmation and product emails that get sent, but not everyone opens them, thinking they have more time to access their links (it seems to be expiring 24hrs from purchase, rather than 24hrs from accessing the link/email too).

I use Squarespace 7.1, have tried looking online but was only able to edit the confirmation page by adding additional text below the footer (to say the link will expire), but I'd love to know if it's possible/how to customize the default info (to better highlight the link - maybe make it blue and underlined?) and remove the footer that then appears in the middle due to the new text underneath, at least.
I also don't know how to view the order confirmation page, aside from actually placing an order, is there anywhere to find it on my site in order to view/customize? 

Can anyone please help? Thanks in advance! 
(I'm relatively new to SS, and don't have code knowledge, but I've done my best to try finding a solution before writing here.
THANK YOU SO MUCH!

Hi @Anna10e
Welcome to SQSP world!

Please make a duplicate from your website via account panel and add me as admin collaborator.

ixstudio[dot]net[at]gmail[dot]com

Please use the like button if it helps you!

Best,
Leopold

Can you place an order & share order confirmation page? We can check easier.

I also wrote this guide, maybe useful: Customize Order Confirmation Page

12 hours ago, tuanphan said:

Can you place an order & share order confirmation page? We can check easier.

I also wrote this guide, maybe useful: Customize Order Confirmation Page

Thanks so much @tuanphan!
Sorry, I had done that and attached a screenshot in the original post, it was just on my phone though, sorry if it wasn't enough or clear enough.
I've just done so again, on desktop, hopefully that's better, attached below - ideally I'd love to remove the footer and space that now appears in the middle (due to me adding text at the bottom), and make the download link stand out more (maybe blue with an underline?).
Honestly the whole page is pretty boring though haha, but those two practical elements would be amazing!

Oh yes!!!!!!!! I actually found your post already (I did my best to research before asking here)!!! Thank you so much! I did struggle with how to apply it though (both because I don't know coding that well) but mostly because I didn't know where to put it - the only section I could find was to add to the confirmation page footer (settings/advanced), as I've already attempted to do, whereas in the Design/custom CSS I didn't know how to just apply to that specific page! Sorry!

Thank you!

17 hours ago, IXStudio said:

Hi @Anna10e
Welcome to SQSP world!

Please make a duplicate from your website via account panel and add me as admin collaborator.

ixstudio[dot]net[at]gmail[dot]com

Please use the like button if it helps you!

Best,
Leopold

Thank you so much @IXStudio for the warm welcome!

Wow, and thank you so much for the offer! That's extremely generous of you (and can imagine how much easier that is than trying to explain it to me haha, although Id love to know how to do it)

I will be honest - part of me is skeptical about how safe that is, handing out access to a stranger, but maybe if @tuanphan can confirm it's not a terrible idea to do so, or how to do it securely, I can invite you 🙂 (my apologies for not being fully trusting, I'm sure you have the best intentions, but stranger danger, you know? haha).

If so, I'm now on the duplicated site, guessing I'm in the right spot, is Content Editor enough? 🙂
Thanks so much!

 

Can you share link to order confirmation page? We can check easier.

You're welcome. Yes in the duplicated website you can invite me as admin collaborator. (If you like!)

Please use the like button if it helps you!

Best,
Leopold

On 9/6/2020 at 8:39 AM, Anna10e said:

I'd love to know if it's possible/how to customize the default info (to better highlight the link - maybe make it blue and underlined?)

Hi Anna

You can style the confirmation page by adding some CSS styles to Design > Custom CSS.

Here's an example showing how you could change the size of the various elements and style the link to be blue and underlined. You can edit this to suite your needs. I've provided some screenshots showing how these styles will affect the content. When selecting the font-size, bear in mind that larger text will push the link further down on mobile devices, often pushing it out of sight.

I hope this helps. Let me know if you have any questions.

#confirmed-page {
  // Order Confirmed title
  h1 {
    font-size: 34px!important;
  }
  
  // Order details text
  p {
    font-size: 20px!important;
  }
  
  // Your purchase includes digital...
  h3 {
    font-size: 28px!important;
  }

  // Link to digital content
  a {
    font-size: 20px!important;
    color: blue!important;
    border-bottom: 1px solid blue!important;
  }
}

You are ALL amazing!! Thank you SO MUCH!!!

@paul2009, you are incredible! Done! I now have a blue underline! WOO!
I tried changing the text "Your purchase includes digital downloads. Get them here:" to something more urgent, because people seem to miss it, maybe something like "To access your purchase, please download the LOGIN, NOW. Thank you!" (in bold too!) Is that possible? I tried and epically failed on that front, where I put it didn't work haha!

Sorry, I totally misunderstood @tuanphan here's the link! 

https://www.annatenne.com/checkout/order-confirmed?oid=5f562b4fc647701a91f8d912&authCode=NWY1NjJiNGZjNjQ3NzAxYTkxZjhkOTEyOjIwMjAtMDktMDdUMTI6NDU6MDMuNjQ0Wk-hJ3TKw6G0nZljUNkDXsfwlKv7NoV-xqTFNTdIOJlB

Thanks so much @IXStudio! I'm halfway there now, I'll wait and see if it's an easy fix for the last change 🙂 Thanks so much though!

You're all awesome! Thank you so much for your time!

@paul2009 YOU ARE AMAZING!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! THANK YOU so much for taking the time!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

Thanks everyone else too!!!!!!! All sorted!

I saw this example and was wondering how to change the background color on the order confirmation page.  You've got details on the fonts, but not the background color.  The page currently has a black background and white text by default and I need to change it to the opposite -- white background with black text.  Thanks so much. @IXStudio @paul2009

Hi @Skor

Please share your website URL (URL of the page you want to edit).

Best,
Leopold

18 hours ago, Skor said:

I saw this example and was wondering how to change the background color on the order confirmation page.

No problem. Add this to the CSS I provided above:

body#order-confirmed {
  background: white;
}

Perfect, thanks so much @paul2009.  Of course the body text was still white, but that was easy enough to fix.  Much appreciated.

Just now, Skor said:

Of course the body text was still white

Sure, but the original post should take care of that 🙂

Hi @paul2009,

I was just reading how you helped out Anna Tenne trying to find an answer to my question, which is the following:

I'm looking for a way to change the text of the confirmation page. I would like to change the site title into a custom name. Could you please help me out with the right CSS? You can find a printscreen of the page below.

If possible I would also like to change the page title from 'Order confirmed' to 'Thank you for your order!'.

Thank you in advance!

Julie
 

On 11/24/2020 at 9:58 PM, julierom said:

Hi @paul2009,

I was just reading how you helped out Anna Tenne trying to find an answer to my question, which is the following:

I'm looking for a way to change the text of the confirmation page. I would like to change the site title into a custom name. Could you please help me out with the right CSS? You can find a printscreen of the page below.

If possible I would also like to change the page title from 'Order confirmed' to 'Thank you for your order!'.

Thank you in advance!

Julie
 

 

Have you found the code yet?

Hi @tuanphan,

Thanks for replying! 🙂

No, I didn't find the code yet. It would be great if you could help me out! 🙂

Thank you!

On 12/3/2020 at 5:31 PM, julierom said:

Hi @tuanphan,

Thanks for replying! 🙂

No, I didn't find the code yet. It would be great if you could help me out! 🙂

Thank you!

Can you place an order & share order confirmation page? We can check easier

Hi @tuanphan,

I placed an order, you can check the page here: https://www.julierommelaere.be/checkout/order-confirmed?oid=5fccf32af3111232d72ee1a9&authCode=NWZjY2YzMmFmMzExMTIzMmQ3MmVlMWE5OjIwMjAtMTItMDZUMTU6MDU6MTIuMTU2WuHO3-FY0EuChc7h0l9tF_0TQTb4cJgXOAokIebGok_m

Hi @Paul2009

Thanks for linking me in here, I've tried adding this to my CSS a few times but nothing seems to be updating - am I missing anything really obvious?

I've adjusted what my CSS message is saying but not messed with any of the other code, but the confirmation page isn't changing - it remains as it was originally. 

Any help would be greatfully appreciated from a code novice!

Thanks!

https://www.merrygoroundglasgow.co.uk/checkout/order-confirmed?oid=5fce0c9abfb4c51ffaedc9b9&authCode=NWZjZTBjOWFiZmI0YzUxZmZhZWRjOWI5OjIwMjAtMTItMDdUMTE6MDY6MDIuMTg3WmH4S1QnNjCFFMIBKBe5vJSwPeA6XJdwQhfg-7U37d_z

16 minutes ago, CHSgt said:

Thanks for linking me in here, I've tried adding this to my CSS a few times but nothing seems to be updating - am I missing anything really obvious?

I should have explained that the code was specific to the user who wanted to use it for a Digital Download confirmation page and had h3 header that they wanted to change. You need to use the same principle, but on your site there is only the h1 title and two lines of paragraph text like this:

To add some text below the second paragraph, you can add something like this to Custom CSS instead:

#confirmed-page {
  p:nth-of-type(2):after {
    content: "If you don't receive your order confirmation in the next hour, please check your spam folder.";
    display: block;
    margin-top: 20px;
    font-weight: bold;
  }
}

This add the additional content, like this:

   If a post helps you, please click a "Like" option below  ↘️

@paul2009I must be being really dumb - I'm adding it into the 

Settings-Advanced-CSS Injection  and then scrolling down to the order confirmation box and inputting there, but nothing is changing when I test the order....

What am I missing? Thanks so much for your help so far...it's very much appreciated!

5 minutes ago, CHSgt said:

I'm adding it into Settings-Advanced

No problem. Add to Design > Custom CSS (not code injection).