Довольно флажок не работает с WooCommerce

Question

Я бы использовал Довольно флажок на странице оформления заказа WooCommerce.

Сначала импортировали файл CSS:

// Pretty Checkbox
// =============================================================================

function child_enqueue_styles() {

    // enqueue pretty checkbox style

    wp_enqueue_style('pretty-checkbox', get_stylesheet_directory_uri() .'/pretty-checkbox/dist/pretty-checkbox.css', array());

}
add_action('wp_enqueue_scripts', 'child_enqueue_styles', 9999);

Затем изменили способ оплаты. php вот так:

<li class="wc_payment_method payment_method_<?php echo esc_attr( $gateway->id ); ?>">
    <div class="pretty p-default p-round">
    <input id="payment_method_<?php echo esc_attr( $gateway->id ); ?>" type="radio" class="input-radio" name="payment_method" value="<?php echo esc_attr( $gateway->id ); ?>" <?php checked( $gateway->chosen, true ); ?> data-order_button_text="<?php echo esc_attr( $gateway->order_button_text ); ?>" />
    </div>
    <div class="state p-success-o">
    <label for="payment_method_<?php echo esc_attr( $gateway->id ); ?>">
        <?php echo $gateway->get_title(); /* phpcs:ignore WordPress.XSS.EscapeOutput.OutputNotEscaped */ ?> <?php echo $gateway->get_icon(); /* phpcs:ignore WordPress.XSS.EscapeOutput.OutputNotEscaped */ ?>
    </label>
    </div>
    <?php if ( $gateway->has_fields() || $gateway->get_description() ) : ?>
        <div class="payment_box payment_method_<?php echo esc_attr( $gateway->id ); ?>" <?php if ( ! $gateway->chosen ) : /* phpcs:ignore Squiz.ControlStructures.ControlSignature.NewlineAfterOpenBrace */ ?>style="display:none;"<?php endif; /* phpcs:ignore Squiz.ControlStructures.ControlSignature.NewlineAfterOpenBrace */ ?>>
            <?php $gateway->payment_fields(); ?>
        </div>
    <?php endif; ?>
</li>

Но переключатели исчезли! Я не могу найти ошибку в консоли браузера, неужели я не вижу ничего очевидного?

Answer 1

Проблема заключалась в использовании основного </div> перед тегом div для lable.

Правильное значение:

<div class="pretty p-default p-round">
    <input id="payment_method_<?php echo esc_attr( $gateway->id ); ?>" type="radio" class="input-radio" name="payment_method" value="<?php echo esc_attr( $gateway->id ); ?>" <?php checked( $gateway->chosen, true ); ?> data-order_button_text="<?php echo esc_attr( $gateway->order_button_text ); ?>" />

    <div class="state p-success-o">
    <label for="payment_method_<?php echo esc_attr( $gateway->id ); ?>">
        <?php echo $gateway->get_title(); /* phpcs:ignore WordPress.XSS.EscapeOutput.OutputNotEscaped */ ?> <?php echo $gateway->get_icon(); /* phpcs:ignore WordPress.XSS.EscapeOutput.OutputNotEscaped */ ?>
    </label>
    </div>
</div>

Примечание: я проигнорировал использование симпатичной коробки, потому что она имеет некоторые конфликты с использованием значков шрифтов и вместо этого я использовал эту тему .