How to change field's label on checkout page in woocommerce? - wordpress

I am using wordpress for the first time. There is overwhelming information available about How to do stuff in WordPress. I want to simply change the label of postal code/zip field on check out page. Here are the steps i followed:
1>Installed woocommerce plugin
2>Imported Dummy Data
3>Installed Astra Starter Template Plugin
4>Installed Brandstore theme
5>Created my own child theme as per guidelines
Tested site. At this point everything working fine.
Now i want to simply change the lable for "Postalcode/Zip" on chekout page
So as per the woocommerce guidelines i added the following code in child theme's functions.php
// Hook in
add_filter( 'woocommerce_checkout_fields' , 'custom_override_checkout_fields',100 );
// Our hooked in function - $fields is passed via the filter!
function custom_override_checkout_fields( $fields ) {
$fields['billing']['billing_postcode']['label'] = 'Postal Code';
return $fields;
}
When i refresh page it did not change the label.
Q1> How do i change field lable on checkout page.
Q2> where is template located for checkout page? Look like checkout page is using
[woocommerce_checkout] code

/**
* Add the field to the checkout
*/
add_action( 'woocommerce_after_order_notes', 'my_custom_checkout_field' );
function my_custom_checkout_field( $checkout ) {
echo '<div id="my_custom_checkout_field"><h2>' . __('My Field') . '</h2>';
woocommerce_form_field( 'my_field_name', array(
'type' => 'text',
'class' => array('my-field-class form-row-wide'),
'label' => __('Fill in this field'),
'placeholder' => __('Enter something'),
), $checkout->get_value( 'my_field_name' ));
echo '</div>';
}
visit Official Documentation

Related

How do I create a shortcode for a WordPress sidebar?

