更改全额付款和定金付款语句的颜色 - Woocommerce 产品页面

Question

希望你能帮我解决这个问题。我是运行我的网站，带有 Woocommerce 和 YITH WooCommerce 存款和预付款 插件。在产品页面我们可以看到两行，一行是全款，一行是定金...

我需要第一个绿色的（全额付款）。但是当我使用 "label" css 样式更改这条线的颜色时，两条线都变为绿色。

知道如何实现吗？非常感谢（再次）。

我使用的代码将两行都变成了绿色

    label {
display: block;
font-size: 14px;
color: #ff6600;
font-weight: 400;
margin-bottom: 5px;
vertical-align: middle;

}

来自 Woocommerce 产品页面的代码

<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="&lt;span class=&quot;woocommerce-Price-amount amount&quot;&gt;&lt;span class=&quot;woocommerce-Price-currencySymbol&quot;&gt;&#036;&lt;/span&gt;0&lt;/span&gt;" >
                <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">&#36;</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">&#36;</span>23.997</span> )</span>
        </label><br>

        </div>

插件代码：

<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>

Answer 1

您可以尝试从 span 标签中取 class 作为选择器：

.full-price {
  display: block;
  font-size: 14px;
  color: #ff6600;
  font-weight: 400;
  margin-bottom: 5px;
  vertical-align: middle;
}

希望我帮到了你 ;)

Answer 2

你需要为那个输入找到唯一的selector，使用selectorlabel太笼统了，它不会只适用于你拥有的这两个元素已列出，还有页面上的任何其他标签。挑战在于找到完美的 'uniqueness'，以便样式仅适用于您想要的标签。

我想您只希望这些样式适用于这些 deposit/full 价格购买选项。此外，由于块 (#yith-wcdp-add-deposit-to-cart) 有一个 id，您一次只会显示单个项目的购买。

我已经在下面调整了您的样式表，以便您为 label 创建的所有样式都应用于存款和全价选项标签 - color 除外。然后，您可以使用 :first-of-type 到 select 全价选项和 :nth-of-type(2) 到 select 第二存款选项，根据需要设置他们的 color 或其他样式。

N.B。如果您愿意，可以使用 :nth-of-type(1) 到 select 全价标签。

: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="&lt;span class=&quot;woocommerce-Price-amount amount&quot;&gt;&lt;span class=&quot;woocommerce-Price-currencySymbol&quot;&gt;&#036;&lt;/span&gt;0&lt;/span&gt;" >
                <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">&#36;</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">&#36;</span>23.997</span> )</span>
        </label><br>

        </div>

更改全额付款和定金付款语句的颜色 - Woocommerce 产品页面

Change color of full payment and deposit payment sentences - Woocommerce product page

css

php

payment

colors

woocommerce