Hi @nianfireworks,
Sorry for such a late reply.
As you can enter HTML directly into “Content” option (i.e. directly in “WooCommerce > Settings > Amount Left for Free Shipping > Cart > Content”), you can use style attribute, e.g.:
<div style="color: white; background-color: red; padding: 10px; display: block; margin-bottom: 5px; text-align: center; font-weight: bold;">%amount_left_for_free_shipping% left for free shipping</div>
Or more correct way – use class attribute, e.g.:
<div class="amount-left-for-free-shipping">%amount_left_for_free_shipping% left for free shipping</div>
and then add custom CSS for that class (in “Customize > Additional CSS”), e.g.:
.amount-left-for-free-shipping {
color: white;
background-color: red;
padding: 10px;
display: block;
margin-bottom: 5px;
text-align: center;
font-weight: bold;
}
The exact CSS would depend on your requirements and your theme.
Hope that helps, please let me know if you have any questions. And again sorry for the late reply.
I’m going to close the ticket.
If you notice anything else let me know 😉