如何隐藏WordPress店铺和分类页的WooCommerce“选择选项”与“加入购物车”按钮

方法一：PHP代码实现（推荐，稳定性更高） #

通过WooCommerce的钩子系统精准控制按钮显示，避免样式冲突。将以下代码添加到主题的functions.php文件，或者使用Code Snippets这类自定义代码插件：

// 移除店铺/分类页的加入购物车按钮
remove_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart', 10 );

// 处理可变产品的"选择选项"按钮
remove_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_product_link_close', 5 );
add_action( 'woocommerce_after_shop_loop_item', function() {
    global $product;
    if ( ! $product->is_type( 'variable' ) ) {
        echo '</a>';
    }
}, 5 );

这段代码仅在店铺和分类页（商品循环列表）中移除按钮，产品详情页的加入购物车功能完全不受影响。

方法二：修正CSS选择器（解决之前无效的问题） #

如果你之前的CSS无效，大概率是选择器没有精准匹配页面。尝试添加以下CSS到WordPress自定义器的「Additional CSS」区域：

/* 隐藏店铺/分类页的加入购物车按钮 */
.archive .woocommerce-loop-add-to-cart-link,
.archive .single_add_to_cart_button {
    display: none !important;
}

/* 隐藏可变产品的"选择选项"按钮 */
.archive .product-type-variable .woocommerce-loop-add-to-cart-link {
    display: none !important;
}

.archive是WooCommerce店铺和分类页的通用父类，确保样式只作用在目标页面，不会干扰产品详情页。

方法三：主题内置设置（部分主题支持） #

部分适配WooCommerce的主题会在主题设置面板中提供相关选项，比如「WooCommerce」-「产品列表」板块，可能有隐藏加入购物车按钮的开关，直接勾选即可完成设置。

注意事项 #

• 修改主题functions.php前请备份文件，优先使用代码插件管理自定义代码，避免主题更新导致代码丢失。
• 如果CSS仍不生效，打开浏览器开发者工具（F12），查看按钮的实际类名，调整选择器匹配你的主题结构。

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