WooCommerce : How to Disable Shopping Cart Function

Share this:

WooCommerce, an open-source eCommerce plugin for WordPress, now getting popular as the completed documentation and tutorial make the customization become easy for most of the users.

woocommerce

I have started using this powerful wordpress plugin and would like to share the tips, hope it will help anyone who face the same problem along the way.

If you need a shopping catalog without the “Add to Cart”, “Checkout” and “Payment” and other shopping cart functions, there is a tweak you can do to achieve that.

Step 1

I would suggest to create a child theme for main theme you plan to use for customization. For the project, i have used “Wootique” free theme. (Refer to the wordpress child theme reference for mroe details here : http://codex.wordpress.org/Child_Themes)

The final structure layout:

wp-content/ <- your wordpress directory
    themes/ <- the wordpress themes directory
        wootique/
        wooshop/
            custom.css
            functions.php
            index.php
            screenshot.png
            style.css

Let say the child theme i named “wooshop“, first i create style.css under the wooshop folder.

/*
Theme Name: WooShop
Description: WooShop - Child theme for the Wootique woocommerce theme
Version: 1.0
Author: terrytsang
Template: wooshop
*/

@import url("../wootique/style.css");

Step 2:

Copy the custom.css from wootique to wooshop, then add some css styles to hide the related shopping cart element.

/*disabled shopping cart function for woocommerce*/
#wrap_all .sub_menu {
 display:none;
}

.woocommerce-message {
 display:none;
}

.thumbnail_container div.thumbnail_container_inner a.product_type_variable,
.thumbnail_container div.thumbnail_container_inner a.product_type_simple {
 display:none;
}

.quantity {
 display:none;
}

.summary button {
 display:none;
}

.summary button[type="submit"] {
 display:none;
}

.cart_dropdown {
 display:none;
}

/*Custom styling for Mystile theme*/
ul.nav li.cart a,
ul.nav li.checkout a {
display:none;
}

Step 3:

Copy the functions.php from wootique to wooshop and put some wordpress action hooks under custom action section.

// Remove add to cart button on the navigation bar
remove_action( 'woo_nav_after', 'wootique_cart_button', 10);
remove_action( 'woo_nav_after', 'wootique_checkout_button', 20);

// Remove add to cart button from the product loop
remove_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart', 10, 2);

// Remove add to cart button from the product details page
remove_action( 'woocommerce_before_add_to_cart_form', 'woocommerce_template_single_product_add_to_cart', 10, 2);

//disabled actions (add to cart, checkout and pay)
remove_action( 'init', 'woocommerce_add_to_cart_action', 10);
remove_action( 'init', 'woocommerce_checkout_action', 10 );
remove_action( 'init', 'woocommerce_pay_action', 10 );

Step 4:

Copy index.php at wootique and override the index.php under the wooshop folder. Replace line #61 with below line:


<?php #woocommerce_template_loop_add_to_cart( $loop->post, $_product ); ?>

Step 5:

Create a (300 x 250 px) screenshot.png for the child theme.

Final Step:

Activate "wooshop" theme and done!

