How one can Customise Woocommerce Checkout web page? 31 helpful hacks

On this publish I’m going to indicate you learn how to customise Woocommerce checkout web page. These 28 hacks proven right here under are actually helpful for each Woocommerce store, and they’re very easy to make use of.

So as to use all these snippets proven on this publish you want add them inside your baby theme’s features.php file or higher but, use Code Snippets plugin. This manner you’re not going to lose these modifications in case you’re switching your theme.

There may be additionally a WpCodeBox plugin, which is my favourite code snippets supervisor for WordPress. It is a premium plugin and if you happen to’re , then seize WPCodeBox with a pleasant 20% low cost right here (SAVE 20% Coupon WPSH20).

Additionally, check out the video tutorial right here under after which it should most likely be a bit simpler to grasp what’s what.

Video: How one can Customise Woocommerce Checkout web page

I strongly recommend you to observe this video first as a result of it should make your life a bit simpler. Within the video I’m exhibiting learn how to customise Woocommerce checkout web page and implement all these hacks and modifications.

How one can Auto verify “Create account” discipline in Woocommerce Checkout web page?

Lets begin with the straightforward hack which lets you auto verify “Create account” discipline in Woocommerce checkout web page. Simply use this snippet and the result’s just like the one within the screenshot.

Auto check Create account field in Woocommerce Checkout

// Auto verify "Create account" discipline in Woocommerce Checkout web page
add_filter('woocommerce_create_account_default_checked' , operate ($checked){
    return true;
});

How one can add “Proceed buying” button in Woocommerce checkout web page?

Check out the screenshot under and you will notice what sort of “Proceed buying” button is added with the assistance of this snippet.

