Woocommerce szállítási és számlázási cím CSS megváltoztatása
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:
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
7
OKT
Nincs
hozzászólás
Comments are closed here.