Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Change Empty Shopping Cart Text


Go to solution Solved by tuanphan,

Question

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 post
  • Answers 18
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

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

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

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 {

Posted Images

18 answers to this question

Recommended Posts

  • 0

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

image.thumb.png.4a2b60a958e8fb239410eb18852d53a7.png

 

Link to post
  • 0
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;
}

 

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- Pour your heart into it

Link to post
  • 0
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 post
  • 0
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;
}

 

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- Pour your heart into it

Link to post
  • 0
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 post
  • 0

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

Hello I'm Thomas. I've been getting websites up and running for 26 years. I want to help you at whatever level meets your needs, from as little (if you're a DIYer) to as much as you need.

Link to post
  • 0
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 post
  • 0
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.

Hello I'm Thomas. I've been getting websites up and running for 26 years. I want to help you at whatever level meets your needs, from as little (if you're a DIYer) to as much as you need.

Link to post
  • 0
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 post
  • 0
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

Hello I'm Thomas. I've been getting websites up and running for 26 years. I want to help you at whatever level meets your needs, from as little (if you're a DIYer) to as much as you need.

Link to post
  • 0
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 post

Create an account or sign in to comment

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


×
×
  • Create New...