问题
I am customizing the WooCommerce checkout page fields. I want to add a heading (text) in between the fields. I have reordered the fields like this
add_filter('woocommerce_checkout_fields', 'ac_checkout_reorder_fields');
function ac_checkout_reorder_fields($fields) {
$order = array(
"billing_first_name",
"billing_last_name",
"billing_company",
"billing_email",
"billing_phone",
"billing_address_1",
"billing_address_2",
"billing_postcode",
"billing_country"
);
foreach($order as $field)
{
$ordered_fields[$field] = $fields["billing"][$field];
}
$fields["billing"] = $ordered_fields;
return $fields;
}
Then I added a new heading like this
add_action( 'woocommerce_after_checkout_billing_form', 'add_custom_heading' );
function add_custom_heading( $checkout ) {
echo '<div id="add_custom_heading"><h2>' . __('Custom Heading Here') . '</h2></div>' ;
}
Now the fields are re-arranged and the custom heading is showing. But I want the heading showing just below the name & company fields. With my code, the field is being added below. How I an reposition this in my desired place.
PS: I also tried to add customize the entire fields sections with this hook woocommerce_checkout_fields adding placeholder and removing the labels. Here are the codes but this also does not help me solve the issue.
function add_wc_custom_fields($fields) {
global $woocommerce;
$countries_obj = new WC_Countries();
$countries = $countries_obj->__get('countries');
$fields['billing']['billing_first_name'] = array(
'label' => '',
'placeholder' => _x('First Name*', 'placeholder', 'woocommerce'),
'required' => true,
'class' => array( 'form-row-first' ),
);
$fields['billing']['billing_last_name'] = array(
'label' => '',
'placeholder' => _x('last Name*', 'placeholder', 'woocommerce'),
'required' => true,
'class' => array( 'form-row-last' ),
);
$fields['billing']['billing_company'] = array(
'label' => '',
'placeholder' => _x('Company Name', 'placeholder', 'woocommerce'),
'required' => false,
'class' => array('checkout-billing-company')
);
$fields['billing']['billing_address_1'] = array(
'label' => '',
'placeholder' => _x('Address(Line 1)*', 'placeholder', 'woocommerce'),
'required' => true,
'class' => array('checkout-billing-addressL1')
);
$fields['billing']['billing_address_2'] = array(
'label' => '',
'placeholder' => _x('Address(Line 2)*', 'placeholder', 'woocommerce'),
'required' => false,
'class' => array('checkout-billing-addressL2')
);
$fields['billing']['billing_email'] = array(
'label' => '',
'placeholder' => _x('Email Address*', 'placeholder', 'woocommerce'),
'required' => true,
'class' => array('form-row-first')
);
$fields['billing']['billing_phone'] = array(
'label' => '',
'placeholder' => _x('Phone Number', 'placeholder', 'woocommerce'),
'required' => false,
'class' => array('form-row-last')
);
$fields['billing']['billing_city'] = array(
'label' => '',
'placeholder' => _x('Town/City', 'placeholder', 'woocommerce'),
'required' => false,
'class' => array('form-row-first')
);
$fields['billing']['billing_state'] = array(
'label' => '',
'placeholder' => _x('State/County', 'placeholder', 'woocommerce'),
'required' => false,
'class' => array('form-row-first')
);
$fields['billing']['billing_postcode'] = array(
'label' => '',
'placeholder' => _x('Zip/Postcode', 'placeholder', 'woocommerce'),
'required' => false,
'class' => array('form-row-first')
);
$fields['billing']['billing_country'] = array(
'label' => '',
'type' => 'select',
'placeholder' => _x('Country', 'placeholder', 'woocommerce'),
'required' => false,
'class' => array('form-row-last'),
'options' => $countries
);
return $fields;
}
add_filter('woocommerce_checkout_fields', 'add_wc_custom_fields');
回答1:
we can use the filter 'woocommerce_form_field_' . $type... where $type is the type of the input... in our case billing_company is of type text... this filter returns the html of the field, in our case billing field, billing_company.. the filter has 4 arguments being passed, these are $field, $key, $args, $value... we just need two of these...
add_action( 'woocommerce_form_field_text','reigel_custom_heading', 10, 2 );
function reigel_custom_heading( $field, $key ){
// will only execute if the field is billing_company and we are on the checkout page...
if ( is_checkout() && ( $key == 'billing_company') ) {
$field .= '<div id="add_custom_heading"><h2>' . __('Custom Heading Here') . '</h2></div>';
}
return $field;
}
回答2:
Instead of hooking into an existing woocommerce_form_field_<field_type> filter such as woocommerce_form_field_text, I prefer to use the woocommerce_form_field_<field_type> filter to create a new field type. This allows us to add HTML output for an additional field type (and therefore we can use HTML output for a heading instead) and we can use this new heading "field type" when modifying checkout fields with the woocommerce_checkout_fields filter.
// Add field type to WooCommerce form field
add_filter( 'woocommerce_form_field_heading','sc_woocommerce_form_field_heading', 10, 4 );
function sc_woocommerce_form_field_heading($field, $key, $args, $value) {
$output = '<h3 class="form-row form-row-wide">'.__( $args['label'], 'woocommerce' ).'</h3>';
echo $output;
}
// Modify checkout fields
add_filter( 'woocommerce_checkout_fields','custom_override_checkout_fields' );
function custom_override_checkout_fields( $fields ) {
$fields['billing']['billing_heading_name'] = array(
'type' => 'heading',
'label' => 'Heading here',
);
Using the above method the solution to the original question would be:
add_filter('woocommerce_checkout_fields', 'ac_checkout_reorder_fields');
function ac_checkout_reorder_fields($fields) {
$fields['billing']['billing_heading_name'] = array(
'type' => 'heading',
'label' => 'Heading here',
);
$order = array(
"billing_first_name",
"billing_last_name",
"billing_heading_name",
"billing_company",
"billing_email",
"billing_phone",
"billing_address_1",
"billing_address_2",
"billing_postcode",
"billing_country"
);
foreach($order as $field) {
$ordered_fields[$field] = $fields["billing"][$field];
}
$fields["billing"] = $ordered_fields;
return $fields;
}
回答3:
add_filter('woocommerce_form_field', 'mmodify_wc_checkout_pge', 10, 4);
function mmodify_wc_checkout_pge($field, $key, $args, $value = null) {
switch ($key) {
case 'billing_email':
$a = '<p class="form-row form-row-wide" id="main_heading" data-priority="110"><label for="" class="main-address" style="font-weight:bold; font-size:22px;">Main address </label></p>';
return $a . $field;
break;
default:
return $field;
break;
}
}
来源：https://stackoverflow.com/questions/35811301/how-to-add-a-heading-in-between-checkout-fields-of-woocommerce