make forms more bootstrap like

This commit is contained in:
Stef Kariotidis 2016-11-19 11:46:50 +02:00
parent 25351cee18
commit 91b04484b0
3 changed files with 181 additions and 3 deletions

View File

@ -7,8 +7,99 @@
*/ */
add_action( 'after_setup_theme', 'woocommerce_support' ); add_action( 'after_setup_theme', 'woocommerce_support' );
if ( ! function_exists ( 'woocommerce_support' ) ) { if ( ! function_exists( 'woocommerce_support' ) ) {
function woocommerce_support() { function woocommerce_support() {
add_theme_support( 'woocommerce' ); 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;
}

View File

@ -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>

View File

@ -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>