如何为WooCommerce结账及购物车页新增自定义字段添加CSS样式

前置操作：给字段添加专属CSS类 #

首先修改你之前写在functions.php里的新增字段代码，给每个字段的外层标签添加自定义类名，避免后续写样式影响其他页面元素，示例代码如下：

// 示例：在购物车/结账页总额区域添加自定义字段（替换你原有新增字段的逻辑）
add_action( 'woocommerce_cart_totals_after_order_total', 'add_custom_checkout_fields' );
add_action( 'woocommerce_review_order_after_order_total', 'add_custom_checkout_fields' );
function add_custom_checkout_fields() {
    // 行政费字段，添加专属类名
    echo '<tr class="custom-checkout-row admin-fees"><th>行政费</th><td data-title="行政费">¥' . get_admin_fees() . '</td></tr>';
    // 总重量字段，添加专属类名
    echo '<tr class="custom-checkout-row total-weight"><th>总重量</th><td data-title="总重量">' . get_total_weight() . 'kg</td></tr>';
    // 国内运费字段，添加专属类名
    echo '<tr class="custom-checkout-row domestic-shipping"><th>国内运费</th><td data-title="国内运费">¥' . get_domestic_shipping() . '</td></tr>';
}

如果你用的是其他钩子输出字段，只要给包裹字段的外层HTML标签加对应类名即可。

添加自定义CSS样式 #

你可以任选以下一种方式添加CSS：

• 后台路径：WordPress 后台 → 外观 → 自定义 → 额外CSS，直接粘贴样式代码后可实时预览，保存即生效
• 直接将样式代码写入当前主题根目录下的style.css文件末尾

参考样式代码（可根据设计需求自行调整参数） #

/* 自定义字段通用样式 */
.custom-checkout-row th, .custom-checkout-row td {
    padding: 10px 0;
    border-bottom: 1px solid #f0f0f0;
    font-size: 14px;
}
/* 行政费样式 */
.custom-checkout-row.admin-fees th, 
.custom-checkout-row.admin-fees td {
    color: #666;
    font-weight: 500;
}
/* 总重量样式 */
.custom-checkout-row.total-weight th, 
.custom-checkout-row.total-weight td {
    color: #888;
    font-size: 13px;
}
/* 国内运费样式 */
.custom-checkout-row.domestic-shipping th, 
.custom-checkout-row.domestic-shipping td {
    color: #222;
    font-weight: 700;
    padding-top: 12px;
    border-top: 1px solid #e0e0e0;
    border-bottom: none;
}
/* 移动端适配 */
@media screen and (max-width: 767px) {
    .custom-checkout-row th, .custom-checkout-row td {
        padding: 8px 0;
        font-size: 13px;
    }
}

如果你不想修改functions.php里的字段代码，也可以右键点击结账页的对应字段，选择「审查元素」，获取字段默认的类名/选择器，直接用默认选择器写样式即可。

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