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