如何通过钩子用自定义HTML替换WooCommerce购物车表格？

完全可以通过WooCommerce提供的钩子实现替换，核心思路是先移除默认的表格输出逻辑，再添加自定义内容的输出函数，具体步骤如下：

1. 移除默认购物车表格 #

WooCommerce默认通过wc_cart_form_contents函数在woocommerce_cart_form_contents钩子下输出购物车表格，我们只需要用remove_action移除这个默认回调：

remove_action( 'woocommerce_cart_form_contents', 'wc_cart_form_contents', 10 );

2. 添加自定义购物车内容 #

在同一个钩子下注册自己的回调函数，输出自定义HTML结构。下面是一个包含核心功能的完整示例：

add_action( 'woocommerce_cart_form_contents', 'custom_wc_cart_form_contents', 10 );

function custom_wc_cart_form_contents() {
    global $woocommerce;
    $cart_items = $woocommerce->cart->get_cart();

    // 空购物车提示
    if ( empty( $cart_items ) ) {
        echo '<p>' . esc_html__( '您的购物车目前是空的。', 'woocommerce' ) . '</p>';
        return;
    }

    // 自定义购物车容器
    echo '<div class="custom-cart-container">';
    foreach ( $cart_items as $cart_item_key => $cart_item ) {
        $_product = apply_filters( 'woocommerce_cart_item_product', $cart_item['data'], $cart_item, $cart_item_key );
        $product_id = apply_filters( 'woocommerce_cart_item_product_id', $cart_item['product_id'], $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 );
            ?>
            <div class="custom-cart-item">
                <!-- 商品缩略图 -->
                <div class="cart-item-thumb">
                    <?php echo apply_filters( 'woocommerce_cart_item_thumbnail', $_product->get_image(), $cart_item, $cart_item_key ); ?>
                </div>

                <!-- 商品信息 -->
                <div class="cart-item-info">
                    <h3 class="item-name">
                        <?php
                        if ( $product_permalink ) {
                            echo sprintf( '<a href="%s">%s</a>', esc_url( $product_permalink ), $_product->get_name() );
                        } else {
                            echo $_product->get_name();
                        }
                        ?>
                    </h3>
                    <!-- 商品变体属性（如规格） -->
                    <?php do_action( 'woocommerce_after_cart_item_name', $cart_item, $cart_item_key ); ?>
                    <!-- 商品单价 -->
                    <span class="item-price"><?php echo WC()->cart->get_product_price( $_product ); ?></span>
                </div>

                <!-- 数量控制 -->
                <div class="cart-item-quantity">
                    <?php
                    if ( $_product->is_sold_individually() ) {
                        $quantity_html = '1 <input type="hidden" name="cart[%s][qty]" value="1" />';
                    } else {
                        $quantity_html = woocommerce_quantity_input( array(
                            'input_name'  => "cart[{$cart_item_key}][qty]",
                            'input_value' => $cart_item['quantity'],
                            'max_value'   => $_product->get_max_purchase_quantity(),
                            'min_value'   => '0',
                        ), $_product, false );
                    }
                    echo apply_filters( 'woocommerce_cart_item_quantity', $quantity_html, $cart_item_key, $cart_item );
                    ?>
                </div>

                <!-- 删除按钮 -->
                <div class="cart-item-remove">
                    <?php
                    echo apply_filters( 'woocommerce_cart_item_remove_link', sprintf(
                        '<a href="%s" class="remove" aria-label="%s" data-product_id="%s" data-product_sku="%s">&times;</a>',
                        esc_url( wc_get_cart_remove_url( $cart_item_key ) ),
                        esc_attr__( '移除该商品', 'woocommerce' ),
                        esc_attr( $product_id ),
                        esc_attr( $_product->get_sku() )
                    ), $cart_item_key );
                    ?>
                </div>
            </div>
            <?php
        }
    }
    echo '</div>';
}

注意事项 #

• 代码需放置在当前主题的functions.php文件或自定义插件中，避免主题更新导致代码丢失；
• 自定义HTML中的表单元素（如数量输入框的name属性、删除链接的URL）需保留原有逻辑，否则购物车的更新、删除功能会失效；
• 可根据需求自由调整HTML结构和类名，配合自定义CSS实现样式定制。

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