将自定义 css 类添加到 WooCommerce 结帐字段 [英] Add custom css class to WooCommerce checkout fields

问题描述

我希望能够将自定义 CSS 类添加到我的 WooCommerce 结帐字段.我正在使用 twitter Bootstrap，我希望能够使用他们的 .form-control 类.

我查看了 form-b​​illing.php 中的 woocommerce 模板文件夹，但我不确定将 .form-control 类添加到每个文本字段的位置.

这是form-b​​illing.php

的代码

<div class="woocommerce-billing-fields"><?php if (WC()->cart->ship_to_billing_address_only() && WC()->cart->needs_shipping() ) : ?><h3><?php _e('计费和运输', 'woocommerce');?></h3><?php 其他:?><h3><?php _e('账单明细', 'woocommerce');?></h3><?php endif;?><?php do_action('woocommerce_before_checkout_billing_form', $checkout);?><?php foreach ( $checkout->checkout_fields['billing'] as $key => $field ) : ?><?php woocommerce_form_field( $key, $field, $checkout->get_value( $key ) );?><?php endforeach;?><?php do_action('woocommerce_after_checkout_billing_form', $checkout );?><?php if ( !is_user_logged_in() && $checkout->enable_signup ) : ?><?php if ( $checkout->enable_guest_checkout ) : ?><p class="form-row form-row-wide create-account"><input class="input-checkbox" id="createaccount" <?php checked( ( true === $checkout->get_value( 'createaccount' ) || ( true === apply_filters( 'woocommerce_create_account_default_checked',假) ) ), 真) ?>type="checkbox" name="createaccount" value="1"/><label for="createaccount" class="checkbox"><?php _e( '创建一个账户?', 'woocommerce' );?></label></p><?php endif;?><?php do_action('woocommerce_before_checkout_registration_form', $checkout);?><?php if ( !empty( $checkout->checkout_fields['account'] ) ) : ?><div class="create-account"><p><?php _e( '通过输入以下信息创建一个帐户.如果您是回头客，请在页面顶部登录.', 'woocommerce' );?></p><?php foreach ( $checkout->checkout_fields['account'] as $key => $field ) : ?><?php woocommerce_form_field( $key, $field, $checkout->get_value( $key ) );?><?php endforeach;?><div class="clear"></div>

<?php endif;?><?php do_action('woocommerce_after_checkout_registration_form', $checkout);?><?php endif;?>

我需要查看另一个模板文件吗?

谢谢

解决方案

icc97 的回答差不多了，但是不行.

我拿了icc97的回答，调试了一下:

add_filter('woocommerce_checkout_fields', 'addBootstrapToCheckoutFields');公共函数 addBootstrapToCheckoutFields($fields) {foreach ($fields as &$fieldset) {foreach ($fieldset 为 &$field) {//如果要在标签和输入周围添加表单组类$field['class'][] = 'form-group';//将表单控件添加到实际输入$field['input_class'][] = 'form-control';}}返回 $fields;}

I would like to be able to add a custom CSS class to my WooCommerce checkout fields. I'm using twitter Bootstrap and I would like to be able to use their .form-control class.

I looked in the woocommerce templates folder in form-billing.php but I'm not sure where to add the .form-control class to each text field.

Here is the code for form-billing.php

<?php
/**
 * Checkout billing information form
 *
 * @author      WooThemes
 * @package     WooCommerce/Templates
 * @version     2.1.2
 */

 if ( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly
 ?>
 <div class="woocommerce-billing-fields">
<?php if ( WC()->cart->ship_to_billing_address_only() && WC()->cart->needs_shipping() ) : ?>

    <h3><?php _e( 'Billing &amp; Shipping', 'woocommerce' ); ?></h3>

<?php else : ?>

    <h3><?php _e( 'Billing Details', 'woocommerce' ); ?></h3>

<?php endif; ?>

<?php do_action( 'woocommerce_before_checkout_billing_form', $checkout ); ?>

<?php foreach ( $checkout->checkout_fields['billing'] as $key => $field ) : ?>

    <?php woocommerce_form_field( $key, $field, $checkout->get_value( $key ) ); ?>

<?php endforeach; ?>

<?php do_action('woocommerce_after_checkout_billing_form', $checkout ); ?>

<?php if ( ! is_user_logged_in() && $checkout->enable_signup ) : ?>

    <?php if ( $checkout->enable_guest_checkout ) : ?>

        <p class="form-row form-row-wide create-account">
            <input class="input-checkbox" id="createaccount" <?php checked( ( true === $checkout->get_value( 'createaccount' ) || ( true === apply_filters( 'woocommerce_create_account_default_checked', false ) ) ), true) ?> type="checkbox" name="createaccount" value="1" /> <label for="createaccount" class="checkbox"><?php _e( 'Create an account?', 'woocommerce' ); ?></label>
        </p>

    <?php endif; ?>

    <?php do_action( 'woocommerce_before_checkout_registration_form', $checkout ); ?>

    <?php if ( ! empty( $checkout->checkout_fields['account'] ) ) : ?>

        <div class="create-account">

            <p><?php _e( 'Create an account by entering the information below. If you are a returning customer please login at the top of the page.', 'woocommerce' ); ?></p>

            <?php foreach ( $checkout->checkout_fields['account'] as $key => $field ) : ?>

                <?php woocommerce_form_field( $key, $field, $checkout->get_value( $key ) ); ?>

            <?php endforeach; ?>

            <div class="clear"></div>

        </div>

    <?php endif; ?>

    <?php do_action( 'woocommerce_after_checkout_registration_form', $checkout ); ?>

<?php endif; ?>
</div>

Do I need to to look in another template file?

Thanks

解决方案

icc97's answer is almost there but doesn't work.

I took icc97's answer, and debugged it:

add_filter('woocommerce_checkout_fields', 'addBootstrapToCheckoutFields' );
public function addBootstrapToCheckoutFields($fields) {
    foreach ($fields as &$fieldset) {
        foreach ($fieldset as &$field) {
            // if you want to add the form-group class around the label and the input
            $field['class'][] = 'form-group'; 

            // add form-control to the actual input
            $field['input_class'][] = 'form-control';
        }
    }
    return $fields;
}

这篇关于将自定义 css 类添加到 WooCommerce 结帐字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！