WooCommerce自定义主题如何在购物车图标悬浮层展示已添加商品概要

以下是适配你需求的完整修改代码，所有功能均基于WooCommerce官方原生接口开发，兼容常规主题扩展场景：

<div class="cartbox">
<a class="cart-link" href="#">
<span class="fa fa-shopping-bag"></span>
<span class="aa-cart-notify">
<?php echo sprintf ( _n( '%d', '%d', WC()->cart->get_cart_contents_count() ), WC()->cart->get_cart_contents_count() ); ?> 
</span>
<span class="basketicon__total">
<?php echo WC()->cart->get_cart_total(); ?>
</span>
</a>
<div class="cartbox-summary">
<ul>
<?php 
// 空购物车判断逻辑
if ( WC()->cart->is_empty() ) : ?>
<li class="cart-empty-tip">
    <p><?php _e( '您的购物车目前是空的', '替换为你的主题文本域' ); ?></p>
</li>
<?php else : 
// 遍历购物车所有商品
foreach ( WC()->cart->get_cart() as $cart_item_key => $cart_item ) :
    $_product = apply_filters( 'woocommerce_cart_item_product', $cart_item['data'], $cart_item, $cart_item_key );
    if ( $_product && $_product->exists() && $cart_item['quantity'] > 0 && apply_filters( 'woocommerce_cart_item_visible', true, $cart_item, $cart_item_key ) ) :
        $product_permalink = apply_filters( 'woocommerce_cart_item_permalink', $_product->is_visible() ? $_product->get_permalink( $cart_item ) : '', $cart_item, $cart_item_key );
?>
<li>
<a class="cartbox-img" href="<?php echo esc_url( $product_permalink ); ?>">
    <?php echo apply_filters( 'woocommerce_cart_item_thumbnail', $_product->get_image(), $cart_item, $cart_item_key ); ?>
</a>
<div class="cartbox-info">
<h4><a href="<?php echo esc_url( $product_permalink ); ?>"><?php echo apply_filters( 'woocommerce_cart_item_name', $_product->get_name(), $cart_item, $cart_item_key ); ?></a></h4>
<p><?php echo $cart_item['quantity']; ?> x <?php echo apply_filters( 'woocommerce_cart_item_price', WC()->cart->get_product_price( $_product ), $cart_item, $cart_item_key ); ?></p>
</div>
<a class="remove-product" href="<?php echo esc_url( wc_get_cart_remove_url( $cart_item_key ) ); ?>" data-cart-item-key="<?php echo esc_attr( $cart_item_key ); ?>">
    <span class="fa fa-times"></span>
</a>
</li>
<?php endif; endforeach; ?>
<li>
<span class="cartbox-total-title">
合计
</span>
<span class="cartbox-total-price">
<a class="cart-customlocation" href="<?php echo wc_get_cart_url(); ?>" title="<?php _e( '查看您的购物车' ); ?>"><?php echo sprintf ( _n( '%d 件商品', '%d 件商品', WC()->cart->get_cart_contents_count() ), WC()->cart->get_cart_contents_count() ); ?> – <?php echo WC()->cart->get_cart_total(); ?></a>
</span>
</li>
<?php endif; ?>
</ul>
<?php if ( !WC()->cart->is_empty() ) : ?>
<a class="aa-cartbox-checkout aa-primary-btn" href="<?php echo esc_url( wc_get_checkout_url() ); ?>">去结算</a>
<?php endif; ?>
</div>
</div>

如果需要实现无刷新删除商品效果，可以额外添加以下代码：

1. 主题functions.php新增AJAX处理逻辑：

// 处理删除购物车商品AJAX请求
add_action('wp_ajax_remove_cart_item', 'custom_remove_cart_item');
add_action('wp_ajax_nopriv_remove_cart_item', 'custom_remove_cart_item');
function custom_remove_cart_item() {
    check_ajax_referer('remove-cart-item', 'nonce');
    if (isset($_POST['item_key'])) {
        WC()->cart->remove_cart_item(sanitize_text_field($_POST['item_key']));
        wp_send_json_success();
    }
    wp_send_json_error();
}

2. 页脚新增JS交互逻辑：

jQuery(document).on('click', '.remove-product', function(e) {
    e.preventDefault();
    const itemKey = jQuery(this).data('cart-item-key');
    jQuery.ajax({
        url: wc_add_to_cart_params.ajax_url,
        type: 'POST',
        data: {
            action: 'remove_cart_item',
            item_key: itemKey,
            nonce: '<?php echo wp_create_nonce("remove-cart-item"); ?>'
        },
        success: function(res) {
            if (res.success) location.reload();
            // 也可自行编写局部更新DOM逻辑，无需全页刷新
        }
    });
});

功能说明 #

• 空购物车状态适配：无商品时仅输出提示文本，自动隐藏商品列表、合计栏和结算按钮
• 商品字段全适配：通过官方过滤器获取商品缩略图、标题、购买数量、售价，兼容多语言、自定义商品类型等扩展场景
• 删除功能安全可靠：默认使用WooCommerce原生删除接口，可选配置无刷新删除效果
• 动态链接适配：购物车页、结算页链接均使用官方函数动态生成，避免硬编码链接失效问题

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