Pretty checkbox does not work with WooCommerce

Viewed 184

I would use Pretty checkbox in the WooCommerce checkout page.

First imported the CSS file:

// 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);

Then changed payment-mothod.php like this:

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

But radio buttons disappeared! I can't find any error in the browser console, am I dummy missing something obvious?

1 Answers

The issue was because of using main </div> before div tag for lable.

Correct one is:

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

Note: I ignored using pretty box because it has some conflicts with using font icons and instead I used this thread.

Related