Change color of full payment and deposit payment sentences - Woocommerce product page
Hope you can give me a hand with this. I'm running my site with Woocommerce and YITH WooCommerce Deposits and Down Payments plugin. In the product page we can see two lines, one with the full payment and one with the deposit payment...
I need the first one in green (full payment). But when i change the color of this line using the "label" css style, both lines change to green.
Any idea how to achieve that? Thank you so much (again).
The code I was using that change both lines into green
label {
display: block;
font-size: 14px;
color: #ff6600;
font-weight: 400;
margin-bottom: 5px;
vertical-align: middle;
}
The code from Woocommerce Product Page
<div id="yith-wcdp-add-deposit-to-cart" class="yith-wcdp">
<div class="yith-wcdp-single-add-to-cart-fields" data-deposit-type="rate" data-deposit-amount="5" data-deposit-rate="30" data-price-template="<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>0</span>" >
<label>
<input type="radio" name="payment_type" value="full" checked='checked' /> Pay full price (7% discount) <span class="full-price">( <span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>79.990</span> )</span>
</label><br>
<label>
<input type="radio" name="payment_type" value="deposit" /> Pay Deposit <span class="deposit-price">( <span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>23.997</span> )</span>
</label><br>
</div>
Plugin code:
<div id="yith-wcdp-add-deposit-to-cart" class="yith-wcdp">
<?php do_action('yith_wcdp_before_add_deposit_to_cart', $product, isset( $variation ) ? $variation : false )?>
<div class="yith-wcdp-single-add-to-cart-fields" data-deposit-type="<?php echo isset( $deposit_type ) ? esc_attr( $deposit_type ) : '' ?>" data-deposit-amount="<?php echo isset( $deposit_amount ) ? esc_attr( $deposit_amount ) : '' ?>" data-deposit-rate="<?php echo isset( $deposit_rate ) ? esc_attr( $deposit_rate ) : '' ?>" data-price-template="<?php echo esc_attr( wc_price( 0, array( 'decimals' => 0 ) ) ) ?>" >
<?php if( ! $deposit_forced ): ?>
<label>
<input type="radio" name="payment_type" value="full" <?php checked( ! $default_deposit ) ?> /> <?php echo apply_filters( 'yith_wcdp_pay_full_amount_label', __( 'Pay full amount', 'yith-woocommerce-deposits-and-down-payments' ) ) ?>
<span class="full-price">( <?php echo isset( $variation ) ? $variation->get_price_html() : $product->get_price_html() ?> )</span>
</label><br>
<label>
<input type="radio" name="payment_type" value="deposit" <?php checked( $default_deposit ) ?> /> <?php echo apply_filters( 'yith_wcdp_pay_deposit_label', __( 'Pay deposit', 'yith-woocommerce-deposits-and-down-payments' ) ) ?>
<span class="deposit-price">( <?php echo wc_price( $deposit_value ) ?> )</span>
</label><br>
<?php else: ?>
<?php echo wp_kses_post( apply_filters( 'yith_wcdp_deposit_only_message', sprintf( __( 'This action will let you pay a deposit of <span class="deposit-price">%s</span> for this product', 'yith-woocommerce-deposits-and-down-payments' ), wc_price( $deposit_value ) ), $deposit_value ) ) ?>
<?php endif; ?>
</div>
You need to find a unique selector for that input, using the selector label is too general, it will not only apply itself to these two elements you have listed, but also any other label on the page. The challenge is to find the perfect 'uniqueness', so that the styles apply to just the labels you want.
I imagine that you only want these styles to apply to these deposit/full price purchase options. In addition, from the fact that there is an id for the block (#yith-wcdp-add-deposit-to-cart), that you will only be displaying purchase for a single item at a time.
I have adapted your stylesheet below so that all the styles you have created for the label are applied to both the deposit and the full-price option labels - with the exception of color. You can then use :first-of-type to select the full price option and :nth-of-type(2) to select the second deposit option, setting their color or other styles as you wish.
N.B. you could use :nth-of-type(1) to select the full price label if you wished.
:nth-of-type(n)is a pseudoclass for CSS styling, it will select the nth occurrence of that element and apply the styles. For instance:nth-o-type(5)will apply to the fifth occurrence only. You can also replace 'n' more complicated algebraic formula, 'odd' or 'even' so that the style will apply to multiple elments that match the given pattern.
#yith-wcdp-add-deposit-to-cart label {
display: block;
font-size: 14px;
font-weight: 400;
margin-bottom: 5px;
vertical-align: middle;
}
#yith-wcdp-add-deposit-to-cart label:first-of-type {
color: #ff6600;
}
#yith-wcdp-add-deposit-to-cart label:nth-of-type(2) {
color: #0066ff;
}<div id="yith-wcdp-add-deposit-to-cart" class="yith-wcdp">
<div class="yith-wcdp-single-add-to-cart-fields" data-deposit-type="rate" data-deposit-amount="5" data-deposit-rate="30" data-price-template="<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>0</span>" >
<label>
<input type="radio" name="payment_type" value="full" checked='checked' /> Pay full price (7% discount) <span class="full-price">( <span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>79.990</span> )</span>
</label><br>
<label>
<input type="radio" name="payment_type" value="deposit" /> Pay Deposit <span class="deposit-price">( <span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>23.997</span> )</span>
</label><br>
</div>