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:

Vezetéknév *

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.

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