How to add "Continue shopping" button in Woocommerce checkout page?
<span function="button" tabindex="0" data-code="// Add "Proceed buying" button in Woocommerce checkout web page?
add_action( 'woocommerce_before_checkout_form', 'continue_shopping_button' );
operate continue_shopping_button() {
$shop_page_url = get_permalink( woocommerce_get_page_id( 'store' ) );
echo '<div class="woocommerce-message">';
echo ' <a href="'.$shop_page_url.'" class="button">Continua buying →</a> Did you overlook one thing so as to add?';
echo '

// Add "Proceed buying" button in Woocommerce checkout web page?
add_action( 'woocommerce_before_checkout_form', 'continue_shopping_button' );
operate continue_shopping_button() {
 $shop_page_url = get_permalink( woocommerce_get_page_id( 'store' ) );
 echo '<div class="woocommerce-message">';
 echo ' <a href="'.$shop_page_url.'" class="button">Continua buying →</a> Did you overlook one thing so as to add?';
 echo '</div>';
}

How one can add Customized Woocommerce Checkout Message?

Now let’s have a look learn how to customise Woocommerce checkout web page with the customized message.

This snippet right here under provides customized Woocommerce checkout message on prime of the checkout web page. Simply change the message content material (“Estimated supply time: 2 weeks”) accordingly.

<span function="button" tabindex="0" data-code="// Add Customized Woocommerce Checkout Message
add_action( 'woocommerce_before_checkout_form', 'shop_message', 20 );
operate shop_message() {
echo '<p class="woocommerce-message">Estimated supply time: 2 weeks

// Add Customized Woocommerce Checkout Message
add_action( 'woocommerce_before_checkout_form', 'shop_message', 20 );
operate shop_message() {
echo '<p class="woocommerce-message">Estimated supply time: 2 weeks</p>'; // Substitute your message right here
}

How one can show a Woocommerce checkout message for particular nation?

Earlier snippet confirmed customized message on prime of the Woocommerce checkout web page however this message is proven provided that particular nation is chosen. For instance, if you happen to select United Kingdom as you nation then “Please enable 5-10 enterprise days for supply after order processing.” message is proven on prime of the Woocommerce checkout kind.

Simply change your nation code in line 17 (At the moment set to EE) and message content material and also you’re good to go. Concentrate although that this snippet right here exhibits ONE message for ONE particular nation. If you need to indicate the identical message for a number of international locations, then see the following snippet.

<span function="button" tabindex="0" data-code="// Show a Woocommerce checkout message for particular nation

add_action( 'woocommerce_checkout_before_customer_details', 'display_shipping_notice' );
operate display_shipping_notice() {
echo '<div class="shipping-notice woocommerce-message" function="alert" model="show:none">Please enable 5-10 enterprise days for supply after order processing.</div>';
}

add_action( 'woocommerce_after_checkout_form', 'show_shipping_notice_js' );
operate show_shipping_notice_js(){
?>
<script>
jQuery(operate($){
countryField = 'choose#billing_country'; // The Discipline selector to focus on
var countryCode = $(countryField).val();
/* Change the nation code EE accordingly */
operate showHideShippingNotice( countryCode, countryField ){
if( $(countryField).val() === 'EE'
){
$('.shipping-notice').present();
}
else {
$('.shipping-notice').disguise();
}
}

// On Prepared (after DOM is loaded)
showHideShippingNotice( countryCode, countryField );

// On billing nation change (Stay occasion)
$('kind.checkout').on('change', countryField, operate() {
showHideShippingNotice( countryCode, countryField );
});
});
</script>

// Show a Woocommerce checkout message for particular nation

add_action( 'woocommerce_checkout_before_customer_details', 'display_shipping_notice' );
operate display_shipping_notice() {
    echo '<div class="shipping-notice woocommerce-message" function="alert" model="show:none">Please enable 5-10 enterprise days for supply after order processing.</div>';
}

add_action( 'woocommerce_after_checkout_form', 'show_shipping_notice_js' );
operate show_shipping_notice_js(){
    ?>
    <script>
        jQuery(operate($){
            countryField = 'choose#billing_country'; // The Discipline selector to focus on
		  	var countryCode = $(countryField).val();
            /* Change the nation code EE accordingly */
            operate showHideShippingNotice( countryCode, countryField ){
                if( $(countryField).val() === 'EE' 
				  ){
                    $('.shipping-notice').present();
                }
                else {
                    $('.shipping-notice').disguise();
                }
            }

            // On Prepared (after DOM is loaded)
            showHideShippingNotice( countryCode, countryField );

            // On billing nation change (Stay occasion)
            $('kind.checkout').on('change', countryField, operate() {
                showHideShippingNotice( countryCode, countryField );
            });
        });
    </script>
    <?php
}

So, with the assistance of this snippet right here under you possibly can show the identical message for the a number of international locations. So, as soon as once more, go to line 17 which accommodates your first nation (at present EE). Now add extra nation by including this line 

|| $(countryField).val() === 'FI' .

If you want to add extra international locations then simply repeat this step.

As soon as once more, don’t overlook to alter the nation code. So, if you happen to check out the total snippet then you definately’ll see that it shows a Woocommerce checkout message for a number of international locations.

<span function="button" tabindex="0" data-code="// Show a Woocommerce checkout message for a number of international locations

add_action( 'woocommerce_checkout_before_customer_details', 'display_shipping_notice' );
operate display_shipping_notice() {
echo '<div class="shipping-notice woocommerce-message" function="alert" model="show:none">Please enable 5-10 enterprise days for supply after order processing.</div>';
}

add_action( 'woocommerce_after_checkout_form', 'show_shipping_notice_js' );
operate show_shipping_notice_js(){
?>
<script>
jQuery(operate($){
countryField = 'choose#billing_country'; // The Discipline selector to focus on
var countryCode = $(countryField).val();

operate showHideShippingNotice( countryCode, countryField ){
if( $(countryField).val() === 'EE'
|| $(countryField).val() === 'FI'
|| $(countryField).val() === 'LV'
){
$('.shipping-notice').present();
}
else {
$('.shipping-notice').disguise();
}
}

// On Prepared (after DOM is loaded)
showHideShippingNotice( countryCode, countryField );

// On billing nation change (Stay occasion)
$('kind.checkout').on('change', countryField, operate() {
showHideShippingNotice( countryCode, countryField );
});
});
</script>

// Show a Woocommerce checkout message for a number of international locations

add_action( 'woocommerce_checkout_before_customer_details', 'display_shipping_notice' );
operate display_shipping_notice() {
    echo '<div class="shipping-notice woocommerce-message" function="alert" model="show:none">Please enable 5-10 enterprise days for supply after order processing.</div>';
}

add_action( 'woocommerce_after_checkout_form', 'show_shipping_notice_js' );
operate show_shipping_notice_js(){
    ?>
    <script>
        jQuery(operate($){
            countryField = 'choose#billing_country'; // The Discipline selector to focus on
		  	var countryCode = $(countryField).val();
            
            operate showHideShippingNotice( countryCode, countryField ){
                if( $(countryField).val() === 'EE' 
				   	 || $(countryField).val() === 'FI'
				   	 || $(countryField).val() === 'LV'
				  ){
                    $('.shipping-notice').present();
                }
                else {
                    $('.shipping-notice').disguise();
                }
            }

            // On Prepared (after DOM is loaded)
            showHideShippingNotice( countryCode, countryField );

            // On billing nation change (Stay occasion)
            $('kind.checkout').on('change', countryField, operate() {
                showHideShippingNotice( countryCode, countryField );
            });
        });
    </script>
    <?php
}

How one can show completely different Woocommerce checkout messages for various international locations?

What if you need to show completely different Woocommerce checkout messages for various international locations? Effectively, check out the snippet under. PS! Ensure to check out the feedback contained in the snippet

<span function="button" tabindex="0" data-code="// Show completely different Woocommerce checkout messages for various international locations

add_action( 'woocommerce_checkout_before_customer_details', 'display_shipping_notice' );
operate display_shipping_notice() {
/* Message for EE (see CSS class shipping-notice) */
echo '<div class="shipping-notice woocommerce-message" function="alert" model="show:none">Please enable 5-10 enterprise days for supply after order processing.</div>';
/* Message for FI (see CSS class shipping-notice-fi) */
echo '<div class="shipping-notice-fi woocommerce-message" function="alert" model="show:none">Please enable 20-30 enterprise days for supply after order processing.</div>';
/* Message for EE (see CSS class shipping-notice-lv) */
echo '<div class="shipping-notice-lv woocommerce-message" function="alert" model="show:none">Please enable 50 enterprise days for supply after order processing.</div>';
}

add_action( 'woocommerce_after_checkout_form', 'show_shipping_notice_js' );
operate show_shipping_notice_js(){
?>
<script>
jQuery(operate($){
countryField = 'choose#billing_country'; // The Discipline selector to focus on
var countryCode = $(countryField).val();

operate showHideShippingNotice( countryCode, countryField ){
if( $(countryField).val() === 'EE' // Change the nation code
){
$('.shipping-notice').present(); // Show for EE
$('.shipping-notice-fi').disguise(); // Cover for FI
$('.shipping-notice-lv').disguise(); // Cover for LV
} else if( $(countryField).val() === 'FI' // Change the nation code
){
$('.shipping-notice-fi').present(); // Show for FI
$('.shipping-notice').disguise(); // Cover for EE
$('.shipping-notice-lv').disguise(); // // Cover for LV
} else if( $(countryField).val() === 'LV' // Change the nation code
){
$('.shipping-notice-lv').present(); // Show for LV
$('.shipping-notice').disguise(); // Cover for EE
$('.shipping-notice-fi').disguise(); // Cover for FI
} else {
/* Cover these messages for some other international locations */
$('.shipping-notice').disguise();
$('.shipping-notice-fi').disguise();
$('.shipping-notice-lv').disguise();
}
}
// On Prepared (after DOM is loaded)
showHideShippingNotice( countryCode, countryField );

// On billing nation change (Stay occasion)
$('kind.checkout').on('change', countryField, operate() {
showHideShippingNotice( countryCode, countryField );
});
});
</script>

// Show completely different Woocommerce checkout messages for various international locations

add_action( 'woocommerce_checkout_before_customer_details', 'display_shipping_notice' );
operate display_shipping_notice() {
	/* Message for EE (see CSS class shipping-notice) */
   	echo '<div class="shipping-notice woocommerce-message" function="alert" model="show:none">Please enable 5-10 enterprise days for supply after order processing.</div>';
	/* Message for FI (see CSS class shipping-notice-fi) */
   	echo '<div class="shipping-notice-fi woocommerce-message" function="alert" model="show:none">Please enable 20-30 enterprise days for supply after order processing.</div>';
	/* Message for EE (see CSS class shipping-notice-lv) */
	echo '<div class="shipping-notice-lv woocommerce-message" function="alert" model="show:none">Please enable 50 enterprise days for supply after order processing.</div>';
}

add_action( 'woocommerce_after_checkout_form', 'show_shipping_notice_js' );
operate show_shipping_notice_js(){
    ?>
    <script>
        jQuery(operate($){
            countryField = 'choose#billing_country'; // The Discipline selector to focus on
		  	var countryCode = $(countryField).val();
            
            operate showHideShippingNotice( countryCode, countryField ){
				if( $(countryField).val() === 'EE' // Change the nation code 
				  ){
					$('.shipping-notice').present(); // Show for EE
					$('.shipping-notice-fi').disguise(); // Cover for FI
					$('.shipping-notice-lv').disguise(); // Cover for LV
				} else if( $(countryField).val() === 'FI' // Change the nation code 
						){
					$('.shipping-notice-fi').present(); // Show for FI
					$('.shipping-notice').disguise(); // Cover for EE
					$('.shipping-notice-lv').disguise(); // // Cover for LV
				} else if( $(countryField).val() === 'LV' // Change the nation code 
						){
					$('.shipping-notice-lv').present(); // Show for LV
					$('.shipping-notice').disguise(); // Cover for EE
					$('.shipping-notice-fi').disguise(); // Cover for FI
				} else {
					/* Cover these messages for some other international locations */
                    $('.shipping-notice').disguise();
					$('.shipping-notice-fi').disguise();
					$('.shipping-notice-lv').disguise();
                }
            }
            // On Prepared (after DOM is loaded)
            showHideShippingNotice( countryCode, countryField );

            // On billing nation change (Stay occasion)
            $('kind.checkout').on('change', countryField, operate() {
                showHideShippingNotice( countryCode, countryField );
            });
        });
    </script>
    <?php
}

How one can Present backorder notification at Woocommerce checkout web page

A few of my buyer have complained that they didn’t notice that they ordered a product which was not in inventory and was out there solely on backorder. Since I wished to made it much less complicated for them I added this snippet right here under which exhibits backorder notification in Woocommerce checkout web page. therefore, I’m going to indicate you learn how to customise Woocommerce checkout web page with this little hack.

As you see from the screenshot under it outputs this message styled as error message. In order for you it to indicate as default Woocommerce message notification then change ‘error’ with ‘discover’

How to add Woocommerce backorder notification in cart page?
<span function="button" tabindex="0" data-code="// Present Woocommerce backorder notification in checkout web page
add_action( 'woocommerce_before_checkout_form', 'show_backorder_checkout_notice' );
operate show_backorder_checkout_notice() {
$discovered = false;
foreach( WC()->cart->get_cart() as $cart_item ) {
if( $cart_item['data']->is_on_backorder( $cart_item['quantity'] ) ) {
$discovered = true;
break;
}
}
if( $discovered ) {
// Change this textual content right here. In order for you it to indicate as default Woocommerce message notification then change 'error' with 'discover'
wc_print_notice( __("<robust>You’ve gotten merchandise within the cart which might be out there solely in backorder.</robust>

// Present Woocommerce backorder notification in checkout web page
add_action( 'woocommerce_before_checkout_form', 'show_backorder_checkout_notice' );
operate show_backorder_checkout_notice() {
    $discovered = false;
    foreach( WC()->cart->get_cart() as $cart_item ) {
        if( $cart_item['data']->is_on_backorder( $cart_item['quantity'] ) ) {
            $discovered = true;
            break;
        }
    }
    if( $discovered ) {
// Change this textual content right here. In order for you it to indicate as default Woocommerce message notification then change 'error' with 'discover'
        wc_print_notice( __("<robust>You've gotten merchandise within the cart which might be out there solely in backorder.</robust><br> For these merchandise estimated supply time is 2-3 weeks.", "woocommerce"), 'error' ); 
    }
}

How one can set Minimal Order Quantity in WooCommerce?

With the assistance of this snippet right here under we are going to set a minimal order quantity in Woocommerce to 1000 euros and can show an error message on the cart and checkout pages if the situations will not be met (see the screenshot). Simply change the quantity contained in the code accordingly.

How one can Customise Woocommerce Checkout web page? 31 helpful hacks
<span function="button" tabindex="0" data-code="// Set Minimal Order Quantity in WooCommerce
add_action( 'woocommerce_checkout_process', 'wc_minimum_order_amount' );
add_action( 'woocommerce_before_cart' , 'wc_minimum_order_amount' );

operate wc_minimum_order_amount() {

$minimal = 1000; // Set this variable to specify a minimal order worth

if ( WC()->cart->complete 

// Set Minimal Order Quantity in WooCommerce
add_action( 'woocommerce_checkout_process', 'wc_minimum_order_amount' );
add_action( 'woocommerce_before_cart' , 'wc_minimum_order_amount' );
 
operate wc_minimum_order_amount() {
    
    $minimal = 1000; // Set this variable to specify a minimal order worth

    if ( WC()->cart->complete < $minimal ) {

        if( is_cart() ) {
            wc_print_notice( 
                sprintf( 'Your present order complete is %s — it's essential to have an order with a minimal of %s to put your order ' , 
                    wc_price( WC()->cart->complete ), 
                    wc_price( $minimal )
                ), 'error' 
            );
        } else {
            wc_add_notice( 
                sprintf( 'Your present order complete is %s — it's essential to have an order with a minimal of %s to put your order' , 
                    wc_price( WC()->cart->complete ), 
                    wc_price( $minimal )
                ), 'error' 
            );

        }
    }
}

How one can Show Product Photos at Woocommerce Checkout Web page?

Subsequent, let’s have a look learn how to customise Woocommerce checkout web page with the product photos. By default Woocommerce doesn’t present product photos at checkout web page however if you need to alter it then use this snippet right here under.

How to customize Woocommerce checkout page?
<span function="button" tabindex="0" data-code="// Show Product Photos in Woocommerce Checkout Web page
add_filter( 'woocommerce_cart_item_name', 'display_product_image_checkout', 10, 2 );
operate display_product_image_checkout( $title, $cart_item ) {
if ( ! is_checkout() ) return $title;
$thumbnail = '<span class="product-name__thumbnail" model="float: left; padding-right: 15px">' . get_the_post_thumbnail( $cart_item['product_id'], array( 32, 50 ) ) . '</span>';
return $thumbnail . '<span class="product-name__text">' . $title . '

// Show Product Photos in Woocommerce Checkout Web page
add_filter( 'woocommerce_cart_item_name', 'display_product_image_checkout', 10, 2 );
operate display_product_image_checkout( $title, $cart_item ) {
    if ( ! is_checkout() ) return $title;
    $thumbnail = '<span class="product-name__thumbnail" model="float: left; padding-right: 15px">' . get_the_post_thumbnail( $cart_item['product_id'], array( 32, 50 ) ) . '</span>';
    return $thumbnail . '<span class="product-name__text">' . $title . '</span>';
}

How one can show product attributes in Woocommerce checkout web page?

Now, if you need to show product attributes in Woocommerce checkout web page then use this snippet right here under. It is going to additionally output the attributes in your Woocommerce cart web page.

// Show product attributes in Woocommerce checkout web page
add_filter( 'woocommerce_product_variation_title_include_attributes', 'wpsh_display_attributes', 10, 2 );
operate wpsh_display_attributes( $should_include_attributes, $product ) {
    if ( is_account_page() ) { return $should_include_attributes; }
    return false;
}

How one can auto-apply coupon at Woocommerce Checkout Web page utilizing URL?

At the moment I gives you two choices learn how to auto-apply coupon at Woocommerce checkout web page. First snippet right here under means that you can add a copun utilizing url.

Step 1: add the code snippet

// Auto-apply coupon at Woocommerce Checkout Web page utilizing URL
operate enable_woocommerce_coupon_links(){
	if (!function_exists('WC') || !WC()->session) {
		return;
	}
	$query_var = apply_filters('woocommerce_coupon_links_query_var', 'coupon_code');

	// Bail if a coupon code isn't within the question string.
	if (empty($_GET[$query_var])) {
		return;
	}

	// Set a session cookie to persist the coupon in case the cart is empty.
	WC()->session->set_customer_session_cookie(true);

	// Apply the coupon to the cart if crucial.
	if (!WC()->cart->has_discount($_GET[$query_var])) {

		// WC_Cart::add_discount() sanitizes the coupon code.
		WC()->cart->add_discount($_GET[$query_var]);
	}
}
add_action('wp_loaded', 'enable_woocommerce_coupon_links', 30);
add_action('woocommerce_add_to_cart', 'enable_woocommerce_coupon_links');

Step 2: Use URL that accommodates your coupon code

For instance, when you’ve got a coupon test20 and you utilize URL https://yoursite.com/checkout/?coupon_code=test20 then your coupon is mechanically utilized. Don’t overlook to alter your coupon code accordingly.

Step 2 (non-obligatory): add button that auto-.applies coupon code to your Woocommerce checkout web page

This snippet right here under provides heading “Would you like 20% low cost?” together with the button to your evaluation order kind. If consumer clicks on the button then this Woocommerce coupon is auto-applied. See the screenshot.

How to auto-apply coupon at Woocommerce Checkout Page using URL?
<span function="button" tabindex="0" data-code="// Auto-apply coupon at Woocommerce Checkout Web page utilizing button

add_action( 'woocommerce_review_order_before_payment', 'coupon_button', 10 );
operate coupon_button() {
echo '<h4>Would you like 20% low cost?</h4>';
echo '<p><a category="button" href="?coupon_code=test20"> Click on so as to add your low cost </a>

// Auto-apply coupon at Woocommerce Checkout Web page utilizing button

add_action( 'woocommerce_review_order_before_payment', 'coupon_button', 10 );
operate coupon_button() {
      echo '<h4>Would you like 20% low cost?</h4>';
      echo '<p><a category="button" href="?coupon_code=test20"> Click on so as to add your low cost </a></p>'; // Change the coupon code accordingly
}

How one can Apply a Woocommerce Coupon for Minimal Cart Complete?

It is a barely completely different method than earlier one. On this instance we are going to arrange a coupon referred to as test20 and it’ll give 20% low cost for orders with minimal 50 euros cart complete.

Now, if the cart complete is lower than 50 euros then message “Get 20% off if you happen to spend greater than 50 euros” is mechanically proven on Woocommerce cart and Checkout pages. If the minimal cart complete is greater than 50 euros then this coupon is mechanically utilized and “You simply acquired 20% off your order!” is proven ( see the screenshot).

How to Apply a Woocommerce Coupon for Minimum Cart Total
<span function="button" tabindex="0" data-code="// Apply a Woocommerce Coupon for Minimal Cart Complete
add_action( 'woocommerce_before_cart' , 'add_coupon_notice' );
add_action( 'woocommerce_before_checkout_form' , 'add_coupon_notice' );

operate add_coupon_notice() {

$cart_total = WC()->cart->get_subtotal();
$minimum_amount = 50; // Set your minimal cart complete
$currency_code = get_woocommerce_currency();
wc_clear_notices();

if ( $cart_total 

// Apply a Woocommerce Coupon for Minimal Cart Complete
add_action( 'woocommerce_before_cart' , 'add_coupon_notice' );
add_action( 'woocommerce_before_checkout_form' , 'add_coupon_notice' );

operate add_coupon_notice() {

        $cart_total = WC()->cart->get_subtotal();
        $minimum_amount = 50; // Set your minimal cart complete
        $currency_code = get_woocommerce_currency();
        wc_clear_notices();

       if ( $cart_total < $minimum_amount ) {
              WC()->cart->remove_coupon( 'test20' ); // Substitute your copuon code.
              wc_print_notice( "Get 20% off if you happen to spend greater than $minimum_amount $currency_code!", 'discover' );
        } else {
              WC()->cart->apply_coupon( 'test20' );
              wc_print_notice( 'You simply acquired 20% off your order!', 'discover' );
        }
          wc_clear_notices();
}

How one can take away Woocommerce “Have a coupon?” part from checkout web page?

On this half I’m going to indicate you learn how to customise Woocommerce checkout web page by eradicating “Have a coupon” part.

First possibility, go to Woocommerce >> Settings and uncheck “Allow using coupon codes” possibility. This can disable coupon codes site-wide.

Second possibility, If you need to make use of coupon codes and simply need to take away Woocommerce “Have a coupon?” part from checkout web page then use this small snippet right here.

remove_action( 'woocommerce_before_checkout_form', 'woocommerce_checkout_coupon_form', 10 );

How one can auto-expand coupon discipline on Woocommerce checkout web page? No have to click on on “Have a coupon?” hyperlink

Let’s be sincere: it’s a bit annoying to click on on a “Have a coupon?” hyperlink in your Woocommerce chekcout web page. Due to this fact, let’s auto-expand the coupon discipline and take away another pointless click on.

<span function="button" tabindex="0" data-code="// Auto-expand coupon discipline on Woocommerce checkout web page
add_action( 'wp_footer', 'wpsh_display_coupon_field', 99 );
operate wpsh_display_coupon_field() {
echo '
<script kind="textual content/javascript">
jQuery(doc).prepared(operate($) {
$('.checkout_coupon').present();
});

// Auto-expand coupon discipline on Woocommerce checkout web page
add_action( 'wp_footer', 'wpsh_display_coupon_field', 99 );
operate wpsh_display_coupon_field() {
echo '
<script kind="textual content/javascript">
jQuery(doc).prepared(operate($) {
$('.checkout_coupon').present();
});
</script>
';
}

How one can set default nation at Woocommerce checkout web page?

If you need the nation at Woocommerce checkout web page to be pre-selected after which you possibly can arrange a default nation (United States, fro instance). So, use this snippet.

// Set default nation at Woocommerce checkout web page
add_filter( 'woocommerce_checkout_fields', 'set_default_checkout_city' );
operate set_default_checkout_city($fields) {
  $fields['billing']['billing_country']['default'] = 'US';
    return $fields;
}

How one can set default state and metropolis at Woocommerce checkout web page?

In an analogous approach you possibly can set default setting principally to each discipline. Simply add a discipline title with the worth. Fo instance, $fields[‘billing’][‘billing_state’][‘default’] = ‘UT’; will set default billing state to be Utah and $fields[‘billing’][‘billing_city’][‘default’] = ‘Salt Lake Metropolis’; provides default metropolis as Salt Lake Metropolis.

// Set default nation, state and metropolis at Woocommerce checkout web page
add_filter( 'woocommerce_checkout_fields', 'set_default_checkout_city' );
operate set_default_checkout_city($fields) {
  $fields['billing']['billing_city']['default'] = 'Salt Lake Metropolis';
  $fields['billing']['billing_country']['default'] = 'US';
  $fields['billing']['billing_state']['default'] = 'UT';
    return $fields;
}

How one can disguise checkout fields if Native Pickup is chosen?

Check out the video above as a result of this half is a bit tough one. Within the video I’m exhibiting you learn how to discover pickup strategies to make use of inside this code snippet.

<span function="button" tabindex="0" data-code="/* This piece of code will disguise fields for the chosen technique.
.hide_pickup {
show: none !essential;
}
*/

// Cover Native Pickup delivery technique
add_filter( 'woocommerce_checkout_fields', 'hide_local_pickup_method' );
operate hide_local_pickup_method( $fields_pickup ) {
// change under for the tactic
$shipping_method_pickup ='local_pickup:4';
// change under for the record of fields. Add (or delete) the sphere title you need (or don’t need) to make use of
$hide_fields_pickup = array( 'billing_company', 'billing_country', 'billing_postcode', 'billing_address_1', 'billing_address_2' , 'billing_city', 'billing_state');

$chosen_methods_pickup = WC()->session->get( 'chosen_shipping_methods' );
$chosen_shipping_pickup = $chosen_methods_pickup[0];

foreach($hide_fields_pickup as $field_pickup ) {
if ($chosen_shipping_pickup == $shipping_method_pickup) {
$fields_pickup['billing'][$field_pickup]['required'] = false;
$fields_pickup['billing'][$field_pickup]['class'][] = 'hide_pickup';
}
$fields_pickup['billing'][$field_pickup]['class'][] = 'billing-dynamic_pickup';
}
return $fields_pickup;
}
// Native Pickup – disguise fields
add_action( 'wp_head', 'local_pickup_fields', 999 );
operate local_pickup_fields() {
if (is_checkout()) :
?>

  • How one can disguise firm discipline primarily based on a Woocommerce customized checkout radio choice?
  • How one can use Woocommerce coupons in 23 other ways? (23 easy hacks)
  • How one can Customise Woocommerce Orders web page? (20 hacks)
  • How one can customise Woocommerce cart web page? 21 helpful Woocommerce Cart Web page Hacks
  • How one can Customise Woocommerce store and class web page? 17 helpful hacks
  • How one can customise Woocommerce Single Product Web page | 14 Helpful Hacks
  • How one can Customise Woocommerce Checkout web page? 28 helpful hacks
  • How one can customise Woocommerce Single Product Web page | 14 Helpful Hacks
  • How one can Cover Woocommerce Transport Strategies (Conditionally) – 15 Hacks
  • How one can Customise Woocommerce Inventory Standing? (17 hacks)

Related Posts

Leave a Comment

Your email address will not be published. Required fields are marked *

Shopping Cart
Scroll to Top