WooCommerce结账订单审核模块配送选项自定义求助

你需要将配送费用区域单独分离并添加边框、标题，可通过模板结构调整+CSS样式组合实现，具体步骤如下：

1. 调整订单审核模板结构（子主题操作） #

将WooCommerce原生模板/templates/checkout/review-order.php复制到你的子主题目录/woocommerce/checkout/review-order.php，找到配送信息相关代码，修改为：

<?php if ( WC()->cart->needs_shipping() && WC()->cart->show_shipping() ) : ?>
    <?php do_action( 'woocommerce_review_order_before_shipping' ); ?>
    <!-- 添加包裹容器和标题 -->
    <div class="shipping-section">
        <h3 class="shipping-title">配送信息</h3>
        <?php wc_cart_totals_shipping_html(); ?>
    </div>
    <?php do_action( 'woocommerce_review_order_after_shipping' ); ?>
<?php endif; ?>

通过div包裹配送区域，摆脱表格布局限制，方便后续样式精准控制。

2. 优化配送信息模板（可选） #

若需要更精细调整配送行结构，将/templates/cart/cart-shipping.php复制到子主题/woocommerce/cart/cart-shipping.php，找到表格行部分，调整为：

<tr class="woocommerce-shipping-totals shipping">
    <td colspan="2" class="shipping-total">
        <?php if ( $show_package_details ) : ?>
            <small><?php echo esc_html( $package_name ); ?></small>
        <?php endif; ?>
        <?php echo wp_kses_post( $shipping_method->get_label() ); ?>
        <?php do_action( 'woocommerce_after_shipping_rate', $shipping_method, $index ); ?>
    </td>
</tr>

用colspan="2"的td替代原有的th，避免多余单元格占用宽度，让内容自然撑满整行。

3. 添加自定义CSS样式 #

在子主题的自定义CSS面板或样式文件中添加以下代码：

/* 配送区域整体边框与间距 */
.shipping-section {
    border-top: 1px solid #bbb;
    border-bottom: 1px solid #ccc;
    padding: 15px 0;
    margin: 15px 0;
}

/* 配送标题样式 */
.shipping-title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 10px;
}

/* 确保配送行td宽度100%并居右 */
.shipping-section .woocommerce-shipping-totals td {
    width: 100%;
    text-align: right;
}

/* 隐藏多余th（若未调整模板则保留） */
.shipping-section .woocommerce-shipping-totals th {
    display: none;
}

/* 配送选项对齐优化 */
.shipping-section .shipping-methods {
    text-align: right;
    margin-top: 5px;
}

之前尝试无效的原因 #

• 直接给表格tr加边框，会受表格border-collapse属性影响，导致边框显示不完整；用div包裹后可脱离表格布局限制，样式更可控。
• 修改模板时未正确包裹配送区域，导致分隔符被加到了整个表格前后，而非目标区域。

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