WooCommerce侧边栏小工具区显示自定义字段总货量问题
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:
- Go to Appearance > Widgets in your WordPress dashboard
- Add a Text widget to your target sidebar
- Inside the widget content, paste this shortcode:
[total_shipping_volume] - 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:
- Go to Appearance > Widgets
- Look for the Total Shipping Volume widget in your available widgets list
- Drag it to your desired sidebar, set a custom title if you want, and save
- 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 incalculate_total_shipping_volume(). - Styling: You can add custom CSS to the
.total-shipping-volumeclass to match your sidebar's design (e.g., adjust font size, color, or spacing).
内容的提问来源于stack exchange,提问作者James Donald

