如何实现WooCommerce结账审核表单中产品名称与数量同行对齐？

1. 检查并调整PHP输出的HTML结构 #

先确认你的PHP代码输出的产品名称和数量处于同一父容器内，避免用独立的块级元素分隔。示例代码如下：

foreach ( $order->get_items() as $item_id => $item ) {
    $product_name = $item->get_name();
    $quantity = $item->get_quantity();
    // 用统一容器包裹名称和数量
    echo '<div class="checkout-product-row">';
    echo '<span class="product-name">' . esc_html( $product_name ) . '</span>';
    echo '<span class="product-quantity">× ' . esc_html( $quantity ) . '</span>';
    echo '</div>';
}

2. 用CSS强制同行对齐 #

如果HTML结构没问题，直接添加CSS样式到主题自定义CSS或子主题的style.css中：

/* 自定义产品行样式 */
.checkout-product-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}
.product-name {
    flex: 1;
    margin-right: 16px;
}
.product-quantity {
    white-space: nowrap;
}

若使用WooCommerce默认模板，可针对默认类名修改：

.woocommerce-checkout-review-order-table .cart_item {
    display: flex;
    align-items: center;
}
.woocommerce-checkout-review-order-table .product-name {
    margin-right: auto;
}
.woocommerce-checkout-review-order-table .product-quantity {
    margin-left: 16px;
}

3. 覆盖WooCommerce模板文件 #

通过模板覆盖修改输出结构：

1. 在子主题目录下创建woocommerce/checkout/review-order.php
2. 复制WooCommerce原版review-order.php内容到该文件
3. 找到购物车项目循环部分，将数量输出移至产品名称的<td>内：

<?php foreach ( $cart_items as $cart_item_key => $cart_item ) : ?>
    <?php
    $_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_checkout_cart_item_visible', true, $cart_item, $cart_item_key ) ) :
        ?>
        <tr class="<?php echo esc_attr( apply_filters( 'woocommerce_cart_item_class', 'cart_item', $cart_item, $cart_item_key ) ); ?>">
            <td class="product-name">
                <?php echo apply_filters( 'woocommerce_cart_item_name', $_product->get_name(), $cart_item, $cart_item_key ) . '&nbsp;'; ?>
                <!-- 将数量移至名称所在单元格 -->
                <span class="inline-quantity">× <?php echo $cart_item['quantity']; ?></span>
                <?php echo wc_get_formatted_cart_item_data( $cart_item ); ?>
            </td>
            <td class="product-total">
                <?php echo apply_filters( 'woocommerce_cart_item_subtotal', WC()->cart->get_product_subtotal( $_product, $cart_item['quantity'] ), $cart_item, $cart_item_key ); ?>
            </td>
        </tr>
    <?php endif; ?>
<?php endforeach; ?>

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