{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 \"骚年 ilove 的问题《Add custom css class to WooCommerce checkout field》','https://www.manongdao.com/q-184107.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
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 & 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:
As @Peanuts pointed out, what if we want to add CSS classes to certain input types only?
After experimenting with the solutions posted here so far, (thanks to everybody!), I've came up with a mod using a simple "switch case", in which the logic is taken from
/woocommerce/includes/wc-template-functions.php. The function allow us to target all the input types at once, be it the default input types or even custom ones.There's no need to rewrite the
woocommerce_form_fieldfunction to simply change the$defaultsargs for the input types. It is valid to mention that the function also allow us to add much more than just css classes to the fields.-- So here's the function --
The function above completely solved the issue of targeting the checkout form inputs all at once, which is really straight forward for the checkout form default input types or even custom new ones. It seems not to be possible though, to print each input type html output without creating a new function as @abhisek shows on his answer.
Bonus
It seems that the function might also affect other forms fields printed by WooCommerce's functions or templates outside the checkout page. I've managed to conditionally apply the function only when on the checkout page by using the
is_page()function. Your checkout page might have a different slug, so change that to reflect it accordingly.If you need to apply the function only for the checkout page, do as follows:
Comment add_filter()
//add_filter('woocommerce_form_field_args','wc_form_field_args', 10, 3);And use add_action instead
add_action('woocommerce_form_field_args', 'wc_form_field_args', 10, 3);After that, the function will only affect the checkout page form.
@Chetan's link and run answer does kind of give you what you want, but as ever they're never very good answers.
The best resource for this is the WooCommerce Codex page on Customizing checkout fields using actions and filters.
In the 'Customizing WooCommerce Checkout Field Labels and Placeholder Text' in Chetan's page you have the following code which you need to add to your functions.php, I've modified it in such a way that it should do what you want, but I haven't tested the code:
I am fixed the issue by defining a custom function. The logic is taken directly from wc-template-functions.php (I am not sure if this is the right way but it does solve the problem).
Don't forget to replace all occurrences of
woocommerce_form_fieldwithbootstrap_woocommerce_form_fieldHope it helps!