Woocommerce Question posted in
The official Woocommerce documentation can be found here.

WooCommerce progress bar from cart contents total value

My aiming result is like this:
enter image description here

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>
Tags:

2

Answers


  1. 0

    The main mistake is in your Javascript code in the first line:

    var carttotal = WC()->cart->get_cart_contents_total();

    which should be instead:

    var carttotal = <?php echo (float) WC()->cart->get_cart_contents_total(); ?>;

    And also CSS width that needs to be 100%.

    So the code will be (using jQuery and changed width property to 100%):

    ?>
<style>
#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: 100%;
  margin: 10px;
  border:1px solid grey;
}
</style>

<progress id="cart-progress-bar" max="100" value="0"></progress>

<script>
    (function($){
        $('#cart-progress-bar').val(<?php echo floatval( WC()->cart->get_cart_contents_total() ); ?>);
    })(jQuery);
</script>
<?php
    Login or Signup to reply.
  2. 0

    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.

    enter image description here

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search