25% off ProSNIPC25OFF

Free-Shipping Progress Bar

Shortcode [scseed_free_shipping threshold="50"] that shows a WooCommerce cart progress bar toward the free-shipping threshold.

Module2 parts · by SnipCraft

PHPShortcode

php
<?php
if ( ! function_exists( 'scseed_fspb_shortcode' ) ) {
    function scseed_fspb_shortcode( $atts ) {
        if ( ! function_exists( 'WC' ) || ! WC()->cart ) return '';
        $atts      = shortcode_atts( array( 'threshold' => 50 ), $atts, 'scseed_free_shipping' );
        $threshold = floatval( $atts['threshold'] );
        $total     = floatval( WC()->cart->get_cart_contents_total() );
        $pct       = $threshold > 0 ? min( 100, ( $total / $threshold ) * 100 ) : 100;
        $remaining = max( 0, $threshold - $total );

        if ( $pct >= 100 ) {
            $msg = '<strong>You have unlocked free shipping!</strong>';
        } else {
            $msg = 'Spend <strong>' . wc_price( $remaining ) . '</strong> more to unlock free shipping.';
        }

        ob_start(); ?>
<div class="scseed-fspb">
  <p class="scseed-fspb-msg"><?php echo wp_kses_post( $msg ); ?></p>
  <div class="scseed-fspb-track"
       role="progressbar"
       aria-valuenow="<?php echo esc_attr( round( $pct ) ); ?>"
       aria-valuemin="0" aria-valuemax="100">
    <div class="scseed-fspb-fill" style="width:<?php echo esc_attr( round( $pct ) ); ?>%;"></div>
  </div>
</div>
        <?php
        return ob_get_clean();
    }
    add_shortcode( 'scseed_free_shipping', 'scseed_fspb_shortcode' );
}

CSSStyles

css
.scseed-fspb {
    background: #f0fdf4;
    border: 1px solid #86efac;
    border-radius: 8px;
    padding: 14px 16px;
    margin: 16px 0;
}
.scseed-fspb-msg { margin: 0 0 10px; font-size: 14px; color: #166534; }
.scseed-fspb-track {
    background: #dcfce7;
    border-radius: 999px;
    height: 10px;
    overflow: hidden;
}
.scseed-fspb-fill {
    background: linear-gradient(90deg, #16a34a, #4ade80);
    height: 100%;
    border-radius: 999px;
    transition: width .4s ease;
}
#shortcode#woocommerce#shipping#cart#marketing