1. Home
  2. Help Center
  3. WooCommerce
  4. Customization
  5. Free Shipping progress bar

The following function will let you add a Free Shipping progress bar.

The PHP code

Main progress bar function

Add the code to /wp-content/themes/goya-child/functions.php

function goya_custom_bar_free_shipping() { ?> <div class="free-shipping-progress-bar"> <?php $threshold = 199; $current = WC()->cart->get_subtotal(); if ( $current < $threshold ) { $percent = ( $current / $threshold) * 100 ; echo "Add <strong>" . wc_price( $threshold - $current, array('decimals' => 0) ) . "</strong> more to get <strong>Free Shipping!</strong>"; } else { $percent = 100; echo"You've got free shipping!"; } ?> <div class="progress-bar-rail"> <span class="progress-bar-status" style="width:<?php echo $percent; ?>%;"><span class="progress-percent"></span> </div> </div> <?php }
Code language: JavaScript (javascript)

The target amount to get free shipping can be changed on this line $threshold = 99;

Progress bar placement

Now, decide where you want to display the bar and add the following lines:

To place the bar on the mini cart panel:

// add to mini cart panel add_action( 'woocommerce_widget_shopping_cart_before_buttons', 'goya_custom_bar_free_shipping' );
Code language: JavaScript (javascript)

If you want to display the bar on the cart page too, add the following line

// add to cart page add_action( 'woocommerce_before_cart_contents', 'goya_custom_bar_free_shipping' );
Code language: JavaScript (javascript)

To insert the progress bar above the add to cart button on the single product page, add

// before add to cart button add_action('woocommerce_before_add_to_cart_button', 'goya_custom_bar_free_shipping', 1);
Code language: JavaScript (javascript)

The CSS code

The bar styles must be pasted to Appearance > Customize > Additional CSS or the child theme stylesheet /wp-content/themes/goya-child/style.css

/* Free Shipping Progress Bar */ .free-shipping-progress-bar { margin: 20px 0px 10px; font-size: 0.9em; } .side-panel .free-shipping-progress-bar { margin: 0 0 30px; } .free-shipping-progress-bar .progress-bar-rail { height: 8px; width: 100%; background-color: #eeee; background-color: rgba(0,0,0,0.1); display: table; margin: 0 auto; margin-top: 10px; } .free-shipping-progress-bar .progress-bar-status { background: linear-gradient(325.12deg, #b9a16b 0, #f1e04d 100%); background-color: #b9a16b; display: block; z-index: 1; height: inherit; position: relative; }
Code language: CSS (css)

That’s it.

Was this article helpful?

Related Articles