Typek – Blog

How to Hide the \Add to Cart\ Button in WooCommerce Using PHP Snippet

Introduction

In this tutorial, you will learn how to hide the ‘Add to Cart’ button in WooCommerce using a PHP snippet. This can be useful in various scenarios, such as when you want to showcase products without allowing users to purchase them directly or if you want to restrict purchasing to specific user roles. The tutorial will cover the following topics:

  • Understanding the code snippet used to hide the ‘Add to Cart’ button
  • Using the code snippet in your child theme’s functions.php file
  • Extending the code snippet to include conditional logic for hiding the button in specific situations

Understanding the Code Snippet

The core functionality for hiding the ‘Add to Cart’ button in WooCommerce can be achieved using a simple PHP snippet. This snippet will essentially remove the action responsible for displaying the ‘Add to Cart’ button in WooCommerce.

Here is the basic code snippet that you will be using to hide the ‘Add to Cart’ button:


add_action( 'woocommerce_after_shop_loop_item', 'typek_remove_add_to_cart_buttons', 1 );
    function typek_remove_add_to_cart_buttons() {
remove_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart', 10 );
}

Let’s break down this code snippet to understand how it works:

  • add_action( 'woocommerce_after_shop_loop_item', 'typek_remove_add_to_cart_buttons', 1 ); – This line of code hooks the typek_remove_add_to_cart_buttons() function to the woocommerce_after_shop_loop_item action. This action is triggered after each product in the WooCommerce shop loop, allowing you to modify the output for each product.
  • function typek_remove_add_to_cart_buttons() { ... } – This is the custom function that will be responsible for hiding the ‘Add to Cart’ button.
  • remove_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart', 10 ); – Inside the custom function, this line of code removes the default action responsible for displaying the ‘Add to Cart’ button in WooCommerce. By removing this action, the button will no longer be displayed on the frontend of your website.

Using the Code Snippet in Your Child Theme’s Functions.php File

In order to use this code snippet on your WooCommerce website, you will need to add it to your child theme’s functions.php file. This file is responsible for adding custom functionality to your WordPress website, and it is recommended to use a child theme to prevent your changes from being overwritten when your parent theme is updated.

Follow these steps to add the code snippet to your child theme’s functions.php file:

  1. If you don’t already have a child theme set up, create one by following this guide from the WordPress Developer Handbook.
  2. Access your website’s files using an FTP client or your web host’s file manager.
  3. Navigate to the /wp-content/themes/your-child-theme/ directory, where your-child-theme is the name of your child theme.
  4. Open the functions.php file. If it doesn’t exist, create a new file with that name.
  5. Add the code snippet from the previous section to the bottom of the functions.php file.
  6. Save your changes and check your website to ensure the ‘Add to Cart’ button is no longer visible.

Extending the Cos with the actual IDs of the products you want to target on your website.

Hiding the ‘Add to Cart’ Button for Specific User Roles

If you want to hide the ‘Add to Cart’ button only for specific user roles, you can modify the code snippet to include a conditional check for the user role. Here’s an example of how to do this:

add_action( 'woocommerce_after_shop_loop_item', 'typek_remove_add_to_cart_buttons_for_specific_user_roles', 1 );
function typek_remove_add_to_cart_buttons_for_specific_user_roles() {

        if ( current_user_can( 'customer' ) ) { // Replace 'customer' with the user role you want to hide the button for

            remove_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart', 10 );

        }

    }

In this example, the current_user_can() function checks if the current user has the specified user role. Replace the example user role (‘customer’) with the actual user role you want to target on your website.

Conclusion

In this tutorial, you have learned how to hide the ‘Add to Cart’ button in WooCommerce using a PHP snippet. By following the steps outlined in this tutorial, you can easily customize the display of the ‘Add to Cart’ button on your WooCommerce website to suit your specific needs.

More traffic??

Are you looking for effective solutions to increase your Google search visibility?

Contact us and discover the full potential of online sales.

What our clients are say?

For me, they are a happiness factory. They managed my store’s website in such a way that users became happy, after which it turned out that the search engine was also happy. When the search engine became happy and started bringing me more happy customers, my business became equally happy 🙂

Matt

Great company, I recommend it to everyone. Services of the highest standard. Very good customer approach. I am very satisfied with their work.

Lukasz Szajny

Complete professionalism and an incredible commitment to their work. It’s worth emphasizing their hassle-free communication and full availability. I definitely recommend them.

Alexander