怎么隐藏、删除或禁用 WooCommerce 中的“添加到购物车”按钮

有读者留言想知道怎么隐藏、移除或禁用“加入购物车”按钮。为此，给大家整理了一篇简单教程，希望能帮助到你们！

完成这些操作，您需要更高的自定义能力，根据需求更新商店的功能。WordPress 插件和 WooCommerce 扩展的庞大库提供了广泛的自定义选项，从而带来更友好的用户体验。

在本文中，会展示如何在 WooCommerce 商店中隐藏、移除或禁用“加入购物车”按钮，适用于售罄商品或仅显示产品目录的情况。

为什么要隐藏、移除或禁用“加入购物车”按钮？

“加入购物车”按钮是任何 WooCommerce 商店中的关键组件。
它是从浏览到购买的桥梁，是客户购买旅程的第一步。然而，如果需要隐藏、移除或禁用这个按钮。

例如：商店是一个仅供展示的产品目录，没有直接购买功能；或者，希望某些产品可以查看但无法购买。无论原因是什么，了解如何操作这个按钮可以让您更好地控制商店的功能。

理解“隐藏”和“移除”的区别

隐藏“加入购物车”按钮会使其在页面上不可见，而移除按钮则是完全从网站的代码中删除。这意味着即使有人检查网站的代码，他们也找不到按钮。如果想防止技术娴熟的用户绕过你的商店流程，这可能会非常有用。

💡 注意：在进行任何更改之前，一定要对网站进行备份。如果出现问题，可以快速将网站恢复到之前的状态。

如何从 WooCommerce 产品页面隐藏“加入购物车”按钮

以下是移除 WooCommerce 产品详情页面和商店页面（产品列表页面）“加入购物车”按钮的步骤。为了实现这一功能，可以使用以下钩子：

remove_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart');

remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart');

这些钩子可以插入到你认为合适的位置。通常，将这些钩子添加到主题文件夹中的 functions.php 文件是最常见的做法。

推荐的文件位置

尽管将代码添加到 functions.php 文件中很常见，但在某些情况下可能会导致错误。因此，更推荐将这些钩子放置到插件文件夹中的 woocommerce.php 文件中。

下面是访问woocommerce.php文件的步骤：

• 导航到 WordPress → wp-content。
• 点击插件 → WooCommerce → woocommerce.php。

接下来添加以下代码：

/**

 * Main instance of WooCommerce.

 *

 * Returns the main instance of WC to prevent the need to use globals.

 *

 * @since  2.1

 * @return WooCommerce

 */

function WC() {

    remove_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart');

    remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart');

    return WooCommerce::instance();

}

添加代码后，保存文件并刷新页面。如果操作正确，应该会看到“添加到购物车”按钮已从页面中删除。

条件隐藏 WooCommerce 添加到购物车按钮

在某些情况下，如果只想隐藏特定产品的“添加到购物车”按钮。在这种情况下，需要使用条件方法。

隐藏特定产品的 Woocommerce 添加到购物车按钮

按照以下步骤隐藏特定产品的“添加到购物车”按钮：

• 导航至 WordPress 仪表盘 → 产品 → 所有产品。
• 将鼠标悬停在想要隐藏“添加到购物车”按钮的产品上，并记下产品 ID（在此示例中，ID 为 25）。

接下来，将以下代码添加到网站的functions.php文件中：

add_action( 'woocommerce_after_shop_loop_item', 'hide_add_to_cart_for_specific_product', 10 );

function hide_add_to_cart_for_specific_product() {

    global $product;

    if ( 25 == $product->get_id() ) {

        remove_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart' );

        remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 30 );

    }

}

用此代码，ID 为 25 的产品的“添加到购物车”按钮将被隐藏。在本例中，它是一个可定制的杯子。

在商店和类别页面上隐藏 Woocommerce 价格

要删除商店和类别页面上的 WooCommerce 价格，需要打开functions.php文件并添加以下代码；

remove_action( 'woocommerce_after_shop_loop_item_title', 'woocommerce_template_loop_price', 10 );

通过添加此代码，可以删除商店和类别页面上的产品价格。结果如下：

删除特定产品的“添加到购物车”按钮

有三种方法可以从特定产品页面中删除“添加到购物车”按钮：

1. 从价格字段中删除值。这将导致产品不再有价格，从而删除“添加到购物车”按钮。
2. 启用库存管理并将产品库存设置为零。
3. 使用woocommerce_is_purchasable钩子的过滤器。

使用 woocommerce_is_purchasable Hook

这里用一个过滤器，针对特定的产品 ID 来删除其“添加到购物车”按钮。

每当此过滤器识别出我们目标产品的产品 ID 时，它都会返回 false。因此，虽然价格仍然可见，但“添加到购物车”按钮将替换为一条通知，指出“无法购买产品”。

实现这一点，将以下代码添加到网站functions.php文件中即可。

add_filter('woocommerce_is_purchasable', 'woocommerce_cloudways_purchasable');

function woocommerce_cloudways_purchasable($cloudways_purchasable, $product) {

return ($product->id == your_specific_product_id (like 22) ? false : $cloudways_purchasable);

}

禁用而不是隐藏或删除“添加到购物车”按钮

禁用“添加到购物车”按钮与隐藏或删除它不同。

当禁用按钮时，它仍然可见，但无法点击。如果想显示产品通常可用但目前缺货或由于其他原因不可用，这个功能很有用。

以下是如何使用自定义代码禁用“添加到购物车”按钮的方法：

• 导航到外观 → 主题编辑器并找到functions.php文件。
• 添加以下代码以禁用“添加到购物车”按钮：

add_filter( 'woocommerce_is_purchasable', 'disable_add_to_cart_button' );

function disable_add_to_cart_button( $is_purchasable ) {

    // You can add conditions here to disable the button for specific products

    return false; // return false disables the 'Add to Cart' button

}

•  单击“更新文件”以保存您的更改。

现在， WooCommerce 商店中的“添加到购物车”按钮应该已经被禁用了。

总结

在这篇博客中，探讨了 WooCommerce 的强大功能，重点学习了如何隐藏、移除或禁用“加入购物车”按钮，并了解了这些方法的独特优势。

常见问题解答

1. 如何在 WooCommerce 中禁用“加入购物车”按钮？

可以在主题的 functions.php 文件中使用代码片段禁用“加入购物车”按钮，针对特定产品或整个网站都适用：

remove_action('woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 30);

2. 如何移除 WooCommerce 的购物车图标？

要移除购物车图标，可以在主题的自定义器或 style.css 文件中添加以下自定义 CSS 代码：

.woocommerce-cart .cart-contents {
    display: none;
}

3. 如何更改 WooCommerce 的“加入购物车”按钮？

如果需要更改按钮的文本，可以在 functions.php 文件中添加以下代码：

add_filter('woocommerce_product_add_to_cart_text', function() { return 'Your Custom Text'; });

如果需要更改样式或功能，可以自定义按钮的 HTML 和 CSS。

4. 如何清空 WooCommerce 的购物车？

可以通过以下代码程序化清空 WooCommerce 购物车：

WC()->cart->empty_cart();

将代码添加到适当的位置（如插件或 functions.php 文件）后，购物车内容将被清空。