Elementor侧边购物车添加自定义文本问题求助

问题背景 #

• 环境：Elementor + WooCommerce，头部配置Elementor迷你购物车组件（侧边栏购物车类型）
• 需求：在带有.elementor-menu-cart__footer-buttons类的「查看购物车」「结算」按钮下方，添加一次自定义文本free shipping in Lima
• 当前问题：原有代码会在每个商品条目后重复显示该文本，不符合需求

原有错误代码：

add_filter( 'woocommerce_widget_cart_item_quantity', 'add_custom_text_below_menu_cart_buttons', 10, 2 );
function add_custom_text_below_menu_cart_buttons( $quantity, $cart_item_key ) {
    // custom text here
    $custom_text = 'free shipping in Lima';

    // wrap the custom text in a div with a custom class
    $custom_text = '<div class="custom-text">' . $custom_text . '</div>';

    // append the custom text to the cart widget
    $quantity .= $custom_text;

    return $quantity;
}

错误原因 #

原有代码使用的woocommerce_widget_cart_item_quantity过滤器是针对每个购物车商品条目触发的，会跟着商品数量重复输出文本，无法实现按钮区域仅显示一次的需求。

正确解决方案 #

使用woocommerce_widget_cart_after_buttons动作钩子，这个钩子会在购物车侧边栏的按钮区域前后触发，且仅执行一次：

// 在Elementor迷你购物车按钮区域下方添加自定义文本
add_action( 'woocommerce_widget_cart_after_buttons', 'add_custom_text_below_menu_cart_buttons' );
function add_custom_text_below_menu_cart_buttons() {
    // 自定义文本内容
    $custom_text = 'free shipping in Lima';
    
    // 用自定义类包裹文本，方便样式调整，同时安全输出
    echo '<div class="custom-text">' . esc_html( $custom_text ) . '</div>';
}

说明 #

• 该代码会在.elementor-menu-cart__footer-buttons容器的下方输出一次自定义文本，不会随商品条目重复
• 使用esc_html()函数确保文本安全输出，避免潜在的XSS风险
• 可通过.custom-text类自定义文本样式，例如调整字体大小、颜色等

内容的提问来源于stack exchange，提问作者armandoarturo7