Bootstrap 添加自定义CSS类到WooCommerce结帐字段

t1qtbnec  于 2023-09-28  发布在  Bootstrap
关注(0)|答案(5)|浏览(185)

我希望能够添加一个自定义的CSS类到我的WooCommerce结帐字段。我正在使用Twitter Bootstrap，我希望能够使用他们的.form-control类。
我在form-billing.php中的woocommerce templates文件夹中查找，但我不确定在哪里将.form-control类添加到每个文本字段。
下面是form-billing.php的代码

  1. <?php
  2. /**
  3.  * Checkout billing information form
  4.  *
  5.  * @author      WooThemes
  6.  * @package     WooCommerce/Templates
  7.  * @version     2.1.2
  8.  */
  10.  if ( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly
  11.  ?>
  12.  <div class="woocommerce-billing-fields">
  13. <?php if ( WC()->cart->ship_to_billing_address_only() && WC()->cart->needs_shipping() ) : ?>
  15.     <h3><?php _e( 'Billing &amp; Shipping', 'woocommerce' ); ?></h3>
  17. <?php else : ?>
  19.     <h3><?php _e( 'Billing Details', 'woocommerce' ); ?></h3>
  21. <?php endif; ?>
  23. <?php do_action( 'woocommerce_before_checkout_billing_form', $checkout ); ?>
  25. <?php foreach ( $checkout->checkout_fields['billing'] as $key => $field ) : ?>
  27.     <?php woocommerce_form_field( $key, $field, $checkout->get_value( $key ) ); ?>
  29. <?php endforeach; ?>
  31. <?php do_action('woocommerce_after_checkout_billing_form', $checkout ); ?>
  33. <?php if ( ! is_user_logged_in() && $checkout->enable_signup ) : ?>
  35.     <?php if ( $checkout->enable_guest_checkout ) : ?>
  37.         <p class="form-row form-row-wide create-account">
  38.             <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>
  39.         </p>
  41.     <?php endif; ?>
  43.     <?php do_action( 'woocommerce_before_checkout_registration_form', $checkout ); ?>
  45.     <?php if ( ! empty( $checkout->checkout_fields['account'] ) ) : ?>
  47.         <div class="create-account">
  49.             <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>
  51.             <?php foreach ( $checkout->checkout_fields['account'] as $key => $field ) : ?>
  53.                 <?php woocommerce_form_field( $key, $field, $checkout->get_value( $key ) ); ?>
  55.             <?php endforeach; ?>
  57.             <div class="clear"></div>
  59.         </div>
  61.     <?php endif; ?>
  63.     <?php do_action( 'woocommerce_after_checkout_registration_form', $checkout ); ?>
  65. <?php endif; ?>
  66. </div>

我是否需要查看另一个模板文件？
谢谢

twitter-bootstrap

5条答案

按热度按时间
3qpi33ja

3qpi33ja1#

ICC97的答案几乎是存在的，但不起作用。
我把icc97的答案，并调试它：

  1. add_filter('woocommerce_checkout_fields', 'addBootstrapToCheckoutFields' );
  2. public function addBootstrapToCheckoutFields($fields) {
  3.     foreach ($fields as &$fieldset) {
  4.         foreach ($fieldset as &$field) {
  5.             // if you want to add the form-group class around the label and the input
  6.             $field['class'][] = 'form-group'; 
  8.             // add form-control to the actual input
  9.             $field['input_class'][] = 'form-control';
  10.         }
  11.     }
  12.     return $fields;
  13. }
赞(0）分享  回复(0）举报  2023-09-28
70gysomp

70gysomp2#

正如@Peanuts所指出的，如果我们只想将CSS类添加到某些输入类型，该怎么办？
在试用了到目前为止发布的解决方案之后，（感谢大家！），我提出了一个使用简单的“开关情况”的mod，其中逻辑取自/woocommerce/includes/wc-template-functions.php。该函数允许我们一次定位所有输入类型，无论是默认输入类型还是自定义输入类型。
不需要重写woocommerce_form_field函数来简单地更改输入类型的$defaults参数。值得一提的是，该函数还允许我们向字段中添加不仅仅是css类的内容。
这就是函数

  1. /*********************************************************************************************/
  2. /** WooCommerce - Modify each individual input type $args defaults /**
  3. /*********************************************************************************************/
  5. add_filter('woocommerce_form_field_args','wc_form_field_args',10,3);
  7. function wc_form_field_args( $args, $key, $value = null ) {
  9. /*********************************************************************************************/
  10. /** This is not meant to be here, but it serves as a reference
  11. /** of what is possible to be changed. /**
  13. $defaults = array(
  14.     'type'              => 'text',
  15.     'label'             => '',
  16.     'description'       => '',
  17.     'placeholder'       => '',
  18.     'maxlength'         => false,
  19.     'required'          => false,
  20.     'id'                => $key,
  21.     'class'             => array(),
  22.     'label_class'       => array(),
  23.     'input_class'       => array(),
  24.     'return'            => false,
  25.     'options'           => array(),
  26.     'custom_attributes' => array(),
  27.     'validate'          => array(),
  28.     'default'           => '',
  29. );
  30. /*********************************************************************************************/
  32. // Start field type switch case
  34. switch ( $args['type'] ) {
  36.     case "select" :  /* Targets all select input type elements, except the country and state select input types */
  37.         $args['class'][] = 'form-group'; // Add a class to the field's html element wrapper - woocommerce input types (fields) are often wrapped within a <p></p> tag  
  38.         $args['input_class'] = array('form-control', 'input-lg'); // Add a class to the form input itself
  39.         //$args['custom_attributes']['data-plugin'] = 'select2';
  40.         $args['label_class'] = array('control-label');
  41.         $args['custom_attributes'] = array( 'data-plugin' => 'select2', 'data-allow-clear' => 'true', 'aria-hidden' => 'true',  ); // Add custom data attributes to the form input itself
  42.     break;
  44.     case 'country' : /* By default WooCommerce will populate a select with the country names - $args defined for this specific input type targets only the country select element */
  45.         $args['class'][] = 'form-group single-country';
  46.         $args['label_class'] = array('control-label');
  47.     break;
  49.     case "state" : /* By default WooCommerce will populate a select with state names - $args defined for this specific input type targets only the country select element */
  50.         $args['class'][] = 'form-group'; // Add class to the field's html element wrapper 
  51.         $args['input_class'] = array('form-control', 'input-lg'); // add class to the form input itself
  52.         //$args['custom_attributes']['data-plugin'] = 'select2';
  53.         $args['label_class'] = array('control-label');
  54.         $args['custom_attributes'] = array( 'data-plugin' => 'select2', 'data-allow-clear' => 'true', 'aria-hidden' => 'true',  );
  55.     break;
  57.     case "password" :
  58.     case "text" :
  59.     case "email" :
  60.     case "tel" :
  61.     case "number" :
  62.         $args['class'][] = 'form-group';
  63.         //$args['input_class'][] = 'form-control input-lg'; // will return an array of classes, the same as bellow
  64.         $args['input_class'] = array('form-control', 'input-lg');
  65.         $args['label_class'] = array('control-label');
  66.     break;
  68.     case 'textarea' :
  69.         $args['input_class'] = array('form-control', 'input-lg');
  70.         $args['label_class'] = array('control-label');
  71.     break;
  73.     case 'checkbox' :  
  74.     break;
  76.     case 'radio' :
  77.     break;
  79.     default :
  80.         $args['class'][] = 'form-group';
  81.         $args['input_class'] = array('form-control', 'input-lg');
  82.         $args['label_class'] = array('control-label');
  83.     break;
  84.     }
  86.     return $args;
  87. }

上面的函数完全解决了一次性定位结帐表单输入的问题，这对于结帐表单的默认输入类型甚至是自定义的新输入类型来说都是非常直接的。然而，似乎不可能在不创建新函数的情况下打印每个输入类型的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);

  1. function wc_form_field_args( $args, $key, $value = null ) {
  3. ...
  5. // Right after 
  6.     return $args;
  8. // Place the following
  10. if ( !is_page('checkout') ) {
  11.   add_filter('woocommerce_form_field_args','wc_form_field_args', 10, 3);
  12. } else {
  13.   remove_filter('woocommerce_form_field_args','wc_form_field_args', 10, 3);
  14. }
  16. }

之后，该函数只会影响结帐页面表单。

展开查看全部
赞(0）分享  回复(0）举报  2023-09-28
nhhxz33t

nhhxz33t3#

@Chetan的link and run答案确实给予了你想要的，但和以往一样，它们从来都不是很好的答案。
最好的资源是Customizing checkout fields using actions and filters上的WooCommerce Codex页面。
在Chetan的页面中的“自定义WooCommerce Checkout字段标签和占位符文本”中，您需要将以下代码添加到functions.php中，我已经以这样的方式修改了它，它应该做你想要的，但我还没有测试代码：

  1. // Hook in
  2. add_filter( 'woocommerce_checkout_fields' , 'my_theme_custom_override_checkout_fields' );
  4. // Our hooked in function - $fields is passed via the filter!
  5. function my_theme_custom_override_checkout_fields( $fields ) {
  6.      foreach ($fields as $fieldset) {
  7.          foreach ($fieldset as $field) {
  8.              $field['class'] = array('form-control');
  9.          }
  10.      }
  11.      return $fields;
  12. }
赞(0）分享  回复(0）举报  2023-09-28
sh7euo9m

sh7euo9m4#

我通过定义一个自定义函数解决了这个问题。逻辑直接取自wc-template-functions.php（我不确定这是否是正确的方法，但它确实解决了问题）。

  1. /*
  2.  * Custom form field function for Bootstrap 3
  3.  */
  4. function bootstrap_woocommerce_form_field( $key, $args, $value = null ) {
  5.     $defaults = array(
  6.         'type'              => 'text',
  7.         'label'             => '',
  8.         'placeholder'       => '',
  9.         'maxlength'         => false,
  10.         'required'          => false,
  11.         'class'             => array(),
  12.         'label_class'       => array(),
  13.         'input_class'       => array(),
  14.         'return'            => false,
  15.         'options'           => array(),
  16.         'custom_attributes' => array(),
  17.         'validate'          => array(),
  18.         'default'           => '',
  19.     );
  21.     $args = wp_parse_args( $args, $defaults  );
  23.     if ( ( ! empty( $args['clear'] ) ) ) $after = '<div class="clear"></div>'; else $after = '';
  25.     if ( $args['required'] ) {
  26.         $args['class'][] = 'validate-required';
  27.         $required = ' <abbr class="required" title="' . esc_attr__( 'required', 'woocommerce'  ) . '">*</abbr>';
  28.     } else {
  29.         $required = '';
  30.     }
  32.     $args['maxlength'] = ( $args['maxlength'] ) ? 'maxlength="' . absint( $args['maxlength'] ) . '"' : '';
  34.     if ( is_string( $args['label_class'] ) )
  35.         $args['label_class'] = array( $args['label_class'] );
  37.     if ( is_null( $value ) )
  38.         $value = $args['default'];
  40.     // Custom attribute handling
  41.     $custom_attributes = array();
  43.     if ( ! empty( $args['custom_attributes'] ) && is_array( $args['custom_attributes'] ) )
  44.         foreach ( $args['custom_attributes'] as $attribute => $attribute_value )
  45.             $custom_attributes[] = esc_attr( $attribute ) . '="' . esc_attr( $attribute_value ) . '"';
  47.     if ( ! empty( $args['validate'] ) )
  48.         foreach( $args['validate'] as $validate )
  49.             $args['class'][] = 'validate-' . $validate;
  51.     switch ( $args['type'] ) {
  52.     case "country" :
  54.         $countries = $key == 'shipping_country' ? WC()->countries->get_shipping_countries() : WC()->countries->get_allowed_countries();
  56.         if ( sizeof( $countries ) == 1 ) {
  58.             $field = '<div class="form-group form-row ' . esc_attr( implode( ' ', $args['class'] ) ) .'" id="' . esc_attr( $key ) . '_field">';
  60.             if ( $args['label'] )
  61.                 $field .= '<label class="' . implode( ' ', $args['label_class'] ) .'">' . $args['label']  . '</label>';
  63.             $field .= '<strong>' . current( array_values( $countries ) ) . '</strong>';
  65.             $field .= '<input type="hidden" name="' . esc_attr( $key ) . '" id="' . esc_attr( $key ) . '" value="' . current( array_keys($countries ) ) . '" ' . implode( ' ', $custom_attributes ) . ' class="country_to_state" />';
  67.             $field .= '</div>' . $after;
  69.         } else {
  71.             $field = '<div class="form-group form-row ' . esc_attr( implode( ' ', $args['class'] ) ) .'" id="' . esc_attr( $key ) . '_field">'
  72.                     . '<label for="' . esc_attr( $key ) . '" class="' . implode( ' ', $args['label_class'] ) .'">' . $args['label'] . $required  . '</label>'
  73.                     . '<select name="' . esc_attr( $key ) . '" id="' . esc_attr( $key ) . '" class="country_to_state form-control country_select" ' . implode( ' ', $custom_attributes ) . '>'
  74.                     . '<option value="">'.__( 'Select a country&hellip;', 'woocommerce' ) .'</option>';
  76.             foreach ( $countries as $ckey => $cvalue )
  77.                 $field .= '<option value="' . esc_attr( $ckey ) . '" '.selected( $value, $ckey, false ) .'>'.__( $cvalue, 'woocommerce' ) .'</option>';
  79.             $field .= '</select>';
  81.             $field .= '<noscript><input type="submit" name="woocommerce_checkout_update_totals" value="' . __( 'Update country', 'woocommerce' ) . '" /></noscript>';
  83.             $field .= '</div>' . $after;
  85.         }
  87.         break;
  88.     case "state" :
  90.         /* Get Country */
  91.         $country_key = $key == 'billing_state'? 'billing_country' : 'shipping_country';
  93.         if ( isset( $_POST[ $country_key ] ) ) {
  94.             $current_cc = wc_clean( $_POST[ $country_key ] );
  95.         } elseif ( is_user_logged_in() ) {
  96.             $current_cc = get_user_meta( get_current_user_id() , $country_key, true );
  97.             if ( ! $current_cc) {
  98.                 $current_cc = apply_filters('default_checkout_country', (WC()->customer->get_country()) ? WC()->customer->get_country() : WC()->countries->get_base_country());
  99.             }
  100.         } elseif ( $country_key == 'billing_country' ) {
  101.             $current_cc = apply_filters('default_checkout_country', (WC()->customer->get_country()) ? WC()->customer->get_country() : WC()->countries->get_base_country());
  102.         } else {
  103.             $current_cc = apply_filters('default_checkout_country', (WC()->customer->get_shipping_country()) ? WC()->customer->get_shipping_country() : WC()->countries->get_base_country());
  104.         }
  106.         $states = WC()->countries->get_states( $current_cc );
  108.         if ( is_array( $states ) && empty( $states ) ) {
  110.             $field  = '<div class="form-group form-row ' . esc_attr( implode( ' ', $args['class'] ) ) .'" id="' . esc_attr( $key ) . '_field" style="display: none">';
  112.             if ( $args['label'] )
  113.                 $field .= '<label for="' . esc_attr( $key ) . '" class="' . implode( ' ', $args['label_class'] ) .'">' . $args['label'] . $required . '</label>';
  114.             $field .= '<input type="hidden" class="hidden" name="' . esc_attr( $key )  . '" id="' . esc_attr( $key ) . '" value="" ' . implode( ' ', $custom_attributes ) . ' placeholder="' . esc_attr( $args['placeholder'] ) . '" />';
  115.             $field .= '</div>' . $after;
  117.         } elseif ( is_array( $states ) ) {
  119.             $field  = '<div class="form-group form-row ' . esc_attr( implode( ' ', $args['class'] ) ) .'" id="' . esc_attr( $key ) . '_field">';
  121.             if ( $args['label'] )
  122.                 $field .= '<label for="' . esc_attr( $key ) . '" class="' . implode( ' ', $args['label_class'] ) .'">' . $args['label']. $required . '</label>';
  123.             $field .= '<select name="' . esc_attr( $key ) . '" id="' . esc_attr( $key ) . '" class="state_select form-control " ' . implode( ' ', $custom_attributes ) . ' placeholder="' . esc_attr( $args['placeholder'] ) . '">
  124.                 <option value="">'.__( 'Select a state&hellip;', 'woocommerce' ) .'</option>';
  126.             foreach ( $states as $ckey => $cvalue )
  127.                 $field .= '<option value="' . esc_attr( $ckey ) . '" '.selected( $value, $ckey, false ) .'>'.__( $cvalue, 'woocommerce' ) .'</option>';
  129.             $field .= '</select>';
  130.             $field .= '</div>' . $after;
  132.         } else {
  134.             $field  = '<div class="form-group form-row ' . esc_attr( implode( ' ', $args['class'] ) ) .'" id="' . esc_attr( $key ) . '_field">';
  136.             if ( $args['label'] )
  137.                 $field .= '<label for="' . esc_attr( $key ) . '" class="' . implode( ' ', $args['label_class'] ) .'">' . $args['label']. $required . '</label>';
  138.             $field .= '<input type="text" class="form-control input-text ' . implode( ' ', $args['input_class'] ) .'" value="' . esc_attr( $value ) . '"  placeholder="' . esc_attr( $args['placeholder'] ) . '" name="' . esc_attr( $key ) . '" id="' . esc_attr( $key ) . '" ' . implode( ' ', $custom_attributes ) . ' />';
  139.             $field .= '</div>' . $after;
  141.         }
  143.         break;
  144.     case "textarea" :
  146.         $field = '<div class="form-group form-row ' . esc_attr( implode( ' ', $args['class'] ) ) .'" id="' . esc_attr( $key ) . '_field">';
  148.         if ( $args['label'] )
  149.             $field .= '<label for="' . esc_attr( $key ) . '" class="' . implode( ' ', $args['label_class'] ) .'">' . $args['label']. $required  . '</label>';
  151.         $field .= '<textarea name="' . esc_attr( $key ) . '" class="form-control input-text ' . implode( ' ', $args['input_class'] ) .'" id="' . esc_attr( $key ) . '" placeholder="' . esc_attr( $args['placeholder'] ) . '"' . ( empty( $args['custom_attributes']['rows'] ) ? ' rows="2"' : '' ) . ( empty( $args['custom_attributes']['cols'] ) ? ' cols="5"' : '' ) . implode( ' ', $custom_attributes ) . '>'. esc_textarea( $value  ) .'</textarea>
  152.             </div>' . $after;
  154.         break;
  155.     case "checkbox" :
  157.         $field = '<div class="checkbox form-row ' . esc_attr( implode( ' ', $args['class'] ) ) .'" id="' . esc_attr( $key ) . '_field">
  158.                 <label for="' . esc_attr( $key ) . '" class="checkbox ' . implode( ' ', $args['label_class'] ) .'" ' . implode( ' ', $custom_attributes ) . '>
  159.                     <input type="' . esc_attr( $args['type'] ) . '" class="input-checkbox" name="' . esc_attr( $key ) . '" id="' . esc_attr( $key ) . '" value="1" '.checked( $value, 1, false ) .' />'
  160.                     . $args['label'] . $required . '</label>
  161.             </div>' . $after;
  163.         break;
  164.     case "password" :
  166.         $field = '<div class="form-group form-row ' . esc_attr( implode( ' ', $args['class'] ) ) .'" id="' . esc_attr( $key ) . '_field">';
  168.         if ( $args['label'] )
  169.             $field .= '<label for="' . esc_attr( $key ) . '" class="' . implode( ' ', $args['label_class'] ) .'">' . $args['label']. $required . '</label>';
  171.         $field .= '<input type="password" class="form-control input-text ' . implode( ' ', $args['input_class'] ) .'" name="' . esc_attr( $key ) . '" id="' . esc_attr( $key ) . '" placeholder="' . esc_attr( $args['placeholder'] ) . '" value="' . esc_attr( $value ) . '" ' . implode( ' ', $custom_attributes ) . ' />
  172.             </div>' . $after;
  174.         break;
  175.     case "text" :
  177.         $field = '<div class="form-group form-row ' . esc_attr( implode( ' ', $args['class'] ) ) .'" id="' . esc_attr( $key ) . '_field">';
  179.         if ( $args['label'] )
  180.             $field .= '<label for="' . esc_attr( $key ) . '" class="' . implode( ' ', $args['label_class'] ) .'">' . $args['label'] . $required . '</label>';
  182.         $field .= '<input type="text" class="form-control input-text ' . implode( ' ', $args['input_class'] ) .'" name="' . esc_attr( $key ) . '" id="' . esc_attr( $key ) . '" placeholder="' . esc_attr( $args['placeholder'] ) . '" '.$args['maxlength'].' value="' . esc_attr( $value ) . '" ' . implode( ' ', $custom_attributes ) . ' />
  183.             </div>' . $after;
  185.         break;
  186.     case "select" :
  188.         $options = '';
  190.         if ( ! empty( $args['options'] ) )
  191.             foreach ( $args['options'] as $option_key => $option_text )
  192.                 $options .= '<option value="' . esc_attr( $option_key ) . '" '. selected( $value, $option_key, false ) . '>' . esc_attr( $option_text ) .'</option>';
  194.             $field = '<div class="form-group form-row ' . esc_attr( implode( ' ', $args['class'] ) ) .'" id="' . esc_attr( $key ) . '_field">';
  196.             if ( $args['label'] )
  197.                 $field .= '<label for="' . esc_attr( $key ) . '" class="' . implode( ' ', $args['label_class'] ) .'">' . $args['label']. $required . '</label>';
  199.             $field .= '<select name="' . esc_attr( $key ) . '" id="' . esc_attr( $key ) . '" class="select form-control" ' . implode( ' ', $custom_attributes ) . '>
  200.                     ' . $options . '
  201.                 </select>
  202.             </div>' . $after;
  204.         break;
  205.     default :
  207.         $field = apply_filters( 'woocommerce_form_field_' . $args['type'], '', $key, $args, $value );
  209.         break;
  210.     }
  212.     if ( $args['return'] ) return $field; else echo $field;
  213. }

不要忘记将所有出现的woocommerce_form_field替换为bootstrap_woocommerce_form_field。

展开查看全部
赞(0）分享  回复(0）举报  2023-09-28
liwlm1x9

liwlm1x95#

  1. /* New Checkout fields */
  2. add_filter('woocommerce_form_field_args', 'custom_wc_form_field_args', 20, 3);
  3. function custom_wc_form_field_args($args, $key, $value)
  4. {
  5.     if (is_checkout()) {
  7.     if ($key != 'billing_phone' && $key != 'billing_email' && $key != 'billing_postcode' && $key != 'billing_country') {
  8.         $args['class'] = array('inline-input');
  10.     }elseif($key == 'billing_country'){
  11.         $args['class'] = array('inline-input update_totals_on_change');
  12.     }
  13.     else {
  14.         $args['class'] = array();
  15.     }
  16.     // if ($key == 'billing_country' || $key == 'shipping_country') {
  17.     //     $args['class'] = array('inline-input', 'hidden');
  18.     // }
  19.     // $args['input_class'] = array('inline-text');
  20.     if ($args['type'] == 'checkbox') {
  21.         $args['label_class'] = array('custom-checkbox');
  22.     } else {
  23.         $args['label_class'] = array('sr-only');
  24.     }
  25. }
  26. return $args;

}

展开查看全部
赞(0）分享  回复(0）举报  2023-09-28
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com