Changing empty shopping cart text

I have some code entered to change the empty message in the "shopping cart" which I have changed to shopping bag. It works fine if you click on the bag icon and there is nothing in it, simply states there is nothing in your shopping bag.

However, if I add something to the bag then remove it I get the standard nothing in your shopping cart message. I have pasted the code below that I'm using, is there something I need to add to get it to work if you delete something to then make it empty?

<script>
window.onload = function(){
  if (document.body.classList.contains('has-cart')) {
      var pageDescription = document.querySelector('.empty-message');
      pageDescription.innerText = "You have nothing in your shopping bag."
      pageDescription.style.opacity = 1;
    }
 };
</script>

You can try using CSS to change empty message. Can you share site url to check?

My site isn't live yet as I'm still working on it. I've attached two screenshots showing "you have nothing in your shopping bag" when you click on it whilst it's empty. The second shows the shopping bag after you've added something to it and removed it, you get "you have nothing in your shopping cart. Continue shopping". I assumed the code above had enabled me to change it as I wanted but obviously it doesn't appear to work once you remove something from the bag.

I've just found an answer that works, searching around I think you provided the solution on another post. For anyone that needs to know the below CSS works for me. Just change "New Text Cart" to what you want and adjust the font size accordingly.

.empty-message {
    visibility: hidden;
}
.empty-message:before {
    visibility: visible;
    content: "New Text Cart";
    font-size: 20px;
}