WooCommerce如何自定义结账表单和样式

WooCommerce 现在有两种结账体验：Blocks（Gutenberg 区块结账） 与 经典 shortcode 结账 。很多字段编辑插件（如 Checkout Field Editor for WooCommerce）只对经典结账生效。
如果你把页面改为使用简码 [woocommerce_checkout]，可以自由使用该插件，但需要手动恢复区块结账那样的 UI（例如商品缩略图 + 数量徽章）。
解决方法：用两个 WordPress/WooCommerce filter（钩子）：
1. woocommerce_cart_item_name：改写商品名称的 HTML，插入缩略图与徽章 DOM（并保留原有商品名链接/文本）。
2. woocommerce_checkout_cart_item_quantity：移除 WooCommerce 自动添加的 <strong class="product-quantity">× 1</strong>，避免重复。
CSS 使用区块的 class（.wc-block-components-order-summary-item__quantity），颜色用 CSS 变量 --theme-palette-color-1 继承全局调色板，这样当全局颜色变更时徽章颜色自动同步。

下载插件Checkout Field Editor for WooCommerce

WooCommerce里设置自定义结账字段，例如billing_first_name是中文的姓，billing_last_name是中文的名，可以调整字段上下顺序来显示字段的顺序

Checkout Field Editor 插件只能修改 "经典结账页（shortcode）" 的字段

但是WooCommerce网站用的是WooCommerce Blocks checkout（Gutenberg 区块版结账

区块结账使用完全不同的系统，不读取 Checkout Field Editor 的设置

只要关闭 WooCommerce Blocks 的结账，换成"经典结账页（shortcode）"

打开结账页面，使用Elementor编辑，删掉主题默认的结账容器

再新添一个简码shortcode

csharp 复制代码

[woocommerce_checkout]

就能显示Checkout Field Editor自定义的字段，现在修改[woocommerce_checkout]的样式

在主题，自定义里新增额外CSS

写入下面代码，CSS 不写死颜色，而是使用 var(--theme-palette-color-1)（许多区块主题/全局调色板都会定义）。如果你的主题使用不同的变量名，请相应调整。

css 复制代码

/* 整个商品行 */
.checkout-product-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 16px;
}

/* 图片容器，用于定位徽标 */
.checkout-product-thumb {
    position: relative;
    width: 60px;
    height: 60px;
    flex-shrink: 0;
}

/* 商品缩略图 */
.checkout-product-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
    display: block;
}

/* Woo Blocks 数量徽标（颜色继承 theme palette） */
.checkout-product-thumb .wc-block-components-order-summary-item__quantity {
    position: absolute;
    top: -6px;
    right: -6px;
    padding: 2px 7px;
    border-radius: 14px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    color: #fff; /* 文字颜色，Blocks 默认白色 */
    background: var(--theme-palette-color-1); /* 自动使用全局调色板颜色 */
}

/* 商品信息区域 */
.checkout-product-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* 商品标题 */
.checkout-product-title {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    display: block;
}

在外观，主题文件编辑器里，选着functions.php，注意：始终用子主题（child theme）来修改 functions.php，避免主题更新丢失修改。修改前请备份文件或站点。这次使用Blocksy Child

php 复制代码

// 在经典结账（shortcode）订单列表中加入商品缩略图 + WooBlocks风数量徽标
add_filter( 'woocommerce_cart_item_name', 'add_checkout_product_thumbnail', 10, 3 );
add_filter( 'woocommerce_checkout_cart_item_quantity', function( $quantity, $cart_item, $cart_item_key ) {
    return ''; // 删除默认数量
}, 10, 3 );
function add_checkout_product_thumbnail( $product_name, $cart_item, $cart_item_key ) {

    // 仅在结账页面生效
    if ( ! is_checkout() ) return $product_name;

    // 获取商品
    $product = $cart_item['data'];

    // 获取商品缩略图（小图）
    $thumbnail = $product->get_image( 'thumbnail' );

    // 数量徽标：使用 Woo Blocks 的 class（自动继承调色板）
    $qty = $cart_item['quantity'];
    $badge = '
        <div class="wc-block-components-order-summary-item__quantity">
            <span>' . $qty . '</span>
        </div>
    ';

    // 完整结构
    $html = '
    <div class="checkout-product-row">
        <div class="checkout-product-thumb">
            ' . $thumbnail . '
            ' . $badge . '
        </div>

        <div class="checkout-product-info">
            <span class="checkout-product-title">' . $product_name . '</span>
        </div>
    </div>
    ';

    return $html;
}

效果如下