make forms more bootstrap like
This commit is contained in:
Stef Kariotidis
parent
25351cee18
commit
91b04484b0
|
|
@ -10,5 +10,96 @@ add_action( 'after_setup_theme', 'woocommerce_support' );
|
|||
if ( ! function_exists( 'woocommerce_support' ) ) {
|
||||
function woocommerce_support() {
|
||||
add_theme_support( 'woocommerce' );
|
||||
// hook in and customizer form fields
|
||||
add_filter( 'woocommerce_form_field_args', 'wc_form_field_args', 10, 3 );
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Filter hook function monkey patching form classes
|
||||
* Author: Adriano Monecchi http://stackoverflow.com/a/36724593/307826
|
||||
*
|
||||
* @param $args
|
||||
* @param $key
|
||||
* @param null $value
|
||||
*
|
||||
* @return mixed
|
||||
*/
|
||||
function wc_form_field_args( $args, $key, $value = null ) {
|
||||
|
||||
// Start field type switch case
|
||||
|
||||
switch ( $args['type'] ) {
|
||||
|
||||
/* Targets all select input type elements, except the country and state select input types */
|
||||
case 'select' :
|
||||
// Add a class to the field's html element wrapper - woocommerce
|
||||
// input types (fields) are often wrapped within a <p></p> tag.
|
||||
$args['class'][] = 'form-group';
|
||||
// Add a class to the form input itself.
|
||||
$args['input_class'] = array( 'form-control', 'input-lg' );
|
||||
$args['label_class'] = array( 'control-label' );
|
||||
$args['custom_attributes'] = array(
|
||||
'data-plugin' => 'select2',
|
||||
'data-allow-clear' => 'true',
|
||||
'aria-hidden' => 'true',
|
||||
// Add custom data attributes to the form input itself.
|
||||
);
|
||||
break;
|
||||
|
||||
// By default WooCommerce will populate a select with the country names - $args
|
||||
// defined for this specific input type targets only the country select element.
|
||||
case 'country' :
|
||||
$args['class'][] = 'form-group single-country';
|
||||
$args['label_class'] = array( 'control-label' );
|
||||
break;
|
||||
|
||||
// By default WooCommerce will populate a select with state names - $args defined
|
||||
// for this specific input type targets only the country select element.
|
||||
case 'state' :
|
||||
// Add class to the field's html element wrapper.
|
||||
$args['class'][] = 'form-group';
|
||||
// add class to the form input itself.
|
||||
$args['input_class'] = array( '', 'input-lg' );
|
||||
$args['label_class'] = array( 'control-label' );
|
||||
$args['custom_attributes'] = array(
|
||||
'data-plugin' => 'select2',
|
||||
'data-allow-clear' => 'true',
|
||||
'aria-hidden' => 'true',
|
||||
);
|
||||
break;
|
||||
|
||||
case 'password' :
|
||||
case 'text' :
|
||||
case 'email' :
|
||||
case 'tel' :
|
||||
case 'number' :
|
||||
$args['class'][] = 'form-group';
|
||||
$args['input_class'] = array( 'form-control', 'input-lg' );
|
||||
$args['label_class'] = array( 'control-label' );
|
||||
break;
|
||||
|
||||
case 'textarea' :
|
||||
$args['input_class'] = array( 'form-control', 'input-lg' );
|
||||
$args['label_class'] = array( 'control-label' );
|
||||
break;
|
||||
|
||||
case 'checkbox' :
|
||||
$args['label_class'] = array( 'custom-control custom-checkbox' );
|
||||
$args['input_class'] = array( 'custom-control-input', 'input-lg' );
|
||||
break;
|
||||
|
||||
case 'radio' :
|
||||
$args['label_class'] = array( 'custom-control custom-radio' );
|
||||
$args['input_class'] = array( 'custom-control-input', 'input-lg' );
|
||||
break;
|
||||
|
||||
default :
|
||||
$args['class'][] = 'form-group';
|
||||
$args['input_class'] = array( 'form-control', 'input-lg' );
|
||||
$args['label_class'] = array( 'control-label' );
|
||||
break;
|
||||
}
|
||||
|
||||
return $args;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,62 @@
|
|||
<?php
|
||||
/**
|
||||
* Login form
|
||||
*
|
||||
* This template can be overridden by copying it to yourtheme/woocommerce/global/form-login.php.
|
||||
*
|
||||
* HOWEVER, on occasion WooCommerce will need to update template files and you
|
||||
* (the theme developer) will need to copy the new files to your theme to
|
||||
* maintain compatibility. We try to do this as little as possible, but it does
|
||||
* happen. When this occurs the version of the template file will be bumped and
|
||||
* the readme will list any important changes.
|
||||
*
|
||||
* @see https://docs.woocommerce.com/document/template-structure/
|
||||
* @author WooThemes
|
||||
* @package WooCommerce/Templates
|
||||
* @version 2.1.0
|
||||
*/
|
||||
|
||||
if ( ! defined( 'ABSPATH' ) ) {
|
||||
exit; // Exit if accessed directly
|
||||
}
|
||||
|
||||
if ( is_user_logged_in() ) {
|
||||
return;
|
||||
}
|
||||
|
||||
?>
|
||||
<form method="post" class="login" <?php if ( $hidden ) echo 'style="display:none;"'; ?>>
|
||||
|
||||
<?php do_action( 'woocommerce_login_form_start' ); ?>
|
||||
|
||||
<?php if ( $message ) echo wpautop( wptexturize( $message ) ); ?>
|
||||
|
||||
<p class="form-row form-row-first">
|
||||
<label for="username"><?php _e( 'Username or email', 'woocommerce' ); ?> <span class="required">*</span></label>
|
||||
<input type="text" class="input-text form-control" name="username" id="username" />
|
||||
</p>
|
||||
<p class="form-row form-row-last">
|
||||
<label for="password"><?php _e( 'Password', 'woocommerce' ); ?> <span class="required">*</span></label>
|
||||
<input class="input-text form-control" type="password" name="password" id="password" />
|
||||
</p>
|
||||
<div class="clear"></div>
|
||||
|
||||
<?php do_action( 'woocommerce_login_form' ); ?>
|
||||
|
||||
<p class="form-row">
|
||||
<?php wp_nonce_field( 'woocommerce-login' ); ?>
|
||||
<input type="submit" class="btn btn-outline-primary" name="login" value="<?php esc_attr_e( 'Login', 'woocommerce' ); ?>" />
|
||||
<input type="hidden" name="redirect" value="<?php echo esc_url( $redirect ) ?>" />
|
||||
<label for="rememberme" class="inline">
|
||||
<input name="rememberme" type="checkbox" id="rememberme" value="forever" /> <?php _e( 'Remember me', 'woocommerce' ); ?>
|
||||
</label>
|
||||
</p>
|
||||
<p class="lost_password">
|
||||
<a href="<?php echo esc_url( wp_lostpassword_url() ); ?>"><?php _e( 'Lost your password?', 'woocommerce' ); ?></a>
|
||||
</p>
|
||||
|
||||
<div class="clear"></div>
|
||||
|
||||
<?php do_action( 'woocommerce_login_form_end' ); ?>
|
||||
|
||||
</form>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
<?php
|
||||
/**
|
||||
* Product quantity inputs
|
||||
*
|
||||
* This template can be overridden by copying it to yourtheme/woocommerce/global/quantity-input.php.
|
||||
*
|
||||
* HOWEVER, on occasion WooCommerce will need to update template files and you
|
||||
* (the theme developer) will need to copy the new files to your theme to
|
||||
* maintain compatibility. We try to do this as little as possible, but it does
|
||||
* happen. When this occurs the version of the template file will be bumped and
|
||||
* the readme will list any important changes.
|
||||
*
|
||||
* @see https://docs.woocommerce.com/document/template-structure/
|
||||
* @author WooThemes
|
||||
* @package WooCommerce/Templates
|
||||
* @version 2.5.0
|
||||
*/
|
||||
|
||||
if ( ! defined( 'ABSPATH' ) ) {
|
||||
exit; // Exit if accessed directly
|
||||
}
|
||||
?>
|
||||
<div class="quantity">
|
||||
<input type="number" step="<?php echo esc_attr( $step ); ?>" min="<?php echo esc_attr( $min_value ); ?>" max="<?php echo esc_attr( $max_value ); ?>" name="<?php echo esc_attr( $input_name ); ?>" value="<?php echo esc_attr( $input_value ); ?>" title="<?php echo esc_attr_x( 'Qty', 'Product quantity input tooltip', 'woocommerce' ) ?>" class="input-text qty text form-control" size="4" pattern="<?php echo esc_attr( $pattern ); ?>" inputmode="<?php echo esc_attr( $inputmode ); ?>" />
|
||||
</div>
|
||||
Reference in New Issue