I have added a custom sidebar to my WordPress installation using the following script that also creates a shortcode:
// Register Sidebars
function custom_sidebars() {
$args = array(
'id' => 'gutenbar',
'class' => 'abeng',
'name' => __( 'Abeng sidebar', 'text_domain' ),
'description' => __( 'Sidebar for block', 'text_domain' ),
);
register_sidebar( $args );
}
add_action( 'widgets_init', 'custom_sidebars' );
add_shortcode( 'add_sidebar', 'custom_sidebars' );
When I add the [add_sidebar] shortcode to a Gutenberg block the sidebar does not appear. However, when I use a plugin called Sidebar Shortcode [sidebar id="gutenbar"] the sidebar is displayed perfectly. I assume that my shortcode is associated with a specific function and does not need a name or id for the sidebar to be chosen.
I had been thinking that because the sidebar was added using a plugin that allows the insertion of functions available site-wide rather than only in a theme using its functions.php, that was the reason the shortcode did not do its job. But since the sidebar shows in the widgets area and allowed me to add widgets, and now works with this plugin, that's obviously not the issue.
Looking under the hood of the concisely written Sidebar Shortcode, I can't see what I might want to add to make my code functional.
Why am I doing this? I'm using full-width pages for my posts, disabling the theme's default right sidebar (which doesn't play well in a responsive design) but still need to reinsert the sidebar in a column.
Thanks for any help.
With the help of Prashant Singh on the WordPress support forum, I learned that the function that creates the sidebar cannot be used to create a shortcode to place it on a page. The shortcode has to be created calling the WP native function dynamic_sidebar() that gives access to all sidebars (https://developer.wordpress.org/reference/functions/dynamic_sidebar/). Below is the full script that includes cleanup code to allow the correct positioning inside a page.
/**
* Create sidebar and shortcode
*/
// Register Sidebars
function custom_sidebars() {
$args = array(
'id' => 'gutenbar',
'class' => '',
'name' => __( 'Abeng sidebar', 'text_domain' ),
'description' => __( 'Sidebar for block', 'text_domain' ),
);
register_sidebar( $args );
}
add_action( 'widgets_init', 'custom_sidebars' );
/* Add the shortcode and allow positioning in page*/
add_shortcode( 'add_sidebar', 'my_custom_sidebar' );
function my_custom_sidebar(){
ob_start();
dynamic_sidebar( 'gutenbar');
$sidebar_left = ob_get_clean();
$html = ' <div class="sidebar-content"> ' . $sidebar_left . ' </div> ';
return $html;
}

How to have custom checkout fields in ajax checkout in woocommerce

I have an Ajax checkout on my woocommerce installation and I am trying to capture the custom fields on the checkout. I am using below code to try to capture the field called add_gift_box, the field appears fine on my checkout page.
add_action( 'woocommerce_checkout_update_order_meta', 'my_custom_checkout_field_update_order_meta' );
function my_custom_checkout_field_update_order_meta( $order_id ) {
if ($_POST['add_gift_box']) {
update_post_meta( $order_id, '_add_gift_box', esc_attr($_POST['add_gift_box']));
}
}
When I press "place order" button it creates a new order but the value of this field does not get saved in the database. I don't think even the hook gets fired. As I said everything is being handled by Ajax. The checkout page is one page checkout.
I need help sorting this out. Thanks in advance.
UPDATE
I am setting the field as follows:
add_action( 'woocommerce_after_checkout_billing_form', 'add_box_option_to_checkout' );
function add_box_option_to_checkout( $checkout ) {
woocommerce_form_field( 'add_gift_box', array(
'type' => 'radio',
'class' => array('add_gift_box form-row-wide'),
'label_class' => array('checkbox'),
'input_class' => array('input-checkbox'),
'required' => true,
'options' => array(
'option_1' => 'option1</br>' ,
'option_2' =>'option2</br>',
'option_3' =>'option3</br>',
'option_4' =>'option4</br>',
'option_5' =>'option5</br>',
'option_6' =>'option6</br>',
'option_7' =>'option7</br>',
),
'label' => __('Select Option'),
'placeholder' => __(''),
), $checkout->get_value( 'add_gift_box' ));
}
here is a plugin to add custom field on checkout page woocomerce https://wordpress.org/plugins/woo-custom-checkout-field/
or if you want to add by code you can follow codding from here
https://www.cloudways.com/blog/custom-field-woocommerce-checkout-page/
add_action('woocommerce_after_order_notes', 'customise_checkout_field');
function customise_checkout_field($checkout)
{
echo '<div id="customise_checkout_field"><h2>' . __('Heading') . '</h2>';
woocommerce_form_field('customised_field_name', array(
'type' => 'text',
'class' => array(
'my-field-class form-row-wide'
) ,
'label' => __('Customise Additional Field') ,
'placeholder' => __('Guidence') ,
'required' => true,
) , $checkout->get_value('customised_field_name'));
echo '</div>';
}
Do you have a plugin activated which creates the order by hooking into woocommerce_create_order filter? I don't see any other reason why add_gift_box isn't saved or why woocommerce_checkout_update_order_meta isn't firing.
The original code from includes/class-wc-checkout.php is
/**
* Action hook to adjust order before save.
* #since 3.0.0
*/
do_action( 'woocommerce_checkout_create_order', $order, $data );
// Save the order.
$order_id = $order->save();
do_action( 'woocommerce_checkout_update_order_meta', $order_id, $data );
So, you could create log files in your themes directory to see which hooks are firing like this:
add_action('woocommerce_checkout_update_order_meta', function ($order_id) {
file_put_contents(__DIR__ . '/woocommerce_checkout_update_order_meta.log', 'woocommerce_checkout_update_order_meta fired for order id ' . $order_id);
});
add_action('woocommerce_checkout_create_order', function () {
file_put_contents(__DIR__ . '/woocommerce_checkout_create_order.log', 'woocommerce_checkout_create_order fired');
});

Register widget area above posts in WordPress Genesis child theme

I have a Genesis child theme that I'm working on (here's my test site) and I can't seem to figure out how to register a widget area above the posts. I see a lot of tutorials (like this one) that show how to add one that spans both columns (posts & sidebar), but I'd like to have one that is only above the posts, not the sidebar.
Looking at these hooks, it would be in the genesis_before_loop hook I believe. I tried tweaking the code in the tutorial I linked to but it didn't work out. Does anyone have the code or link to a better tutorial?
This is code I'm trying to use but it's not working:
/**
* Add widget above posts.
*/
//* Add widget above posts
add_action( 'genesis_loop’, ‘above_posts’ );
function above_posts() {
if (is_active_sidebar( ‘aboveposts’ )) {
genesis_widget_area( ‘aboveposts’, array(
'before' => '<div class=“aboveposts widget-area"><div class="wrap"',
'after' => '</div></div>'
) );
}
}
//* Register widget above posts areas
genesis_register_sidebar( array(
'id' => ‘aboveposts’,
'name' => __( ‘Above Posts’ ),
'description' => __( 'This is the above posts widget.’ ),
) );

Add Tax Exempt form on checkout in woocommerce

I am trying to add a form to my checkout page so when a user clicks the 'Tax Exempt' checkbox, a textbox will popup and ask the user what the Tax Exempt Id number is.
I got all of that working great, and I even added the update_totals_on_change class to my form field so it will update the totals.
My next step was to add an action/filter on a method so when the update_totals_on_change executes, I can set the tax to 0 and then it will finish calculating the total.
Does anyone know which functions I can hook on to?
Looking at the checkout.js file in WooCommerce, they set the action to woocommerce_update_order_review for the ajax operation.
I tried following that but soon got lost.
I was thinking I could add some post data by hooking in to woocommerce_checkout_update_order_review
and then hooking in to woocommerce_before_calculate_totals to modify the tax stuff, but I have no idea what I need to modify.
Am I even on the right path?
Alright, I finally figured it out in case anyone is interested.
In my plugin, I made a form after the order notes by hooking in to this function: 'woocommerce_before_order_notes'
add_action('woocommerce_before_order_notes', array(&$this, 'taxexempt_before_order_notes') );
my 'taxexempt_before_order_notes' function contained:
function taxexempt_before_order_notes( $checkout ) {
echo '<div style="clear: both"></div>
<h3>Tax Exempt Details</h3>';
woocommerce_form_field( 'tax_exempt_checkbox', array(
'type' => 'checkbox',
'class' => array('tiri taxexempt'),array( 'form-row-wide', 'address-field' ),
'label' => __('Tax Exempt'),
), $checkout->get_value( 'tax_exempt_checkbox' ));
woocommerce_form_field( 'tax_exempt_name', array(
'type' => 'text',
'class' => array('form-row-first', 'tiri', 'taxexempt', 'textbox', 'hidden'),
'label' => __('Tax Exempt Name'),
), $checkout->get_value( 'tax_exempt_name' ));
woocommerce_form_field( 'tax_exempt_id', array(
'type' => 'text',
'class' => array('form-row-last', 'tiri', 'taxexempt', 'textbox', 'hidden', 'update_totals_on_change'),
'label' => __('Tax Exempt Id'),
), $checkout->get_value( 'tax_exempt_id' ));
}
Then the most important woocommerce function to hook was: 'woocommerce_checkout_update_order_review'
add_action( 'woocommerce_checkout_update_order_review', array(&$this, 'taxexempt_checkout_update_order_review' ));
function taxexempt_checkout_update_order_review( $post_data ) {
global $woocommerce;
$woocommerce->customer->set_is_vat_exempt(FALSE);
parse_str($post_data);
if ( isset($tax_exempt_checkbox) && isset($tax_exempt_id) && $tax_exempt_checkbox == '1' && !empty($tax_exempt_id))
$woocommerce->customer->set_is_vat_exempt(true);
}
I simply parsed out the $post_data that is the serialized form data from the checkout.js file in woocommerce and checked if my part of the form was filled out correctly.
If it was, then I would set the tax exempt for the user.
The accepted solution didn't work for me, but I modified it to use the following:
//=============================================================================
// ADD TAX EXEMPT CHECKMARK
// =============================================================================
add_action( 'woocommerce_after_order_notes', 'qd_tax_exempt');
function qd_tax_exempt( $checkout ) {
echo '<div id="qd-tax-exempt"><h3>'.__('Tax Exempt').'</h3>';
woocommerce_form_field( 'shipping_method_tax_exempt', array(
'type' => 'checkbox',
'class' => array(),
'label' => __('My organization is tax exempt.'),
'required' => false,
), $checkout->get_value( 'shipping_method_tax_exempt' ));
echo '</div>';
}
add_action( 'woocommerce_checkout_update_order_review', 'taxexempt_checkout_update_order_review');
function taxexempt_checkout_update_order_review( $post_data ) {
global $woocommerce;
$woocommerce->customer->set_is_vat_exempt(FALSE);
parse_str($post_data);
if ( isset($shipping_method_tax_exempt) && $shipping_method_tax_exempt == '1')
$woocommerce->customer->set_is_vat_exempt(true);
}
The key here is understanding that any field with a name that starts with shipping_method is going to inherit this updating order functionality (which was the part that didn't work for me). I found this answer at http://www.affectivia.com/blog/have-a-checkbox-on-the-checkout-page-which-updates-the-order-totals/
After a long search I found that there is a method for the cart object called remove_taxes() .
So, after setting a user meta for the tax exempt users, this cancels the tax totals.
function remove_tax_for_exempt( $cart ) {
global $current_user;
$ok_taxexp = get_the_author_meta( 'granted_taxexempt', $current_user->ID );
if ($ok_taxexp){ // now 0 the tax if user is tax exempt
$cart->remove_taxes();
}
return $cart;
}
add_action( 'woocommerce_calculate_totals', 'remove_tax_for_exempt' );
Because $cart->remove_taxes(); is deprecated. This is what I used instead.
I didn't have a form on the frontend, but have a user roll that is tax exempt. This was my solution.
Also worth noting that set_is_vat_exempt(true) also works in the US to set as tax exempt.
/**
* Set customer as tax exempt if user is a wholesale customer
*/
function remove_tax_for_exempt( $cart ) {
global $woocommerce;
if ( is_user_logged_in() && current_user_can( 'wholesale_customer' ) ) {
$woocommerce->customer->set_is_vat_exempt(true);
}
return $cart;
}
add_action( 'woocommerce_calculate_totals', 'remove_tax_for_exempt' );
Since this answer still pops up on google, I thought I'd share that setting the customer as tax exempt only works during checkout, if you need to edit the order on the back-end after it is placed and use the "recalculate" button, the taxes will still appear. Fortunately there is a hook for this as well:
function remove_tax_for_exempt($exempt, $order){
return $exempt || user_can($order->get_user_id(), 'wholesale_customer');
}
add_filter('woocommerce_order_is_vat_exempt', 'remove_tax_for_exempt', 10, 2);

Show custom field on order in woocommerce

Im working on a webshop and follwoing this tutorial http://wcdocs.woothemes.com/snippets/tutorial-customising-checkout-fields-using-hooks-and-filters/ to add some customes fields to my billing.
// Hook in
add_filter( 'woocommerce_checkout_fields' , 'custom_override_checkout_fields' );
// Our hooked in function - $fields is passed via the filter!
function custom_override_checkout_fields( $fields ) {
$fields['billing']['billing_gls_name'] = array(
'label' => __('Name for pickup person', 'woocommerce'),
'placeholder' => _x('Name', 'placeholder', 'woocommerce'),
'required' => true,
'class' => array('form-row-wide'),
'clear' => true
);
return $fields;
}
This adds my field. So far so good. So my problem is:
How can I view this new field in the orders view? Details for billing only show the usual billing fields.
The first answer (Cesar) was CLOSE to being correct. In case anyone ever comes across this old post trying to find out the same thing, below is the code needed to insert into your functions.php file after the code given by the original poster, tailored to his/her variables as provided. Note that they use the field name "billing_gls_name" and that this is referenced in our new function as "_billing_gls_name". The extra "_" at the beginning is necessary. This works on Wordpress 3.5.1 running WooCommerce 2.0.3.
function your_custom_field_function_name($order){
echo "<p><strong>Name of pickup person:</strong> " . $order->order_custom_fields['_billing_gls_name'][0] . "</p>";
}
add_action( 'woocommerce_admin_order_data_after_billing_address', 'your_custom_field_function_name', 10, 1 );
After defining your custom field (that you did in your code mentioned above), add the code mentioned below to:
Process your field
Save it in the database as Order meta data
Display it in the 'Order details' in the Woocommerce->Orders section
Process your field:
add_action('woocommerce_checkout_process', 'my_custom_checkout_field_process');
function my_custom_checkout_field_process() {
if (!$_POST['billing']['billing_gls_name']) {
wc_add_notice(__('Please tell us the Location Type that we are billing to.'), 'error');
}
}
Save Field in the DB as Order Meta Data:
add_action('woocommerce_checkout_update_order_meta','my_custom_checkout_field_update_order_meta');
function my_custom_checkout_field_update_order_meta($order_id) {
if (!empty($_POST['billing']['billing_gls_name'])) {
update_post_meta($order_id, 'Billing Gls Name', esc_attr($_POST['billing']['billing_gls_name_type']));
}
}
And finally display it in the Order details screen:
add_action('woocommerce_admin_order_data_after_billing_address', 'my_custom_billing_fields_display_admin_order_meta', 10, 1);
function my_custom_billing_fields_display_admin_order_meta($order) {
echo '<p><strong>' . __('Billing Gls Name') . ':</strong><br> ' . get_post_meta($order->id, '_billing_gls_name', true) . '</p>';
}
Adding the action woocommerce_admin_order_data_after_billing_address you can insert some data after billing info. Custom fields are under $order->order_custom_fields array.
function display_rfc_in_order_metabox($order){
echo "<p><strong>RFC:</strong> {$order->order_custom_fields['_billing_rfc'][0]}</p>";
}
add_action( 'woocommerce_admin_order_data_after_billing_address', 'rxm_details_to_order', 10, 1 );

Resources