How to Display Shipping Costs Inside the Cart Tray

Modern Cart can display estimated shipping costs inside the cart tray, giving customers visibility into shipping before they reach checkout. This works in both the free and Pro versions, though the two behave a little differently. 

Free vs. Pro Behavior

• Free version: Shipping is shown automatically whenever a shipping method applies to the cart. There’s no toggle for this in the free version’s settings, it just works out of the box.
• Pro version: Adds a “Show Shipping” toggle under Cart settings so you can turn the shipping row on or off. This toggle is off by default, so Pro users need to enable it manually.

Enabling Shipping Display(Pro)

1. Go to Modern Cart > Settings in your WordPress dashboard
2. Navigate to the General tab
3. Find the “Show Shipping” toggle
4. Enable it
5. Save your changes

WooCommerce Shipping Configuration

For shipping costs to appear in the cart tray, you must have at least one shipping zone and shipping method configured in WooCommerce.

Steps to verify:

1. Go to WooCommerce > Settings > Shipping
2. Ensure at least one Shipping Zone is set up with an active shipping method
3. If using flat rate or free shipping, make sure the rates are saved

Here is the WooCommerce Documentation on Setting up Shipping Zones

How It Works

Modern Cart calls WooCommerce’s calculate_shipping() and displays the result using get_cart_shipping_total(). If no shipping method applies (e.g., customer’s address not yet entered), the shipping row will be hidden.

Customizing Shipping HTML (Developer)

Use the moderncart_cart_totals_shipping_html filter to customize the shipping row output:

add_filter( 'moderncart_cart_totals_shipping_html', function( $html ) {
    return '<span class="custom-shipping">' . $html . '</span>';
});

Refer to this documentation to know how to add custom code to website: How and Where to Add Custom JS, CSS, and PHP Codes