16

WooCommerce : How to Disable Shopping Cart Function

Posted July 11th, 2012 in WooCommerce and tagged by terrytsang

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!

16 Responses so far.

  1. Pavel Burov says:

    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. terrytsang says:

    Hi Pavel. Happy to know it helped :) Thanks for your sharing as well, cheers!

  3. Joachim says:

    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.

  4. terrytsang says:

    Hi Joachim, happy to hear from you and hope you will continue supporting.

    More tips and extensions will be coming in the future :)

  5. Juan P says:

    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.

  6. terrytsang says:

    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.

  7. Fiona says:

    Hello, you said to remove Line 61. What is line 61?

  8. terrytsang says:

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

  9. Darryl says:

    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.

  10. terrytsang says:

    Hi Darryl, glad it helped. Will keep posting good tips here, cheers!

  11. Laurie says:

    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.

  12. terrytsang says:

    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.

  13. alv says:

    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

  14. Federico says:

    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

  15. marv says:

    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

  16. 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.

Leave a Reply