Tooltip for the “Fee name” field
When Advanced Dynamic Pricing for WooCommerce applies a cart or order fee (via a Cart/Shipping Discount rule configured as a fee), the fee name appears as a plain text label in the cart and checkout totals table. For some store setups — particularly B2B stores or stores with complex pricing structures — it can be helpful to attach an explanatory tooltip to the fee name, giving customers more context about what the fee represents without cluttering the cart layout.
This article provides a three-part snippet that adds a WooCommerce-styled help-tip tooltip directly next to the fee name in the cart and checkout totals, using WooCommerce’s own built-in TipTip library and admin styles — no third-party libraries needed.
Code Sample
Add the full snippet below to your theme’s functions.php or the Code Snippets plugin. It consists of three parts that must all be present for the tooltip to work correctly.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
add_filter( 'woocommerce_cart_totals_fee_html', function( $cart_totals_fee_html, $fee ) { return '<span class="woocommerce-help-tip" data-tip="The text you would love to see"></span>' . $cart_totals_fee_html; }, 10, 2 ); add_action( 'wp_footer', function() { if ( is_cart() || is_checkout() ) { ?> <script> jQuery( document ).ready( function() { jQuery( ".woocommerce-help-tip" ).tipTip( { 'attribute': 'data-tip', 'fadeIn': 50, 'fadeOut': 50, 'delay': 200, 'keepAlive': true } ).focus(); }); </script> <?php } }, 25 ); add_action( 'wp_enqueue_scripts', function() { if ( is_cart() || is_checkout() ) { $suffix = AutomatticJetpackConstants::is_true( 'SCRIPT_DEBUG' ) ? '' : '.min'; $version = AutomatticJetpackConstants::get_constant( 'WC_VERSION' ); wp_enqueue_style( 'woocommerce_admin_styles', WC()->plugin_url() . '/assets/css/admin.css', array(), $version ); wp_enqueue_script( 'jquery-tiptip', WC()->plugin_url() . '/assets/js/jquery-tiptip/jquery.tipTip' . $suffix . '.js', array( 'jquery' ), $version, true ); } }); |
To change the tooltip text, find this line in Part 1 and replace "The text you would love to see" with your own message:
|
1 |
data-tip="The text you would love to see" |