WooCommerce结账页面Total与Subtotal不显示问题求助

Hey there, sorry to hear you're stuck with this frustrating checkout styling issue—let's walk through practical steps to get your totals back on track.

1. First, Rule Out Conflicts (Most Common Culprit) #

9 times out of 10, this kind of styling breakage comes from a theme or plugin conflicting with WooCommerce's default styles. Here's how to test:

• Switch to a default WooCommerce theme: Temporarily activate Storefront (WooCommerce's official theme). If the totals show up, your current theme is the problem—check its custom CSS or checkout template overrides.
• Disable non-WooCommerce plugins: Turn off all plugins except WooCommerce, then re-enable them one by one. When the totals disappear again, you've found the conflicting plugin.

2. Fix Your CSS (If It's Not Applying) #

If adding CSS didn't work, it's almost certainly a selector specificity issue—your custom CSS isn't strong enough to override existing styles. Here's how to fix that:

1. Right-click the empty area where totals should be and select "Inspect" (Chrome/Firefox) to open dev tools.
2. Locate the HTML elements for .cart-subtotal and .order-total—check if they have display: none or visibility: hidden applied.
3. Write a more specific CSS rule to force them to show. For example:

/* Target checkout page totals specifically */
.woocommerce-checkout .woocommerce-checkout-review-order-table .cart-subtotal,
.woocommerce-checkout .woocommerce-checkout-review-order-table .order-total {
    display: table-row !important; /* Match table layout */
    visibility: visible !important;
}

⚠️ Note: Use !important sparingly—once you confirm this works, try removing it and making your selector even more specific (e.g., add your theme's body class like body.my-theme to the selector) to avoid overriding other styles accidentally.

3. Check for Broken Template Overrides #

Some themes override WooCommerce's checkout template files, and if those files are outdated or missing code, totals can disappear. Here's how to verify:

• Go to your theme's folder: wp-content/themes/your-theme/woocommerce/checkout/review-order.php
• Compare this file to the default review-order.php from Storefront (or the latest WooCommerce template). Look for these critical blocks:
  • The subtotal section:

    <tr class="cart-subtotal">
        <th><?php esc_html_e( 'Subtotal', 'woocommerce' ); ?></th>
        <td><?php wc_cart_totals_subtotal_html(); ?></td>
    </tr>
    

  • The total section:

    <tr class="order-total">
        <th><?php esc_html_e( 'Total', 'woocommerce' ); ?></th>
        <td><?php wc_cart_totals_order_total_html(); ?></td>
    </tr>
    

If these blocks are missing, restore them from the default template, or delete the theme's review-order.php file to let WooCommerce use its default version.

4. Clear All Caches #

Don't overlook this! Cached styles (browser cache, plugin cache like WP Rocket, or server cache) can prevent your new CSS from loading:

• Clear your browser cache (Ctrl+Shift+R on Windows, Cmd+Shift+R on Mac)
• If you use a caching plugin, go to its settings and clear all cache
• If your host uses server-level cache (like SiteGround SG Optimizer), clear that too

5. Double-Check WooCommerce Settings (Long Shot) #

While unlikely, it's worth a quick check: Go to WooCommerce > Settings > Checkout and make sure there's no setting hiding order totals (most themes don't include this, but better safe than sorry).

If none of these steps work, feel free to share a snippet of your checkout page's HTML (from dev tools) or your theme/plugin list—we can dig deeper!

内容的提问来源于stack exchange，提问作者Dr.MTR