Instantly share code, notes, and snippets.

Embed
What would you like to do?
WooCommerce checkout steps
<?php
/**
* Display the checkout steps so the customer knows where they are.
*
* The output uses classes of Bootstrap 4 and the icons of FontAwesome (Free)
**/
function onx_woocommerce_checkout_steps()
{
echo '<nav id="woo-checkout-steps" class="nav nav-pills nav-justified mb-4" role="navigation">';
global $woocommerce;
$step[1] = __('Cart','woocommerce');
$step[2] = __('Je gegevens','your-theme');
$step[3] = __('Betalen','your-theme');
$step[4]['success'] = __('Bedankt','your-theme');
$step[4]['failed'] = __('Oh jee','your-theme');
$classes['past'] = 'nav-item nav-link'; // classnames for steps we're past
$classes['current'] = 'nav-item nav-link active'; // classnames of the current step
$classes['future'] = 'nav-item nav-link disabled text-muted'; // classnames for future steps
if ( is_cart() )
{
printf( '<a class="%s" href="%s"><strong><i class="fas fa-shopping-basket" aria-hidden="true"></i> %s</strong></a>',
esc_attr( $classes['current'] ),
esc_url( wc_get_cart_url() ),
esc_attr( $step[1] )
);
printf( '<a class="%s" disabled href="%s"><i class="fas fa-address-card" aria-hidden="true"></i> %s</a>',
esc_attr( $classes['future'] ),
esc_url( $woocommerce->cart->get_checkout_url() ),
esc_attr( $step[2] )
);
printf( '<a class="%s" disabled href="#"><i class="far fa-credit-card" aria-hidden="true"></i> %s</a>',
esc_attr( $classes['future'] ),
esc_attr( $step[3] )
);
printf( '<a class="" disabled href="#"><i class="fas fa-heart" aria-hidden="true"></i> %s</a>',
esc_attr( $classes['future'] ),
esc_attr( $step[4]['success'] )
);
}
if ( is_checkout() )
{
printf( '<a class="%s" href="%s"><strong><i class="fas fa-shopping-basket" aria-hidden="true"></i> %s</strong></a>',
esc_attr( $classes['past'] ),
esc_url( wc_get_cart_url() ),
esc_attr( $step[1] )
);
printf( '<a class="%s" href="%s"><strong><i class="fas fa-address-card" aria-hidden="true"></i> %s</strong></a>',
esc_attr( $classes['current'] ),
esc_url( $woocommerce->cart->get_checkout_url() ),
esc_attr( $step[2] )
);
printf( '<a class="%s" disabled href="#"><i class="far fa-credit-card" aria-hidden="true"></i> %s</a>',
esc_attr( $classes['future'] ),
esc_attr( $step[3] )
);
printf( '<a class="%s" disabled href="#"><i class="fas fa-heart" aria-hidden="true"></i> %s</a>',
esc_attr( $classes['future'] ),
esc_attr( $step[4]['success'] )
);
}
if ( is_wc_endpoint_url( 'order-pay' ) )
{
printf( '<a class="%s" href="%s"><strong><i class="fas fa-shopping-basket" aria-hidden="true"></i> %s</strong></a>',
esc_attr( $classes['past'] ),
esc_url( wc_get_cart_url() ),
esc_attr( $step[1] )
);
printf( '<a class="%s " href="%s"><strong><i class="fas fa-address-card" aria-hidden="true"></i> %s</strong></a>',
esc_attr( $classes['past'] ),
esc_url( $woocommerce->cart->get_checkout_url() ),
esc_attr( $step[2] )
);
printf( '<a class="%s" disabled href="#"><i class="far fa-credit-card" aria-hidden="true"></i> %s</a>',
esc_attr( $classes['current'] ),
esc_attr( $step[3] )
);
printf( '<a class="%s" disabled href="#"><i class="fas fa-heart" aria-hidden="true"></i> %s</a>',
esc_attr( $classes['future'] ),
esc_attr( $step[4]['success'] )
);
}
if ( is_wc_endpoint_url( 'order-received' ) )
{
$order_key = isset( $_GET['key'] ) ? esc_html( $_GET['key'] ) : '';
if ( isset( $order_key ) )
{
$order_id = wc_get_order_id_by_order_key( $order_key );
$order = new WC_Order( $order_id );
}
printf( '<a class="%s" href="%s"><strong><i class="fas fa-shopping-basket" aria-hidden="true"></i> %s</strong></a>',
esc_attr( $classes['past'] ),
esc_url( wc_get_cart_url() ),
esc_attr( $step[1] )
);
printf( '<a class="%s " href="%s"><strong><i class="fas fa-address-card" aria-hidden="true"></i> %s</strong></a>',
esc_attr( $classes['past'] ),
esc_url( $woocommerce->cart->get_checkout_url() ),
esc_attr( $step[2] )
);
printf( '<a class="%s" disabled href="#"><i class="far fa-credit-card" aria-hidden="true"></i> %s</a>',
esc_attr( $classes['past'] ),
esc_attr( $step[3] )
);
if ( isset( $order ) )
{
if ( $order->has_status( 'failed' ) )
{
printf( '<a class="%s" disabled href="#"><i class="fas fa-exclamation-circle" aria-hidden="true"></i> %s</a>',
esc_attr( $classes['current'] ),
esc_attr( $step[4]['failed'] )
);
}
else
{
printf( '<a class="%s" disabled href="#"><i class="fas fa-heart" aria-hidden="true"></i> %s</a>',
esc_attr( $classes['current'] ),
esc_attr( $step[4]['success'] )
);
}
}
else
{
printf( '<a class="%s" disabled href="#"><i class="fas fa-exclamation-circle" aria-hidden="true"></i> %s</a>',
esc_attr( $classes['current'] ),
esc_attr( $step[4]['failed'] )
);
}
}
echo '</nav><hr class="mb-4">';
}
add_action('woocommerce_before_cart', 'onx_woocommerce_checkout_steps', 1);
add_action('woocommerce_before_checkout_form', 'onx_woocommerce_checkout_steps', 1);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment