Adding the bar to the top of the Cart and Checkout pages

This is not a support thread! I just wanted to thank plugin’s author(s) and share a solution I came up with.

Initially the plugin places the progress bar in bottom of the Cart and Checkout pages, right after all the content on those pages. I wanted to have it on top of the pages, above the products and billing tables. Since there aren’t options in the plugin settings I achieved this with few lines of code.

Here it is, if someone is looking for similar solution:

– from the plugin settings, turn off “Show on cart and checkout pages”
– pick the shortcode [wpcfb] and hook it in the place you want the progress bar to show.
– in my case, I need it on top of the Cart and Checkout pages, so I add it to the right hooks:

//Free shipping bar in Cart
add_action( 'woocommerce_before_cart_table', function() {
	echo do_shortcode("[wpcfb]");
});

//Free shipping bar in Checkout
add_action( 'woocommerce_before_checkout_form', function() {
	echo do_shortcode("[wpcfb]");
});

Style it a bit with CSS and we are ready to go:

/* Free shipping bar */
@media screen and (min-width: 800px) {
  .wpcfb-wrap.wpc-free-shipping-bar.wpcfb-style-rounded.wpcfb-progress-animated {
    padding: 0px 30% 3% 30%;
  }
}

That’s all folks, I hope this will be usefull!

Stefan