Change Empty Shopping Cart Text

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

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

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

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

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! 

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

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.

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

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!

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

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

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!

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.

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

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.

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

I updated the CSS in my previous post. Give it a go and let us know how it goes.

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!

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

@Funjob

Please see Change Cart Continue Shopping Text.

Let us know how it goes.

You're the man, Creedon!

Thanks for that!

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

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

@paul2009 Thanks a ton! This really helped!