我希望能够添加一个自定义的CSS类到我的WooCommerce结帐字段。我正在使用Twitter Bootstrap，我希望能够使用他们的.form-control类。
我在form-billing.php中的woocommerce templates文件夹中查找，但我不确定在哪里将.form-control类添加到每个文本字段。
下面是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 & 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>我是否需要查看另一个模板文件？
谢谢
5条答案
按热度按时间3qpi33ja1#
ICC97的答案几乎是存在的，但不起作用。
我把icc97的答案，并调试它：
70gysomp2#
正如@Peanuts所指出的，如果我们只想将CSS类添加到某些输入类型，该怎么办？
在试用了到目前为止发布的解决方案之后，（感谢大家！），我提出了一个使用简单的“开关情况”的mod，其中逻辑取自
/woocommerce/includes/wc-template-functions.php。该函数允许我们一次定位所有输入类型，无论是默认输入类型还是自定义输入类型。不需要重写
woocommerce_form_field函数来简单地更改输入类型的$defaults参数。值得一提的是，该函数还允许我们向字段中添加不仅仅是css类的内容。这就是函数
上面的函数完全解决了一次性定位结帐表单输入的问题，这对于结帐表单的默认输入类型甚至是自定义的新输入类型来说都是非常直接的。然而，似乎不可能在不创建新函数的情况下打印每个输入类型的html输出，正如@abhisek在他的答案中所示。
奖励
似乎该函数也可能影响WooCommerce的函数或结帐页面之外的模板打印的其他表单字段。通过使用
is_page()函数，我设法有条件地仅在结帐页面上应用该函数。您的结帐页面可能会有不同的slug，因此请相应地进行更改以反映它。如果您只需要将该函数应用于结帐页面，请执行以下操作：
add_filter（）
//add_filter('woocommerce_form_field_args','wc_form_field_args', 10, 3);并改用add_action
add_action('woocommerce_form_field_args', 'wc_form_field_args', 10, 3);之后，该函数只会影响结帐页面表单。
nhhxz33t3#
@Chetan的link and run答案确实给予了你想要的，但和以往一样，它们从来都不是很好的答案。
最好的资源是Customizing checkout fields using actions and filters上的WooCommerce Codex页面。
在Chetan的页面中的“自定义WooCommerce Checkout字段标签和占位符文本”中，您需要将以下代码添加到functions.php中，我已经以这样的方式修改了它，它应该做你想要的，但我还没有测试代码：
sh7euo9m4#
我通过定义一个自定义函数解决了这个问题。逻辑直接取自wc-template-functions.php（我不确定这是否是正确的方法，但它确实解决了问题）。
不要忘记将所有出现的
woocommerce_form_field替换为bootstrap_woocommerce_form_field。liwlm1x95#
}