There are many reasons why you may want to remove columns (e.g. subtotal) from the Cart table. Sometimes you just want to make it easier for your customers. The less information you show the better!
Some other times, you may have custom requirements. Well, hiding a Cart table column is actually very easy – and despite this can be done with PHP I believe the CSS way is way faster in this case. Here’s how it’s done!
/* Change number 4 with number of column you want to remove */
.woocommerce table.cart td:nth-of-type(4), .woocommerce table.cart th:nth-of-type(4) {
display: none;
}
This code still works, unless you report otherwise. To exclude conflicts, temporarily switch to the Storefront theme, disable all plugins except WooCommerce, and test the snippet again: WooCommerce troubleshooting 101
Related content
WooCommerce: Disable Variable Product Price Range $$$-$$$ You may want to disable the WooCommerce variable product price range which usually looks like $100-$999 when variations have different prices (min $100 and max $999 in this case). With this snippet you will be able to hide the highest price, and add a “From: ” prefix in front of the minimum price. At the […]
WooCommerce: Hide Price & Add to Cart for Logged Out Users You may want to force users to login in order to see prices and add products to cart. That means you must hide add to cart buttons and prices on the Shop and Single Product pages when a user is logged out. All you need is pasting the following code in your functions.php (please note: […]
WooCommerce: How to Fix the “Cart is Empty” Issue For some reason, sometimes you add products to cart but the cart page stays empty (even if you can clearly see the cart widget has products in it for example). But don’t worry – it may just be a simple cache issue (and if you don’t know what cache is that’s no problem either) or […]
WooCommerce: “You Only Need $$$ to Get Free Shipping!” @ Cart This is a very cool snippet that many of you should use to increase your average order value. Ecommerce customers who are near the “free shipping” threshold will try to add more products to the cart in order to qualify for free shipping. It’s pure psychology. Here’s how we show a simple message on the […]
WooCommerce: Cart and Checkout on the Same Page This is your ultimate guide – complete with shortcodes, snippets and workarounds – to completely skip the Cart page and have both cart table and checkout form on the same (Checkout) page. But first… why’d you want to do this? Well, if you sell high ticket products (i.e. on average, you sell no more than […]
Rodolfo Melogli
Business Bloomer Founder
Author, WooCommerce expert and WordCamp speaker, Rodolfo has worked as an independent WooCommerce freelancer since 2011. His goal is to help entrepreneurs and developers overcome their WooCommerce nightmares. Rodolfo loves travelling, chasing tennis & soccer balls and, of course, wood fired oven pizza. Follow @rmelogli
34 thoughts on “WooCommerce: How to Hide Cart Table Columns”
Jian
Hello,
This is working perfectly on my cart page, now I’m trying to figure out how to make it happen on my “Checkout” page, I want to hide product-total column, need your instruction @Rodolfo, thanks so much!
Hello Jian, thanks so much for your comment! Yes, this is definitely possible, but I’m afraid it’s custom work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!
He’s working. Thank you so much. However, I have to change the value of “4” to “3”.
However, this code does not work on the mobile version. What can I do for it ?
Thank you for your interest and understanding.
Best regards.
Hi Ali, thanks so much for your comment! Yes, this is definitely possible, but I’m afraid it’s custom work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!
Hey Hong, thanks so much for your comment! Yes, this is definitely possible, but I’m afraid it’s custom work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!
Hi Isabel, thanks so much for your comment! Yes, this is definitely possible, but I’m afraid it’s custom work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!
Your CSS worked perfectly but when I changed the 4 to 1 for what I believed was the thumbnail column, it also removed the product summary. They must be joined somehow.
I globally removed all product images and thumbnails but cart form left blank column left of product summary. I thought by deleting that first column for the thumbnail, product summary would move left. Instead it removed the product summary entirely. I also removed tr and th for thumbnail in cart.php to no avail.
It’s most obvious on the landing page where there’s a full cart occupying 1/3 of page. It looks horrendous and I’ve searched your site and others with little luck.
Great Code Rodolfo, just what I needed almost, but Im having the same issue, my product images have been effected by the changes also, they became tiny. I haven’t added any code with respect to the product images column. Any ideas? Thanks in advance.
Hey there, thanks for your comment! Yes, that’s possible, and also depends on your theme. You can simply “Inspect” via Google Chrome to see which is the CSS class that you should target on mobile also. Hope this helps!
Hi Rodolfo
I’ve been struggling with a silly little thing, but I have not been able to solve anything, maybe you could help me. I’m working on a WoocCommerce website where I will sell products for a monthly fee and a one-time installation fee. I just want to hide the “recurring total rows” on my website checkout Page. I already managed to hide the subtotal row of the product totals section with this CSS code
.cart-subtotal { display:none; }
I’m trying to do the same with the recurring totals rows but is not working.
Hola Rafael, thanks so much for your comment! Yes, this is possible – but unfortunately this is custom work and I cannot provide a complementary solution here via the blog comments. Thanks a lot for your understanding! ~R
Hi I want to remove the “Gift Cards in Cart” section of the Cart which lists the Reload information. My gift cards are one time use only and I have marked it as so when I created the product. However, it keeps coming up. I’m thinking its a glitch in the system, unless I’m missing something. If it is a glitch, I was thing some Simple CSS coding would assist me with removing it just like the Simple CSS coding that can remove a column (in the example given in one of the “WooCommerce: how to hide a column from the Cart Table” clip.
Michael, thanks so much for your comment! Unfortunately this is custom work and I cannot provide a complementary solution here on the blog. Thanks a lot for your understanding! ~R
Hi Rodolfo, It looks like this code is not working anymore… maybe there’s been an update? great tutorials by the way, love youw website! kind regards Saskia
The code works perfectly – make sure to remove the comment line (“// bla bla bla”) which was not correctly written in CSS (fixed now).
If this does not work, then your WP theme is overriding the default Cart CSS classes and you’ll need to play a little with the part that says “.woocommerce table.cart”
Hello Hamadi, thanks so much for your comment! Yes, this is possible – but unfortunately this is custom work and I cannot provide a complementary solution here on the blog. Thanks a lot for your understanding! ~R
Can anyone let me know what is remove_action for remove price and quantity from cart page. like it remove from the product summary page remove_action( ‘woocommerce_single_product_summary’, ‘woocommerce_template_single_add_to_cart’, 30 );
i need to remove price and quantity from cart page.
Hey Bilal, I don’t think there is an add_action for that. I think in this case you’ll need to either use a filter or override the Cart template. Hope this helps!
Questions? Feedback? Customization? Leave your comment now! _____
If you are writing code, please wrap it like so: [php]code_here[/php]. Failure to complying with this, as well as going off topic or not using the English language will result in comment disapproval. You should expect a reply in about 2 weeks - this is a popular blog but I need to get paid work done first. Please consider joining the Business Bloomer Club to get quick WooCommerce support. Thank you!
Hello,
This is working perfectly on my cart page, now I’m trying to figure out how to make it happen on my “Checkout” page, I want to hide product-total column, need your instruction @Rodolfo, thanks so much!
Hello Jian, thanks so much for your comment! Yes, this is definitely possible, but I’m afraid it’s custom work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!
Thank you! It worked perfect!
Super!
He’s working. Thank you so much. However, I have to change the value of “4” to “3”.
However, this code does not work on the mobile version. What can I do for it ?
Thank you for your interest and understanding.
Best regards.
Hi Ali, thanks so much for your comment! Yes, this is definitely possible, but I’m afraid it’s custom work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!
On the same principle, what will be the ideal way to remove the entire “update cart” row from the cart table?
Thanks!
Hey Hong, thanks so much for your comment! Yes, this is definitely possible, but I’m afraid it’s custom work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!
Hi there,
Yes your CSS work great.
Do you know How Can I resize the product colum?
I mean, make it bigger… that way all product description is good.
Hi Isabel, thanks so much for your comment! Yes, this is definitely possible, but I’m afraid it’s custom work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!
Thank You! worked perfectly
Yay!
Your CSS worked perfectly but when I changed the 4 to 1 for what I believed was the thumbnail column, it also removed the product summary. They must be joined somehow.
I globally removed all product images and thumbnails but cart form left blank column left of product summary. I thought by deleting that first column for the thumbnail, product summary would move left. Instead it removed the product summary entirely. I also removed tr and th for thumbnail in cart.php to no avail.
It’s most obvious on the landing page where there’s a full cart occupying 1/3 of page. It looks horrendous and I’ve searched your site and others with little luck.
Any thoughts?
Hey Tina 🙂 Did you change both 4s? Also the thumb columns should be #2
Great Code Rodolfo, just what I needed almost, but Im having the same issue, my product images have been effected by the changes also, they became tiny. I haven’t added any code with respect to the product images column. Any ideas? Thanks in advance.
You might need additional CSS
This css snippet worked beautifully on desktop, but the changes were not made on mobile devices.
Hey there, thanks for your comment! Yes, that’s possible, and also depends on your theme. You can simply “Inspect” via Google Chrome to see which is the CSS class that you should target on mobile also. Hope this helps!
Same problem….
Could you explain ?
i couldn’t found 🙁
Thanks in advance
I can’t explain because this is custom to your theme. Sorry
It worked like a charm for me. Thank you so much.
Brilliant!
Hi Rodolfo
I’ve been struggling with a silly little thing, but I have not been able to solve anything, maybe you could help me. I’m working on a WoocCommerce website where I will sell products for a monthly fee and a one-time installation fee. I just want to hide the “recurring total rows” on my website checkout Page. I already managed to hide the subtotal row of the product totals section with this CSS code
.cart-subtotal { display:none; }
I’m trying to do the same with the recurring totals rows but is not working.
Hola Rafael, thanks so much for your comment! Yes, this is possible – but unfortunately this is custom work and I cannot provide a complementary solution here via the blog comments. Thanks a lot for your understanding! ~R
Hi I want to remove the “Gift Cards in Cart” section of the Cart which lists the Reload information. My gift cards are one time use only and I have marked it as so when I created the product. However, it keeps coming up. I’m thinking its a glitch in the system, unless I’m missing something. If it is a glitch, I was thing some Simple CSS coding would assist me with removing it just like the Simple CSS coding that can remove a column (in the example given in one of the “WooCommerce: how to hide a column from the Cart Table” clip.
Michael, thanks so much for your comment! Unfortunately this is custom work and I cannot provide a complementary solution here on the blog. Thanks a lot for your understanding! ~R
It’s easier to address the class directly (certainly less counting involved and less ambiguity when debugging.
for instance: .product-quantity { display: none; } or, for yours, .product-price { display: none; }
Thanks for your feedback Chris!
Hi Rodolfo, It looks like this code is not working anymore… maybe there’s been an update? great tutorials by the way, love youw website! kind regards Saskia
Hey Saskia, thanks for your comment & feedback!
The code works perfectly – make sure to remove the comment line (“// bla bla bla”) which was not correctly written in CSS (fixed now).
If this does not work, then your WP theme is overriding the default Cart CSS classes and you’ll need to play a little with the part that says “.woocommerce table.cart”
Hope this helps!
Hello,
need your help to add a new column in the Cart Table
kind regards
Hello Hamadi, thanks so much for your comment! Yes, this is possible – but unfortunately this is custom work and I cannot provide a complementary solution here on the blog. Thanks a lot for your understanding! ~R
Hello,
Can anyone let me know what is remove_action for remove price and quantity from cart page. like it remove from the product summary page remove_action( ‘woocommerce_single_product_summary’, ‘woocommerce_template_single_add_to_cart’, 30 );
i need to remove price and quantity from cart page.
Thanks
Hey Bilal, I don’t think there is an add_action for that. I think in this case you’ll need to either use a filter or override the Cart template. Hope this helps!