Force mobile header to display "cart" beside quantity item

Hello,

My client asked me to change the shopping cart icon to text "cart" in the header earlier but we have since noticed that the mobile version does not display "Cart" - it just shows the cart item quantity, which doesn't look very nice... Does anybody have a workaround for this? Many thanks.

On 9/13/2022 at 1:53 AM, elizabethgaffney said:

Hello,

My client asked me to change the shopping cart icon to text "cart" in the header earlier but we have since noticed that the mobile version does not display "Cart" - it just shows the cart item quantity, which doesn't look very nice... Does anybody have a workaround for this? Many thanks.

Can you share your site with the protected password so I can take a look?

1 hour ago, bangank36 said:

Can you share your site with the protected password so I can take a look?

Hello Bangank!

Thanks for you message. The site is live and may be viewed here.

Best wishes,

Elizabeth

On 9/16/2022 at 6:43 PM, elizabethgaffney said:

Hello Bangank!

Thanks for you message. The site is live and may be viewed here.

Best wishes,

Elizabeth

Add this to Design > Custom CSS

.showOnMobile .mobile-cart-parenthesis:first-child:before {
    content: "Cart";
}

5 hours ago, tuanphan said:

Add this to Design > Custom CSS

.showOnMobile .mobile-cart-parenthesis:first-child:before {
    content: "Cart";
}

 

Thank you SO much Tuanphan! 🙏 This has worked perfectly! ✨

On 9/12/2022 at 7:53 PM, elizabethgaffney said:

My client asked me to change the shopping cart icon to text "cart" in the header earlier but we have since noticed that the mobile version does not display "Cart" - it just shows the cart item quantity, which doesn't look very nice...

I agree. It doesn't look very nice but this is how the team designed it, to prevent the cart text from overlapping other header elements like the site title/logo.