Изменить цвет предложений полной оплаты и внесения депозита - страница продукта Woocommerce - PullRequest
Новая
       22

Изменить цвет предложений полной оплаты и внесения депозита - страница продукта Woocommerce

0 голосов
/ 08 декабря 2018

Надеюсь, вы можете помочь мне с этим.Я работаю на своем сайте с плагином Woocommerce и YITH WooCommerce Депозиты и авансовые платежи .На странице товара мы видим две строки: одну с полной оплатой и одну с предоплатой ...

enter image description here

Мне нужна перваязеленым цветом (полная оплата).Но когда я изменяю цвет этой линии, используя стиль css «label», обе линии становятся зелеными.

Есть идеи, как этого добиться?Большое спасибо (еще раз).

Код, который я использовал, меняет обе строки на зеленый 

    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>

Ответы [ 2 ]

0 голосов
/ 08 декабря 2018

Вам нужно найти уникальный селектор для этого входа, используя селектор label, он слишком общий, он будет применяться не только к этим двум элементам, которые вы перечислили, но также и к любой другой метке на странице.Задача состоит в том, чтобы найти идеальную «уникальность», чтобы стили применялись только к тем этикеткам, которые вы хотите.

Я полагаю, что вы хотите, чтобы эти стили применялись только к этим вариантам покупки с депозитом / полной ценой.Кроме того, из-за того, что для блока есть id (#yith-wcdp-add-deposit-to-cart), вы будете отображать покупку только для одного элемента за раз.

Я адаптировал вашу таблицу стилей ниже, чтобычто все стили, созданные вами для label, применяются как к меткам депозита, так и к меткам полной цены, за исключением color.Затем вы можете использовать :first-of-type, чтобы выбрать опцию полной цены, и :nth-of-type(2), чтобы выбрать второй вариант депозита, установив их color или другие стили по вашему желанию.

Обратите внимание: вы можете использовать :nth-of-type(1), чтобы выбрать полную ценовую метку, если хотите.

:nth-of-type(n) - псевдокласс для стилевого оформления CSS, он выберет n-е вхождение этого элемента и применит стили.Например, :nth-o-type(5) будет применяться только к пятому вхождению.Вы также можете заменить «n» более сложной алгебраической формулой «нечетный» или «четный», чтобы стиль применялся к нескольким элементам, которые соответствуют заданному шаблону. 

#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>
0 голосов
/ 08 декабря 2018

Вы можете попробовать взять класс из тега span в качестве селектора: 

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

Надеюсь, что я помог;)

...