Black Friday & Cyber Monday SUPER SALE ALL WEEK:
Grab 40% OFF on plugins
Days
Hours
Minutes
Seconds

How to Display Shipping Icons on the WooCommerce Checkout?

Looking to improve the UI of your checkout page by adding shipping icons for each available shipping method? This solution will help you achieve that.

function enqueue_font_awesome() {
    wp_enqueue_style( 'font-awesome', 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css' );
}
add_action( 'wp_enqueue_scripts', 'enqueue_font_awesome' );

/**
 * Display Font Awesome icons for every method on the WooCommerce checkout page.
 */
function ts_display_shipping_icons( $method ) {
    // Check if we are on the checkout page
    if ( is_checkout() ) {
        // Get the method title and ID
        $method_title = $method->get_label();
        $method_id = $method->get_id();

        // Define Font Awesome icons based on shipping method ID
        switch ( $method_id ) {
			case 'flat_rate:2':
                $icon_class = 'fas fa-truck';
                break;
			case 'free_shipping:1':
                $icon_class = 'fas fa-gift';
                break;
			case 'local_pickup:3':
                $icon_class = 'fas fa-user';
                break;
            default:
                $icon_class = 'fas fa-shipping-fast'; // Default icon
                break;
        }

        // Output the Font Awesome icon
        echo '<i class="' . esc_attr( $icon_class ) . ' shipping-icon" title="' . esc_attr( $method_title ) . '"></i>';
    }
}
// Hook the function to display Font Awesome icons on the checkout page
add_action( 'woocommerce_after_shipping_rate', 'ts_display_shipping_icons' );

Output

The below output shows that it adds Font Awesome shipping icons next to each shipping method, providing a visual representation for each method on the checkout page

How to Display Shipping Icons on the WooCommerce Checkout? - Tyche Softwares

Similarly, you can also add custom Shipping Icons on the WooCommerce cart page for every shipping method option as custom icons can be used strategically to highlight specific shipping methods, promotions, or offers.

Read Related Article: How to Display Custom Message Above The Shipping Options in WooCommerce?

Browse more in: Code Snippets, WooCommerce How Tos, WooCommerce Tutorials

Share It:

Subscribe
Notify of
0 Comments
Newest
Oldest
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x