27 Comments

  1. Thanks. This article helped me a lot!
    I’ve tried step3 without hiding buttons with CSS (just for the sake of experiment) and found out that this piece of code does not remove cart button from single product page:
    // Remove add to cart button from the product details page
    remove_action( ‘woocommerce_before_add_to_cart_form’, ‘woocommerce_template_single_product_add_to_cart’, 10, 2);

    I dug these and other hooks and it seems that this one works fine even without additional CSS:
    remove_action( ‘woocommerce_single_product_summary’, ‘woocommerce_template_single_add_to_cart’, 30 );

  2. Hello,

    thanks for this tip :-) It seems, it prevented me from buying the “catalog visibility options” extension …

    I think, WooCommerce allows to switch off cart functionality in product pages already, so I only need to get rid of the cart elements in the menu … actually there was an error message, but I could leave the last 11 lines in the functions.php fix and now it works.

    I hope it will work in other themes as well, cause I need a responsive one in the medium term.

  3. Hello, thanks for the tutorial. I followed your directions but when I activated the template a fatal error happened because you name in the style.css the variable Template: wooshop (as your child theme) It must be Wootique (as your parent theme).

    Finally I’m novice and I didn’t found how to delete the cart button on the navigation bar because in your explanation you used
    remove_action( ‘woo_nav_after’, ‘wootique_cart_button’, 10);
    My theme is Sliding, and I don’t know what is my cart_button, i tried ‘sliding_cart_button’ but it didn´t work.

    Thank you.

  4. Hi, Juan. Nice to meet you :)

    You can remove my 2 lines below:
    remove_action( ‘woo_nav_after’, ‘wootique_cart_button’, 10);
    remove_action( ‘woo_nav_after’, ‘wootique_checkout_button’, 20)

    Then you try to open files in your theme (wp-content/themes/[theme_name]/includes/theme-woocommerce.php), search for line:
    add_action(‘woo_nav_after’, [function_name], [num])
    …..

    If you found this line, copy this line and change that in functions.php at your theme folder:
    remove_action(‘woo_nav_after’, [function_name], [num])

    Anyway, if you not able to do that, maybe you can send your theme files (header.php and includes/theme-woocommerce.php) to my email so that i can help you on this.

  5. Hi Fiona. Actually just commented out the function at that line.

    Original Line 61 [wootique index.php]
    < ?php woocommerce_template_loop_add_to_cart( $loop->post, $_product ); ?>

    New Line 61
    < ?php #woocommerce_template_loop_add_to_cart( $loop->post, $_product ); ?>

  6. Super helpful, thanks! I adapted this logic since my sites are running on the Genesis Framework.
    The CSS changes you highlighted went in the existing child themes Style.css file.
    StudioPress released a plugin called Genesis Connect for WooCommerce, so I put the PHP actions inside the main php file in the plugin (genesis-connect-woocommerce.php). It worked exactly as I had hoped.

    Thanks again.

  7. Hello terrytsang,

    I am having trouble removing the shopping cart icon, checkout and $0 dollar sign from my homepage. I have the Mystile WordPress theme. I tried adding CSS code to remove the cart from my custom style sheet but so far nothing has worked. Also, I added .cart_dropdown {display:none;} to the functions.php file but I received a error message on line 26. I backed up the functions.php file before making changes so I did not lose any information. How can I disable these shopping features? Thanks.

  8. Hi Laurie, you should put the css code at wp-content/themes/mystile/custom.css, including .cart_dropdown {display:none;}, please do not put css code in functions.php.

    I have tested and put below code at custom.css file at mystile theme folder:


    /*Default : disabled shopping cart function for woocommerce*/
    #wrap_all .sub_menu {
    display:none;
    }

    .woocommerce-message {
    display:none;
    }

    .thumbnail_container div.thumbnail_container_inner a.product_type_variable,
    .thumbnail_container div.thumbnail_container_inner a.product_type_simple {
    display:none;
    }

    .quantity {
    display:none;
    }

    .summary button {
    display:none;
    }

    .summary button[type="submit"] {
    display:none;
    }

    .cart_dropdown {
    display:none;
    }

    /*Custom styling for Mystile theme*/
    ul.nav li.cart a,
    ul.nav li.checkout a {
    display:none;
    }

    Please give it a try and hope it will help.

  9. Hi, Terrytsang,

    What about ‘Artificer’ theme?
    How to remove add to cart button in ‘Artificer Theme’ with custom action on function.php ?

    (I mean not just with CSS only)

    Thanks

  10. Hi Jerry, Im Federico from Argentina.

    Excelent tips!

    In my case, I want to remove all the checkout and payment options but I need to keep enable all the cart funtionality.
    In ‘My Cart’ I only need to show the pictures of the products selected, the product name, and the button “update cart”. I need to delete from “my cart”: price, quantity, total, subtotal, checkout button,etc.

    Could you tell me witch lines of codes I have to put into function.php and custom.css in my childtheme? Im using mystile as parent theme.

    Thanks a lot!

    Federico

  11. Hi

    My customer has two different kinds of products. Variable products that have a price and can be bought in the shop and then others that he only wants do display but leave out the price (price on request).
    Not setting a prize doesn’t show the DropDowns (and he wants those to show) and setting the prize to 0 means the products is for sale, but free.

    Can I set it to free (change the string) and remove the cart button for free products?

    Thx,
    Marv

  12. We are usually to blogging and i personally appreciate your site content.

    Your article has really peaks my interest. I am going to bookmark your website and maintain checking for
    brand spanking new information.

  13. I have the same issue as Marv. Anyone has an solution got turning price+card on/off for specific products?

  14. Hi TerryTsang,

    I followed your instruction and the page is showing Fatal error as soon as I activated the wooshop theme.

    I have also tried to change the template variable name to Wootique in style.css (as per Juan’s suggested) but still not working.

    Any input would be greatly appreaciated.

    Thanks.

  15. sorry,

    plz help me out!
    There is no line in my wootique/index.php

    as u comment in ur previous post.

    post, $_product ); ?>

  16. Is it possible to hide the prices/buttons based on the category an item is in? I am building a site and will have a few items for sale and a few that are for rent. I would like to hide pricing and add to cart buttons for the rental items. It would be amazing to be able to manage both sets of inventory in one system!

  17. Hi!
    I am using woocommerce with wootique theme –
    I don’t want any cart icon, or checkout icon to appear in the main navigation menu.
    I want to disble the text “Checkout” that appears on the right of the nav menu when an item is added to the cart!
    I have been able to stop the “Items in Cart” text and icon from showing with:
    remove_action(‘woo_nav_after’, ‘wootique_cart_button’, 10);
    remove_action(‘woo_nav_after’, ‘woocommerce_cart_link’, 10);
    remove_action(‘woo_nav_after’, ‘wootique_checkout_button’, 20);

    What am I missing? Thanks!

    Heather

  18. Hi.
    I’m using Mystile theme.
    How do I move the Login link at the top right navigation menu to the left, just before the cart icon?

    Thanks.

Leave a Comment.