如何自定义Woocommerce结账页Shipping配送模块的前端样式

解决方案 #

你不需要删除<th>标签，仅需调整PHP模板结构+添加自定义CSS即可实现预期效果，完全不影响原有配送功能。

1. 修改Cart-shipping.php模板结构

修正原有无效的嵌套<tr>结构，将标题行和配送选项行拆分，标题所在<th>设置colspan="2"占满整行实现单列展示：

<tr class="woocommerce-shipping-totals shipping">
    <!-- 配送标题单列展示 -->
    <th colspan="2" data-title="<?php echo esc_attr( $package_name ); ?>" style="width:100%">
        <?php echo wp_kses_post( $package_name ); ?>
    </th>
</tr>
<tr class="shipping-methods-row">
    <td colspan="2" style="width:100%">
        <?php if ( $available_methods ) : ?>
            <ul id="shipping_method" class="woocommerce-shipping-methods">
                <?php foreach ( $available_methods as $method ) : ?>
                    <li>
                        <?php
                        if ( 1 < count( $available_methods ) ) {
                            printf( '<input type="radio" name="shipping_method[%1$d]" data-index="%1$d" id="shipping_method_%1$d_%2$s" value="%3$s" class="shipping_method" %4$s />', $index, esc_attr( sanitize_title( $method->id ) ), esc_attr( $method->id ), checked( $method->id, $chosen_method, false ) );
                        } else {
                            printf( '<input type="hidden" name="shipping_method[%1$d]" data-index="%1$d" id="shipping_method_%1$d_%2$s" value="%3$s" class="shipping_method" />', $index, esc_attr( sanitize_title( $method->id ) ), esc_attr( $method->id ) );
                        }
                        printf( '<label for="shipping_method_%1$s_%2$s">%3$s</label>', $index, esc_attr( sanitize_title( $method->id ) ), wc_cart_totals_shipping_method_label( $method ) );
                        do_action( 'woocommerce_after_shipping_rate', $method, $index );
                        ?>
                    </li>
                <?php endforeach; ?>
            </ul>
            <?php if ( is_cart() ) : ?>
                <p class="woocommerce-shipping-destination">
                    <?php
                    if ( $formatted_destination ) {
                        printf( esc_html__( 'Shipping to %s.', 'woocommerce' ) . ' ', '<strong>' . esc_html( $formatted_destination ) . '</strong>' );
                        $calculator_text = esc_html__( 'Change address', 'woocommerce' );
                    } else {
                        echo wp_kses_post( apply_filters( 'woocommerce_shipping_estimate_html', __( 'Shipping options will be updated during checkout.', 'woocommerce' ) ) );
                    }
                    ?>
                </p>
            <?php endif; ?>
            <?php
        elseif ( ! $has_calculated_shipping || ! $formatted_destination ) :
            if ( is_cart() && 'no' === get_option( 'woocommerce_enable_shipping_calc' ) ) {
                echo wp_kses_post( apply_filters( 'woocommerce_shipping_not_enabled_on_cart_html', __( 'Shipping costs are calculated during checkout.', 'woocommerce' ) ) );
            } else {
                echo wp_kses_post( apply_filters( 'woocommerce_shipping_may_be_available_html', __( 'Enter your address to view shipping options.', 'woocommerce' ) ) );
            }
        elseif ( ! is_cart() ) :
            echo wp_kses_post( apply_filters( 'woocommerce_no_shipping_available_html', __( 'There are no shipping options available. Please ensure that your address has been entered correctly, or contact us if you need any help.', 'woocommerce' ) ) );
        else :
            echo wp_kses_post( apply_filters( 'woocommerce_cart_no_shipping_available_html', sprintf( esc_html__( 'No shipping options were found for %s.', 'woocommerce' ) . ' ', '<strong>' . esc_html( $formatted_destination ) . '</strong>' ) ) );
            $calculator_text = esc_html__( 'Enter a different address', 'woocommerce' );
        endif;
        ?>
        <?php if ( $show_package_details ) : ?>
            <?php echo '<p class="woocommerce-shipping-contents"><small>' . esc_html( $package_details ) . '</small></p>'; ?>
        <?php endif; ?>
        <?php if ( $show_shipping_calculator ) : ?>
            <?php woocommerce_shipping_calculator( $calculator_text ); ?>
        <?php endif; ?>
    </td>
</tr>

2. 添加自定义CSS实现左右布局

将以下CSS添加到WordPress后台「外观-自定义-额外CSS」或者子主题的style.css文件中，即可实现配送名称居左、价格居右的效果：

/* 配送选项项布局 */
.woocommerce-shipping-methods li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
    list-style: none;
    margin: 0;
}
/* 标签内部左右分布 */
.woocommerce-shipping-methods li label {
    display: flex;
    width: 100%;
    justify-content: space-between;
    margin-left: 10px;
    cursor: pointer;
}
/* 价格不折行 */
.woocommerce-shipping-methods li label .woocommerce-Price-amount {
    white-space: nowrap;
}

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