Quantcast
Channel: Themelocation
Viewing all articles
Browse latest Browse all 103

How to Hide/remove/disable Add to cart button in WooCommerce ?

$
0
0

There is no option in the WooCommerce admin interface that would allow you to hide, disable or remove add to cart button on your e-commerce Shop.

Although the greater majority of online stores would need this button, there are a couple of reasons why you may want to disable the default button, whether temporarily or permanently.

For instance, owners of offline stores who would want to create an online of their products, but aren’t just ready to enter the e-commerce world can choose to use WooCommerce in building their catalogs.

This would allow them to quickly migrate to online selling the moment they’re ready. Meanwhile, some store owners may only want to disable the “add to cart” feature for a couple of their products they would want to sell exclusively in-store.

Some developers may also desire to give up the default button for their very own customized cart and checkout experience for their users.

In any case, this tutorial would allow you to disable consumer purchases by removing “Add to Cart”. Whether you’re using Avada, Flatsome, Storefront, X Theme, or any WooCommerce-compatible WordPress theme, what We would be presenting in this tutorial would allow you to remove the add to cart button quick and easy.

1- The easiest method: use Free plugin!Instead of having to fiddle with theme functions and custom code, the best option is to use our Remove Add to Cart and Hide Prices plugin, especially if you are not comfortable with PHP.

The plugin is available via above link, and it would allow you to hide item prices for products within a certain category, complete category, hide prices on different product pages, and remove the add to cart button for either certain products, category or the entire shop. You can even make our plugin replace the Add to Cart button with Contact Us.

Our plugin is your best bet if you just want to quickly get rid of the add to cart button (and have the option to re-enable it in the future.

2- Working with the code:If you really don’t want to take advantage of our quick and easy plugin and you feel that you have the necessary programming experience, you can continue with the rest of the tutorial.

We will be taking advantage of the diverse set of hooks WooCommerce has to offer in WordPress. With the help of these hooks, we can remove prices and buttons as we edit the relevant theme files.

After installing WordPress and WooCommerce properly, you should make sure that there is a product in the backend to start with. To do this, go to Products > Add Product. Fill in the necessary information – you can use dummy information for now, like the example below:

By default, you will see that the Add to Cart button appears on the product listings both in the shop page and the product detail page. In the figure below, you would notice it right beside the quantity selector.

At this point, it’s time to remove the button. All we have to do right now is to add these two hooks appropriately within our site backend.

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 );

The best place to add this is the ever-useful functions.php file. To quickly access this file via the WordPress backend, you can choose to visit Appearance > Themes and select Theme Functions (functions.php) on the right-hand side.

Add the code to the end of the functions.php file as shown in the screenshot below and make sure to save the changes made.

Save the file then refresh page. Add to cart buttons should have been removed from the site.

– Hide add to cart button on category and product pages using CSS

Go to each category page, on each category page right click and then click on the inspect element. Find the div having id=”post-area” before the <div> having id=”woo-content” and note the category specific class for this category.

In my case which is “product-cat-category-2″ and write an inherited rule like this.

.product-cat-category-2 .add_to_cart_button{ display: none !important; }

It will remove add to cart button only from that specific category page.

woocommerce

To remove add to cart button from single product page of a specific category.

Add the following rule inherited by category same as above.

.product-cat-category-2 .single_add_to_cart_button{ display: none !important; }

It will remove add to cart button from products in specified category.

woocommerce

How to remove the Add to Cart button from a specific product Only?

There are a couple of ways to do that, depending on the desired result:

1-  You could simply empty the price fields. The product will no longer have a price, nor an Add to cart button.
2-  You could enable stock management, and set the product stock to zero.
3-  You could write a filter for the “woocommerce_is_purchasable” hook, and return false when the product ID is the target one. This would leave the price visible, and display a “product cannot be purchased” note instead of the Add to cart button.

We will achieve the result by going with the Third option that is to add code to the functions.php file of the Child theme.

add_filter('woocommerce_is_purchasable', 'my_woocommerce_is_purchasable', 10, 2);
function my_woocommerce_is_purchasable($is_purchasable, $product) {
        return ($product->id == whatever_mambo_jambo_id_you_want ? false : $is_purchasable);
}

Viewing all articles
Browse latest Browse all 103

Trending Articles