漂亮的复选框不适用于 WooCommerce

Posted 2023-03-06

【中文标题】漂亮的复选框不适用于 WooCommerce

【英文标题】：Pretty checkbox does not work with WooCommerce

【发布时间】：2020-07-15 17:38:01

【问题描述】：

我会在 WooCommerce 结帐页面中使用 Pretty checkbox。

首先导入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);

然后像这样更改payment-mothod.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>

但是单选按钮消失了！ 我在浏览器控制台中找不到任何错误，我是不是漏掉了一些明显的东西？

【参考方案1】：

问题是因为在标签的 div 标签之前使用了 main </div>。

正确的是：

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

注意：我忽略了使用漂亮框，因为它与使用字体图标有一些冲突，而是我使用了this thread。