SZERZŐ admin KATEGÓRIA Woocommerce webáruház On 07-10-2014

Ha szeretnénk megváltoztatni a Pénztár résznél a fizetési mezők osztályát (CSS), esetleg Bootstrapet használunk, jól jöhet a következő kódrészlet:

//woocommerce billing bootstrap css fields
add_filter('woocommerce_billing_fields', 'custom_woocommerce_billing_fields');
function custom_woocommerce_billing_fields( $fields ) {
$fields['billing_phone']['class'] = array( 'form-group' );
$fields['billing_phone']['input_class'] = array( 'form-control' );
$fields['billing_email']['class'] = array( 'form-group' );
$fields['billing_email']['input_class'] = array( 'form-control' );
$fields['billing_postcode']['class'] = array( 'form-group' );
$fields['billing_postcode']['input_class'] = array( 'form-control' );
$fields['billing_city']['class'] = array( 'form-group' );
$fields['billing_city']['input_class'] = array( 'form-control' );
$fields['billing_address_2']['class'] = array( 'form-group' );
$fields['billing_address_2']['input_class'] = array( 'form-control' );
$fields['billing_company']['class'] = array( 'form-group' );
$fields['billing_company']['input_class'] = array( 'form-control' );
$fields['billing_last_name']['class'] = array( 'form-group' );
$fields['billing_last_name']['input_class'] = array( 'form-control' );
$fields['billing_first_name']['class'] = array( 'form-group' );
$fields['billing_first_name']['input_class'] = array( 'form-control' );
$fields['billing_address_1']['class'] = array( 'form-group' );
$fields['billing_address_1']['input_class'] = array( 'form-control' );
return $fields;
}

A kódot a theme könyvtárunk functions.php-ba kell beszúrni. A fenti mezőket tovább bővíthetjük a szállítási mezőkkel is. Így néz ki a szállítási cím vezetéknév rész generált HTML kódja:

<p id="shipping_first_name_field" class="form-row form-row-first validate-required"><label for="shipping_first_name">Vezetéknév <abbr class="required" title="kötelező">*</abbr></label>
<input id="shipping_first_name" class="input-text " name="shipping_first_name" type="text" value="" placeholder="" /></p>

Ehhez a fenti függvényhez hasonlóan egy újat kell írnunk (szintén functions.php-ba kell beszúrni):

//woocommerce shipping bootstrap css fields
add_filter('woocommerce_shipping_fields', 'custom_woocommerce_shipping_fields');
function custom_woocommerce_shipping_fields($fields) {
$fields['shipping_first_name']['class'] = array( 'form-group' );
$fields['shipping_first_name']['input_class'] = array( 'form-control' );
return $fields;
}

Nyilván a form-group és form-control helyére írhatunk tetszőleges CSS osztályt.
A fenti logikát követve végül átírhatjuk a vásárlói megjegyzés gombjának, illetve szövegdobozának CSS osztályát is.

//woocommerce order comments classes
add_filter( 'woocommerce_checkout_fields' , 'custom_override_checkout_fields' );
function custom_override_checkout_fields( $fields ) {
$fields['order']['order_comments']['class'] = array('form-group');
$fields['order']['order_comments']['input_class'] = array('form-control');
return $fields;
}

Ezzel a kis trükkel sok felesleges CSS írástól kímélhetjük meg magunkat, főleg, ha beépített Bootstrapet használunk.

3 év óta / Nincsenek hozzászólások