How can I underline 'terms and conditions' text on the cart page?

[FSR_ryan]

I'm wanting to underline or change the color of "terms and conditions" on the cart page/flyout cart. The base code I have for this is - 

{% if settings.cart_terms_conditions_enable %}
<div class="cart__item-row cart__terms">
<input type="checkbox" id="CartTerms" class="cart__terms-checkbox">
<label for="CartTerms">
{% if settings.cart_terms_conditions_page != blank %}
{{ 'cart.general.terms_html' | t: url: settings.cart_terms_conditions_page.url }}
{% else %}
{{ 'cart.general.terms' | t }}
{% endif %}
</label>
</div>
{% endif %}

See screenshots below showing the native checkbox to enable this in our cart and the "terms and conditions" I'm trying to underline (this would just be for the words "terms and conditions").

Thank you in advance! 

i

[PaulMartin]

Hi FSR_ryan,

You'll have to add CSS code for this to work. Alongside that is to add an identifier for your label tag, see the id="CartTerms-label" in the label tag.

{% if settings.cart_terms_conditions_enable %}
<div class="cart__item-row cart__terms">
<input type="checkbox" id="CartTerms" class="cart__terms-checkbox">
<label id="CartTerms-label" for="CartTerms">
{% if settings.cart_terms_conditions_page != blank %}
{{ 'cart.general.terms_html' | t: url: settings.cart_terms_conditions_page.url }}
{% else %}
{{ 'cart.general.terms' | t }}
{% endif %}
</label>
</div>
{% endif %}

 Then you can add this CSS either after that code or inside your global css file inside the Assets folder.

#CartTerms-label {
  text-decoration: underline;
}

[FSR_ryan]

Hi PaulMartin,

Thanks so much for you help on this. Two questions - 1. Can I only underline the 3 words "terms and conditions" and 2. Is there a way to make this also work in the flyout cart instead of only on the cart page itself?

[PaulMartin · Accepted solution]

Yes and yes.

1. You'll have to contain the words inside a span and add the CSS to that span. It's also my first seeing this object "cart.general.terms_html", so I don't know how I can instruct you to contain the 3words in a span. I might have to poke into it myself or do something here on my end to replicate it and give you steps.
2. Yes, you can change the id into a class that can be used anywhere.