Manipulate List Item in Cart Page Using Block Editor

Hi @top-node,

Thanks for reaching out and for explaining what you’re trying to achieve with the Cart Line Items block.

I understand that you would like to customize the individual cart line items—for example, hide the product image or move the Remove item icon to a different position.

At the moment, the Cart Line Items block does not provide built-in options in the Site Editor/Gutenberg editor to hide the product image or change the position of the Remove item icon. The internal structure of this block is currently not available for that type of visual customization through the editor.

These changes would therefore require custom code, such as custom CSS, JavaScript, or other WooCommerce customization depending on the exact result you’re looking for.

Please note that custom development and troubleshooting custom code are outside the scope of WooCommerce support, so we’re unable to provide or maintain a custom implementation. If you need help with these changes, you can consider hiring a WooCommerce developer through Codeable or another qualified WordPress/WooCommerce developer.

Thanks for your understanding.

Hi @top-node!

We would not recommend overriding the Cart template for this particular customization, since the layout can be adjusted more easily using custom CSS.

For example, the following CSS will hide the product image and position the Remove item button on the left side on desktop screens:

@media only screen and (min-width:981px){
    .wp-block-woocommerce-cart-line-items-block td.wc-block-cart-item__image {
        display: none;
    }

    .wp-block-woocommerce-cart-line-items-block button.wc-block-cart-item__remove-link {
        position: absolute;
        top: 50%;
        left: 0px;
    }

    .wp-block-woocommerce-cart-line-items-block .wc-block-cart-item__product {
        position: relative;
    }

    .wp-block-woocommerce-cart-line-items-block .wc-block-cart-item__wrap {
        margin-left: 50px;
    }
}

You can add this under Appearance → Customizer → Additional CSS.

This approach avoids modifying or overriding the Cart template and is generally preferable for a simple visual adjustment like this.

If you prefer not to use custom CSS and instead want to override the template, that is also possible, but you would need to manage the customization yourself and review it for compatibility when WooCommerce updates the relevant templates.

Please note that custom CSS/template customization falls outside the scope of WooCommerce support, so we can provide general guidance but cannot maintain or troubleshoot the custom implementation.

Hi @top-node

Thanks for clarifying your concern. I understand that you need to change the order of the columns, rather than simply adjust their styling.

If you’re comfortable with custom development, you can use the available filters for the Cart block to customize its layout and behavior. This guide explains how to customize the Cart block using filters:

Cart Line Items Filters

You can review the available filters there to see whether they can be used to achieve the specific column arrangement you need.

If the available filters don’t allow you to achieve the layout you need, you can use the legacy shortcode-based Cart.

Please note that implementing and maintaining custom code would be outside the scope of WooCommerce support.