如何在WooCommerce结账页面显示购物车中的商品标题

因为你的店铺限制购物车只能添加一件商品，直接通过WooCommerce的钩子和购物车API就能精准获取并显示商品标题，不用依赖插件。

核心代码实现 #

把这段代码添加到你当前主题的functions.php文件，或者用自定义代码插件（比如Code Snippets）来添加：

add_action( 'woocommerce_before_checkout_form', 'display_single_checkout_product_title', 10 );
function display_single_checkout_product_title() {
    // 检查购物车是否有商品
    if ( WC()->cart->is_empty() ) return;
    
    // 获取购物车中的第一件商品（因为限制了只能加一件）
    $cart_items = WC()->cart->get_cart();
    $first_item = reset( $cart_items );
    $product = $first_item['data'];
    
    // 输出商品标题，可自定义HTML结构
    echo '<div class="checkout-product-title">';
    echo '<h3>当前购买商品：' . esc_html( $product->get_name() ) . '</h3>';
    echo '</div>';
}

调整显示位置 #

代码里的woocommerce_before_checkout_form是挂载的钩子，决定标题显示的位置。如果这个位置不符合你的需求，换成下面这些常用的结账页面钩子即可：

• woocommerce_checkout_before_customer_details：客户信息区块之前
• woocommerce_checkout_after_customer_details：客户信息区块之后
• woocommerce_before_order_review：订单摘要区块之前
• woocommerce_checkout_after_order_review：订单摘要区块之后

只需要把add_action里的第一个参数换成对应的钩子名称就行。

自定义样式 #

如果需要调整标题的外观，在主题的自定义CSS里添加：

.checkout-product-title {
    margin: 20px 0;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
    font-size: 1.3em;
    color: #2d3748;
}

这样就能在结账页你想要的位置精准显示当前商品的标题了。

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