You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

WooCommerce侧边栏小工具区显示自定义字段总货量问题

Fix: Display Total Shipping Volume in WooCommerce Sidebar Widget

Hey James, I get it—your existing code works great on the checkout page because you're using a checkout-specific hook, but sidebar widgets operate in a different context. Let's get that total cubic meter volume showing up in your sidebar with two straightforward solutions:

Option 1: Use a Shortcode (Quick & Easy)

This method lets you embed the total volume into any existing text widget in your sidebar.

First, add this code to your theme's functions.php file or a custom plugin:

// Calculate total shipping volume from cart items
function calculate_total_shipping_volume() {
    $total_volume = 0;

    // Make sure we have access to the WooCommerce cart
    if ( WC()->cart && ! WC()->cart->is_empty() ) {
        foreach ( WC()->cart->get_cart() as $cart_item ) {
            // Replace 'product_volume' with YOUR actual custom field key
            $product_volume = get_post_meta( $cart_item['product_id'], 'product_volume', true );
            
            // Only add valid numeric values, multiplied by item quantity
            if ( is_numeric( $product_volume ) ) {
                $total_volume += $product_volume * $cart_item['quantity'];
            }
        }
    }

    // Format the output (adjust decimal places if needed)
    return empty( $total_volume ) ? '0.00 m³' : number_format( $total_volume, 2 ) . ' m³';
}
add_shortcode( 'total_shipping_volume', 'calculate_total_shipping_volume' );

Next:

  1. Go to Appearance > Widgets in your WordPress dashboard
  2. Add a Text widget to your target sidebar
  3. Inside the widget content, paste this shortcode: [total_shipping_volume]
  4. Save the widget, and you'll see the total volume displayed in your sidebar!

Option 2: Create a Custom Widget (Clean & Purpose-Built)

If you want a dedicated widget that shows up in your widget list (instead of using a text widget), use this approach:

Add this code to your theme's functions.php or custom plugin (you can reuse the calculate_total_shipping_volume function from Option 1):

// Reuse the calculation function from Option 1 here if you haven't already added it

// Custom WooCommerce Shipping Volume Widget
class WC_Shipping_Volume_Widget extends WP_Widget {

    public function __construct() {
        parent::__construct(
            'wc_shipping_volume_widget',
            'Total Shipping Volume',
            array( 'description' => 'Displays total cubic meter volume of items in your cart' )
        );
    }

    public function widget( $args, $instance ) {
        echo $args['before_widget'];
        
        // Display widget title (configurable in widget settings)
        if ( ! empty( $instance['title'] ) ) {
            echo $args['before_title'] . apply_filters( 'widget_title', $instance['title'] ) . $args['after_title'];
        }

        // Render the total volume
        echo '<div class="total-shipping-volume">';
        echo calculate_total_shipping_volume();
        echo '</div>';

        echo $args['after_widget'];
    }

    public function form( $instance ) {
        // Let users set a custom widget title
        $title = ! empty( $instance['title'] ) ? $instance['title'] : 'Total Shipping Volume';
        ?>
        <p>
            <label for="<?php echo esc_attr( $this->get_field_id( 'title' ) ); ?>"><?php _e( 'Widget Title:' ); ?></label> 
            <input class="widefat" id="<?php echo esc_attr( $this->get_field_id( 'title' ) ); ?>" name="<?php echo esc_attr( $this->get_field_name( 'title' ) ); ?>" type="text" value="<?php echo esc_attr( $title ); ?>">
        </p>
        <?php 
    }

    public function update( $new_instance, $old_instance ) {
        // Sanitize and save widget settings
        $instance = array();
        $instance['title'] = ( ! empty( $new_instance['title'] ) ) ? sanitize_text_field( $new_instance['title'] ) : '';
        return $instance;
    }
}

// Register the widget with WordPress
function register_shipping_volume_widget() {
    register_widget( 'WC_Shipping_Volume_Widget' );
}
add_action( 'widgets_init', 'register_shipping_volume_widget' );

Then:

  1. Go to Appearance > Widgets
  2. Look for the Total Shipping Volume widget in your available widgets list
  3. Drag it to your desired sidebar, set a custom title if you want, and save
  4. Your total shipping volume will now appear in the sidebar!

Important Notes

  • Replace the custom field key: Make sure 'product_volume' matches the actual meta key you're using to store the cubic meter values for your products.
  • Empty cart handling: The code will show 0.00 m³ when the cart is empty—if you prefer a different message (like "Cart is empty"), just modify the return line in calculate_total_shipping_volume().
  • Styling: You can add custom CSS to the .total-shipping-volume class to match your sidebar's design (e.g., adjust font size, color, or spacing).

内容的提问来源于stack exchange,提问作者James Donald

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.05.22 08:51:40