ADD FUNCTIONALITY – Amount until free shipping progress bar

Hey forum!

I’ve been wanting this feature and didn’t want to have an extra plugin free nor paid. Until Woodmart is updated to include this feature you can add it yourself!

It uses the existing stock progress bar CSS styles found in the theme. And still works even if you don’t have the option enabled under Theme Settings > Single product > Show / hide elements > Stock progress bar.

Sources I based the code on:
Visual Hook Guide Series
PHP Snippet: Show Remaining Amount to Reach Free Shipping Threshold @ WooCommerce Cart

Note: I do not provide any form of support, if you can correct/improve it, please reply in the thread. Or start a new one & hyperlink this one.

Implementation
Step 1. Code Snippet / add to functions.php

//Comment or delete whichever add_action you do not want to have

//add notification to Single Product Page, below
add_action('woocommerce_share', 'free_shipping_notification');

//add notification to Mini cart, below buttons
add_action( 'woocommerce_widget_shopping_cart_after_buttons', 'free_shipping_notification' );

//add notification to Cart page, above table
add_action( 'woocommerce_before_cart_table', 'free_shipping_notification' );

//add notification to Checkout page, above billing form
//add_action( 'woocommerce_checkout_before_customer_details', 'free_shipping_notification' );

function free_shipping_notification() {
	$amount_min = 199; //change this to your free shipping threshold
   	$amount_current = WC()->cart->subtotal; //get current cart amount
	$amount_left = wc_price( $amount_min - $amount_current );
	$progress_bar_percentage_calc = 100 * wc_price($amount_current / $amount_min);
	
   	if ( $amount_current < $amount_min ) {
    	$notification_above_bar = 'You are' . $amount_left . '&nbsp; away from free shipping!';
		$notification_below_bar = 'Free shipping on orders over 199 lei only applies to domestic United States retail orders'; //update this line with amount_min value in currency
		$progress_bar_percentage_calc = 100 * ( $amount_current / $amount_min );
		$progress_bar_percentage = ceil( $progress_bar_percentage_calc ); //percentage rounded to next whole number
	} else {
		$notification_above_bar = 'Your order qualifies for free shipping!';
		$notification_below_bar = 'Free shipping on orders over 199 lei only applies to domestic United States retail orders'; //update this line with amount_min value in currency
		$progress_bar_percetange = 100;
	}
	
	echo '
    <div class="amount-until-free-shipping">
      <div class="wd-stock-progress-bar">
	  	<div class="stock-info centered">' . $notification_above_bar . '</div>
        <div class="progress-area">
          <div class="progress-bar" style="width:'.$progress_bar_percentage.'%;"></div>
        </div>
		<!-- delete this line & the one below if you do not need notification_below_bar -->
		<div class="stock-info centered">' . $notification_below_bar . '</div> 
      </div>
    </div>
  	';
}

Step 2. Add Additional CSS styles

/*Amount-Until-Free-Shipping*/
.amount-until-free-shipping {
	padding: 10px 20px !important;
}
.amount-until-free-shipping .centered {
	justify-content: center !important;
	padding: 4px 0;
}

Want to move it somewhere on the page?
1. Check which hooks are available by reading through the Visual Hook Guide Series.
2. Edit lines 4,7,10,13 with their relevant available hooks.

Have fun & share your implementation! ✌️

Attachments:

You must be logged in to view attached files.

Hello,

Thank you very much for sharing this information. It may be useful for other site owners.

If you have any questions please feel free to contact us.

Best Regards

[Author]

Posts