My aiming result is like this:
With the current code its not showing the cart total in the progress bar. What am I doing wrong? And how can I integrate those steps/stacks?
var carttotal = WC()->cart->get_cart_contents_total(); document.getElementById("cart-progress-bar").value = carttotal;
#cart-progress-bar { background-color: #f9f9f9; box-shadow: inset 0 1px 1px rgba(100, 100, 100, 0.1); box-sizing: initial; color: #fff; font-size: 20px; height: 30px; position: relative; text-align: center; width: auto; margin: 10px; border:1px solid grey; }
<progress id="cart-progress-bar" max="100" value="0"></progress>
Advertisement
Answer
Your example didn’t state exactly where you wanted this. I’ve added it to the cart page via the woocommerce_before_cart_table
action hook. Which would look like this after adding some extra CSS styling.
You could also add this to a template file of course without the add_action
/function
mark up.
Action hook:
add_action( 'woocommerce_before_cart_table', 'cart_discount_progress_bar' ); function cart_discount_progress_bar() { // Create progress bar $cart_total = WC()->cart->get_cart_contents_total() + WC()->cart->get_cart_contents_tax(); printf( '<progress id="cart-progress-bar" max="100" value="%s"></progress>', $cart_total ); // Create steps $steps = array( 0 => '', 30 => __( '3% discount', 'discount-bar'), 50 => __( '8% discount', 'discount-bar'), 100 => __( '10% discount', 'discount-bar'), ); echo '<div id="cart-progress-steps">'; foreach ( $steps as $step => $discount ) { printf('<div class="step step-%1$s" style="left:%1$s%%">%2$s<span class="discount">%3$s</span></div>', $step, wc_price( $step ), $discount ); } echo '</div>'; }
CSS:
.woocommerce-cart #cart-progress-bar { border-radius:0; border: 1px solid #eaeaea; margin-top: 1em; color: cornflowerblue; background: floralwhite; } .woocommerce-cart #cart-progress-bar::-webkit-progress-value { background: cornflowerblue; } .woocommerce-cart #cart-progress-bar::-webkit-progress-bar { background: floralwhite; } .woocommerce-cart #cart-progress-steps { margin-bottom: 3em; } .woocommerce-cart #cart-progress-bar, .woocommerce-cart #cart-progress-steps { width: 100%; position: relative; height: 20px; box-sizing: border-box; } .woocommerce-cart #cart-progress-steps .step { position: absolute; width: 70px; height: 20px; font-size: 14px; text-align: center; transform: translateX(-50%); } .woocommerce-cart #cart-progress-steps .step .discount { font-size: 12px; line-height: 11px; display: block; } .woocommerce-cart #cart-progress-steps .step:before { content: ''; display: block; position: absolute; width: 40px; height: 18px; border-left: 2px solid black; left: 50%; top: -26px; }
The mistake in your example was that you were trying to use PHP to create a value for a JavaScript variable. So to make that work you would either have to jump in and out of PHP:
var carttotal = <?php echo WC()->cart->get_cart_contents_total() + WC()->cart->get_cart_contents_tax(); ?>;
Or choose to build your whole progress bar in PHP like in my example.