使用wp_footer钩子添加CSS无效，需调整WooCommerce结算页移除按钮位置

我在WooCommerce结算页中，已经通过wp_footer钩子添加CSS修复了商品缩略图的margin和浮动样式，但核心问题是商品移除按钮（X）始终显示在缩略图右侧、商品名称旁边，试了多种CSS都无法将其移到缩略图左侧。

原使用的代码如下：

原CSS代码：

add_action( 'wp_footer', 'ls_product_image_css_checkout', 900 );
function ls_product_image_css_checkout() {

    // run only on checkout
    if ( is_checkout() ) { ?>

        <style>
        .product-item-thumbnail{ float:left; padding-right:20px; }
        .product-item-thumbnail img{ margin:0!important; }
        </style>

    <?php
    }
}

原调整按钮位置代码：

add_filter( 'woocommerce_cart_item_name', 'ls_product_removal_on_the_left_of_product_image_on_checkout', 20, 3 );
function ls_product_removal_on_the_left_of_product_image_on_checkout( $product_name, $cart_item, $cart_item_key ) {

    // only on checkout, of course
    if ( is_checkout() ) {

    // get cart
    $cart = WC()->cart->get_cart();

        // loop through cart
        foreach ( $cart as $cart_key => $cart_value ) {

            if ( $cart_key == $cart_item_key ) {

                $product_id = $cart_item[ 'product_id' ];
                $_product = $cart_item[ 'data' ];

                // this is part of what I cannot figure out
                $remove_product = sprintf(
                '<a class="rpfc" href="%s" title="%s" data-product_id="%s" data-product_sku="%s" data-cart_item_key="%s">&#10005;</a>',
                esc_url(wc_get_cart_remove_url( $cart_key)), __( 'Delete this product from my order', 'woocommerce' ),
                esc_attr( $product_id ),
                esc_attr( $_product->get_sku()),
                esc_attr( $cart_item_key ));
            }
        }

        // get product data
        $product = $cart_item[ 'data' ];

        // display the iamge on checkout, 40*40 px
        $thumbnail = $product->get_image( array( 40, 40 ) );

        // the HTML
        $image_html = '<div class="product-item-thumbnail">' . $thumbnail . '</div>';

        // get the product name and link it. If clicked, re-directed to the product page
        $product_name_link = '<a href="' . $product->get_permalink() . '">' . $product_name . '</a>';

        // the removal of the product BEFORE the image
        // REMOVAL (on the left of the image) IMAGE PRODUCT NAME
        $product_name = $remove_product . $image_html . $product_name_link;
    }

    return $product_name;
}

修正后的代码实现 #

1. 优化钩子函数（去除冗余逻辑）

原代码中遍历整个购物车属于冗余操作，直接利用钩子传入的参数即可生成移除按钮，同时调整HTML结构确保按钮、缩略图、商品名的顺序：

add_filter( 'woocommerce_cart_item_name', 'ls_product_removal_on_the_left_of_product_image_on_checkout', 20, 3 );
function ls_product_removal_on_the_left_of_product_image_on_checkout( $product_name, $cart_item, $cart_item_key ) {
    // 仅在结算页生效
    if ( is_checkout() ) {
        $_product = $cart_item['data'];
        
        // 生成移除按钮HTML
        $remove_product = sprintf(
            '<a class="rpfc remove-btn" href="%s" title="%s" data-product_id="%s" data-product_sku="%s" data-cart_item_key="%s">&#10005;</a>',
            esc_url( wc_get_cart_remove_url( $cart_item_key ) ),
            __( '删除该商品', 'woocommerce' ),
            esc_attr( $cart_item['product_id'] ),
            esc_attr( $_product->get_sku() ),
            esc_attr( $cart_item_key )
        );

        // 生成商品缩略图HTML
        $thumbnail = $_product->get_image( array( 40, 40 ) );
        $image_html = '<div class="product-item-thumbnail">' . $thumbnail . '</div>';

        // 生成带链接的商品名称
        $product_name_link = '<a href="' . $_product->get_permalink() . '">' . $product_name . '</a>';

        // 重新组合顺序：移除按钮 → 缩略图 → 商品名称
        $product_name = $remove_product . $image_html . $product_name_link;
    }

    return $product_name;
}

2. 调整CSS实现精准布局

使用Flex布局替代浮动，更稳定地控制元素排列顺序和对齐方式：

add_action( 'wp_footer', 'ls_product_image_css_checkout', 900 );
function ls_product_image_css_checkout() {
    if ( is_checkout() ) { ?>
        <style>
        /* 商品项容器设置弹性布局，确保元素横向排列 */
        .woocommerce-checkout-review-order-table .cart_item {
            display: flex;
            align-items: center;
            gap: 8px;
        }
        /* 移除按钮样式 */
        .rpfc.remove-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 24px;
            height: 24px;
            text-decoration: none;
            color: #dc3232;
            border: 1px solid #dc3232;
            border-radius: 50%;
            font-size: 16px;
            line-height: 1;
        }
        .rpfc.remove-btn:hover {
            background-color: #dc3232;
            color: #fff;
        }
        /* 缩略图固定尺寸，避免被压缩 */
        .product-item-thumbnail {
            flex-shrink: 0;
        }
        .product-item-thumbnail img {
            margin: 0 !important;
            width: 40px;
            height: 40px;
            object-fit: cover;
        }
        </style>
    <?php
    }
}

关键说明 #

• 移除了原代码中冗余的购物车循环，直接使用钩子传入的参数，提升代码性能；
• 给移除按钮新增remove-btn类，方便CSS定位和样式美化；
• 采用Flex布局替代Float，解决浮动布局的兼容性和稳定性问题；
• 通过flex-shrink: 0确保缩略图保持固定尺寸，不会被容器压缩。

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