lauraswansieckman Posted January 25, 2020 Share Posted January 25, 2020 How do I change the shopping cart text on the empty shopping cart page? I added a custom font to the site for header 2 uses elsewhere, but apparently this capitalized and changed the "Shopping Cart" title also. I cannot figure out how to alter it in site styles. I don't need to change the font, I just would like it to be capitalized normally and not all caps. https://www.mbdesignsapparel.com/cart Link to comment
Solution tuanphan Posted January 26, 2020 Solution Share Posted January 26, 2020 add this code to Home > Design > Custom CSS body#cart h2.cart-title { visibility: hidden; } body#cart h2.cart-title:before { content: "Shopping Cart"; visibility: visible; text-transform: capitalize; } lauraswansieckman 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
lauraswansieckman Posted January 26, 2020 Author Share Posted January 26, 2020 This worked PERFECTLY! Thank you so much - you saved me so much time! 5 hours ago, tuanphan said: add this code to Home > Design > Custom CSS body#cart h2.cart-title { visibility: hidden; } body#cart h2.cart-title:before { content: "Shopping Cart"; visibility: visible; text-transform: capitalize; } Link to comment
suzannaknit Posted March 2, 2020 Share Posted March 2, 2020 Hi! I have a similar problem except my shopping cart text is really spaced out and I want it closer together... do I have to do a custom CSS for this too!? Thanks! https://www.suzannajamesknitwear.com/cart Link to comment
tuanphan Posted March 3, 2020 Share Posted March 3, 2020 20 hours ago, suzannaknit said: Hi! I have a similar problem except my shopping cart text is really spaced out and I want it closer together... do I have to do a custom CSS for this too!? Thanks! https://www.suzannajamesknitwear.com/cart Add to Home > Design > Custom CSS .cart-title { letter-spacing: normal; } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
suzannaknit Posted March 3, 2020 Share Posted March 3, 2020 1 hour ago, tuanphan said: Add to Home > Design > Custom CSS .cart-title { letter-spacing: normal; } Thank you so much for your help!! How would I also make the text lower case? And does this mean there is no way of editing this text within the styles section, but only with custom CSS? Thanks so much! Link to comment
tuanphan Posted March 4, 2020 Share Posted March 4, 2020 22 hours ago, suzannaknit said: Thank you so much for your help!! How would I also make the text lower case? And does this mean there is no way of editing this text within the styles section, but only with custom CSS? Thanks so much! .cart-title { text-transform: lowercase; } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
codefordummies Posted October 25, 2020 Share Posted October 25, 2020 On 1/26/2020 at 7:50 AM, tuanphan said: add this code to Home > Design > Custom CSS body#cart h2.cart-title { visibility: hidden; } body#cart h2.cart-title:before { content: "Shopping Cart"; visibility: visible; text-transform: capitalize; } Hi @tuanphan, I am looking to change the font in the shopping cart text "your shopping cart is empty". Any idea on how I can achieve this? Thanks. Link to comment
tuanphan Posted October 25, 2020 Share Posted October 25, 2020 11 hours ago, codefordummies said: Hi @tuanphan, I am looking to change the font in the shopping cart text "your shopping cart is empty". Any idea on how I can achieve this? Thanks. Can you share link to cart page? We can check easier Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
codefordummies Posted October 25, 2020 Share Posted October 25, 2020 1 hour ago, tuanphan said: Can you share link to cart page? We can check easier Here it is @tuanphan https://www.terroir-imports.com/cart Thanks! Link to comment
tuanphan Posted October 25, 2020 Share Posted October 25, 2020 5 hours ago, codefordummies said: Here it is @tuanphan https://www.terroir-imports.com/cart Thanks! Add to Home > Design > Custom CSS .empty-message:before { font-family: monospace; color: red; } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
creedon Posted October 25, 2020 Share Posted October 25, 2020 @codefordummies I'd like to suggest a small change to your CSS in Custom Design. Remove or comment out the following. .empty-message { visibility: hidden } .empty-message:before { visibility: visible; content: "Your shopping cart is empty/Votre panier est vide."; font-size: 20px } Add the following. .empty-message:before { content: "Your shopping cart is empty/Votre panier est vide. "; font-size: 20px; } .empty-message>span { display: none; } This will keep the width of the original text from interfering with spacing. Plus you get the Continue shopping back. tuanphan 1 Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
codefordummies Posted October 26, 2020 Share Posted October 26, 2020 1 hour ago, creedon said: .empty-message:before { content: "Your shopping cart is empty/Votre panier est vide. "; font-size: 20px; } .empty-message>span { display: none; } Hi @creedon, This works thanks! Is there any way of doing the following: "Your shopping cart is empty. Continue shopping | Votre panier est vide. Continuez à magasiner" I would like to keep the link for the "Continue shopping" but also to have it in the "Continuez à magasiner" and to underline both of these as to make it evident that it is a link. Thank you! Link to comment
creedon Posted October 26, 2020 Share Posted October 26, 2020 19 hours ago, codefordummies said: Is there any way of doing the following Remove or comment out the previous CSS related to changing the empty cart message. Add the following to Design > Custom CSS. /* english/french empty cart message */ #cart .empty-message { display: inline-block; } #cart .empty-message [data-test="continue-shopping-link"]:after { content: '\00A0'; } #cart .empty-message:last-child:before { content: '| '; } Add the following to Settings > Advanced > Code Injection > HEADER. <script src="//ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> Add the following to Settings > Advanced > Code Injection > FOOTER. <script> $( ( ) => { /* english/french empty cart message */ let $e = $( '#cart' ); if ( ! $e.length ) return; $e = $( '#cart .empty-message' ); let $c = $e.clone ( ) .find ( 'span:first' ) .html ( 'Votre panier est vide.' ) .end ( ) .find ( 'a' ) .attr ( 'href', 'https://www.terroir-imports.com/produits' ) .find ( 'span' ) .html ( 'Continuez à magasiner' ) .end ( ) .end ( ); $e.after ( $c ); } ); </script> Looks like... Let us know how it goes. codefordummies 1 Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
codefordummies Posted October 26, 2020 Share Posted October 26, 2020 1 hour ago, creedon said: Remove or comment out the previous CSS related to changing the empty cart message. Add the following to Design > Custom CSS. /* english/french empty cart message */ #cart .empty-message { display: inline-block; } #cart .empty-message [data-test="continue-shopping-link"]:after { content: '\00A0'; } #cart .empty-message:last-child:before { content: '| '; } Add the following to Settings > Advanced > Code Injection > HEADER. <script src="//ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> Add the following to Settings > Advanced > Code Injection > FOOTER. <script> $( ( ) => { /* english/french empty cart message */ let $e = $( '#cart' ); if ( ! $e.length ) return; $e = $( '#cart .empty-message' ); let $c = $e.clone ( ) .find ( 'span:first' ) .html ( 'Votre panier est vide.' ) .end ( ) .find ( 'a' ) .attr ( 'href', 'https://www.terroir-imports.com/produits' ) .find ( 'span' ) .html ( 'Continuez à magasiner' ) .end ( ) .end ( ); $e.after ( $c ); } ); </script> Looks like... Let us know how it goes. This works perfectly @creedon! Any chance I could underline the "Continue Shopping"/"Continuez à magasiner" part? Thank you!! 🙂 Link to comment
creedon Posted October 27, 2020 Share Posted October 27, 2020 (edited) On 10/26/2020 at 2:18 PM, codefordummies said: Any chance I could underline the "Continue Shopping"/"Continuez à magasiner" part? Add the following Design > Custom CSS. #cart [data-test="continue-shopping-link"] span { text-decoration: underline; } Let us know how it goes. Edited October 28, 2020 by creedon Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
codefordummies Posted October 27, 2020 Share Posted October 27, 2020 14 hours ago, creedon said: Add the following Design > Custom CSS. #cart [ data-test="continue-shopping-link" ] span { text-decoration: underline; } Let us know how it goes. Hey @creedon When I add this to the CSS the french version of my text message in French disappears. Any idea what could be causing this? Thanks, Michelle Link to comment
creedon Posted October 28, 2020 Share Posted October 28, 2020 I updated the CSS in my previous post. Give it a go and let us know how it goes. codefordummies 1 Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
codefordummies Posted October 28, 2020 Share Posted October 28, 2020 16 hours ago, creedon said: I updated the CSS in my previous post. Give it a go and let us know how it goes. This helped! Thank you @creedon! Link to comment
Funjob Posted May 21, 2021 Share Posted May 21, 2021 On 10/27/2020 at 4:58 AM, creedon said: Add the following Design > Custom CSS. #cart [data-test="continue-shopping-link"] span { text-decoration: underline; } Let us know how it goes. How would I change the text of the "continue shopping" link so it says something like "take me back to the homepage"? Link to comment
creedon Posted May 21, 2021 Share Posted May 21, 2021 (edited) @Funjob Please see Change Cart Continue Shopping Text. Let us know how it goes. Edited December 10, 2021 by creedon Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
Funjob Posted May 22, 2021 Share Posted May 22, 2021 You're the man, Creedon! Thanks for that! creedon 1 Link to comment
atfirstblink Posted September 24, 2021 Share Posted September 24, 2021 @creedon is there a way to change the shopping cart text from: YOU HAVE NOTHING IN YOUR SHOPPING CART. CONTINUE SHOPPING” to: “YOUR SHOPPING CART IS CURRENTLY EMPTY” Link to comment
paul2009 Posted September 24, 2021 Share Posted September 24, 2021 2 hours ago, atfirstblink said: Is there a way to change the [empty message on the] shopping cart? Add the following Custom CSS: .empty-message { visibility: hidden; } .empty-message:before { visibility: visible; content: "Your custom empty cart message"; } Note that you'll need to save the CSS and then refresh the page to see the changes. If this post has helped you, please click an icon below ⬇️ creedon and atfirstblink 2 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. Would you like your customers to be able to mark their favourite products in your Squarespace store? Link to comment
atfirstblink Posted September 25, 2021 Share Posted September 25, 2021 @paul2009 Thanks a ton! This really helped! paul2009 1 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