Jump to content

Change Empty Shopping Cart Text

Go to solution Solved by tuanphan,

Recommended Posts

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

MB DESIGNS SCREENSHOT.JPG

Link to comment
  • Solution

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;
}

image.thumb.png.4a2b60a958e8fb239410eb18852d53a7.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 1 month later...
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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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
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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 7 months later...
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;
}

image.thumb.png.4a2b60a958e8fb239410eb18852d53a7.png

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
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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
5 hours ago, codefordummies said:

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

@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.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
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
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...

201490301_ScreenShot2020-10-26at1_08_40PM.png.4bfab8928218d6c5807d7c41752b7040.png

Let us know how it goes.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
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...

201490301_ScreenShot2020-10-26at1_08_40PM.png.4bfab8928218d6c5807d7c41752b7040.png

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
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 by creedon

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
  • 6 months later...
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
  • 4 months later...
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  ⬇️

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.