如何在Magento 2商品分类页面添加带购物车图标的加入购物车按钮？

单纯靠CSS很难稳定实现图标嵌入效果，默认加入购物车按钮由模板生成，推荐通过主题模板修改+CSS布局调整的方式解决，步骤如下：

1. 修改商品列表项模板文件 #

找到当前主题的商品列表项模板，路径一般为：
app/design/frontend/[你的厂商名]/[你的主题名]/Magento_Catalog/templates/product/list/item.phtml

如果主题没有该文件，从Magento默认Luma主题复制一份（路径vendor/magento/module-catalog/view/frontend/templates/product/list/item.phtml），放到上述主题目录下。

打开文件后，找到生成加入购物车按钮的代码块（通常是<?= $block->getAddToCartButtonHtml() ?>），替换为以下代码嵌入系统自带的购物车图标：

<?php $addToCartButton = $block->getAddToCartButtonHtml(); ?>
<?php if ($addToCartButton): ?>
    <div class="action tocart with-icon">
        <span class="cart-icon">
            <svg class="icon icon-cart" aria-hidden="true">
                <use xlink:href="<?= $block->getViewFileUrl('Magento_Theme::images/icons.svg#cart') ?>"></use>
            </svg>
        </span>
        <?= $addToCartButton ?>
    </div>
<?php endif; ?>

2. 添加CSS样式调整布局 #

在主题的CSS文件（比如app/design/frontend/[你的厂商名]/[你的主题名]/web/css/styles.css或_module.less）中加入以下样式，让图标和按钮文字对齐：

.product-item .action.tocart.with-icon {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    justify-content: center;
}

.cart-icon .icon-cart {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

/* 可选：悬停时的图标颜色变化 */
.product-item .action.tocart.with-icon:hover .icon-cart {
    fill: #e02b27; /* 替换为你需要的悬停颜色 */
}

3. 清理缓存并部署资源 #

修改完成后，执行命令清理缓存：

bin/magento cache:clean

如果是生产环境，还需部署静态资源：

bin/magento setup:static-content:deploy -f

这样分类页的加入购物车按钮就会稳定显示购物车图标，不会因为模板结构变动失效。

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