How to Customize Woocommerce Cart Page: 21 Cart page Hacks
ฝัง
- เผยแพร่เมื่อ 30 ก.ค. 2024
- In this video I’m going to show you how to customize Woocommerce cart page and I’ll provide you 21 useful Woocommerce cart page hacks.
All the snippets shown in the video are here: wpsimplehacks.com/how-to-cust...
RELATED VIDEOS:
17+ Useful Woocommerce Category Page Hacks for Every Shop • How to Customize Wooco...
14 Useful Woocommerce Single Product Page Hacks • How to Customize Wooco...
12 Useful Woocommerce Tricks & Hacks to Use on Your Store • 12 Useful Woocommerce ...
Blocksy and Kadence are currently two of the best WordPress themes. So, if you’re interested, then you can grab:
🅱️ Blocksy theme wpsimplehacks.com/blocksy (SAVE 10% Coupon WPSH10)
🔵 Kadence theme here: wpsimplehacks.com/kadence (SAVE 10% Coupon SIMPLEHACKS)
✅ If you want to be the first to be notified about the new tutorials then please subscribe to this channel. / @wpsimplehacks
✅ BEST WORDPRESS THEMES:
Blocksy theme: wpsimplehacks.com/blocksy (SAVE 10% Coupon WPSH10)
Kadence Theme: wpsimplehacks.com/kadence (SAVE 10% Coupon SIMPLEHACKS)
Astra Theme: wpsimplehacks.com/astra
GeneratePress: wpsimplehacks.com/generatepress
OceanWP: wpsimplehacks.com/oceanwp (SAVE 10% Coupon WPSH10)
✅ MY FAVOURITE WEBHOSTING PROVIDERS:
Verpex Hosting wpsimplehacks.com/verpex
A2 hosting wpsimplehacks.com/a2-hosting
Cloudways wpsimplehacks.com/cloudways
✅ AWESOME WORDPRESS PLUGINS:
WPCodeBox wpsimplehacks.com/wpcodebox (SAVE 20% Coupon WPSH20)
WooLentor Elementor/Gutenberg add-on wpsimplehacks.com/woolentor (SAVE 20% Coupon WPSH20)
Best Wordpress Backup, Migration and Staging plugin - WpVivid Pro wpsimplehacks.com/wpvidid (SAVE 20% Coupon WPSH20)
Best Wordpress Backup, Migration and Staging plugin - WpVivid Pro wpsimplehacks.com/wpvidid (SAVE 20% Coupon WPSH20)
Best Gutenberg Blocks addon - Kadence Blocks wpsimplehacks.com/kadenceblocks (SAVE 10% Coupon SIMPLEHACKS)
Best forms plugin - Fluent Forms: wpsimplehacks.com/fluentforms (SAVE 20% Coupon: WPSH20)
Best for email marketing - Fluent CRM: wpsimplehacks.com/fluentcrm (SAVE 20% Coupon: WPSH20)
Best events calendar and ticket selling plugin - WP Eventin wpsimplehacks.com/wp-eventin (SAVE 20% Coupon: WPSH20)
Best for creating tables - Ninja Tables wpsimplehacks.com/ninjatables (SAVE 20% Coupon: WPSH20)
Best Wordpress LMS - Tutor LMS wpsimplehacks.com/tutorlms (SAVE 20% Coupon thmwelcome20)
Best Wordpress SEO plugin - SEOPress wpsimplehacks.com/seopress
✅ AWESOME WOOOCOMMERCE EXTENSIONS:
Best Woocommerce Swiss Knife tool - Kadence WooExtras wpsimplehacks.com/wooextras (SAVE 10% Coupon SIMPLEHACKS)
Best Woocommerce sidecart plugin - Woocommerce Cart in One wpsimplehacks.com/cartinone
TIMESTAMPS
00:56 Install Code snippets plugin
01:36 Set minimum order amount
03:02 Show custom content on the empty cart page
04:13 Free shipping amount threshold notification
05:08 Add a custom message to the cart page
05:42 How to find Woocommerce default hooks locations
06:59 Show warning if the product is available on backorder
08:28 Update cart on quantity change
09:27 Add the „Empty cart“ button
10:14 Move coupon field location
11:54 Display cart total weight
13:44 Show estimated delivery date notification
15:32 Deactivate shipping information
16:06 Add additional fee/surcharge
17:47 Output shortcode or custom content below the cart
18:56 Display product SKU on the cart page
19:26 Display shipping class on the cart page
20:01 Display categories on the cart page
20:42 Display stock availability
21:35 Sort cart products alphabetically
22:36 Remove product links - แนวปฏิบัติและการใช้ชีวิต
Thank you so much for taking the time to share these!
Glad you like them!
This is a wonderful tutorial with real code! LOVE it and it's helping me with some edits I need to do to a site. thank you.
Thanks 🙂
Hey, Your a genius. I'm watching your from Bangladesh.
Thank you for watching 😊
Thank you I wanted to add the woo-commerce "continue shopping button" and found it here in your tips! I appreciate it sooo much!
You are so welcome!
Thank you for your incredible videos, I have no idea, why this channel has not got more subscribers. Very useful practical no nonsense Videos. FANTASTIC
Glad you like them!
You deserve way more subscribers. Great work!
Thanks 🙂
Which hack did you like the most? Let me know in the comments.
RELATED VIDEOS:
17+ Useful Woocommerce Category Page Hacks for Every Shop th-cam.com/video/Q14xDtH-AcE/w-d-xo.html
14 Useful Woocommerce Single Product Page Hacks th-cam.com/video/Ni8VezPG-cg/w-d-xo.html
12 Useful Woocommerce Tricks & Hacks to Use on Your Store th-cam.com/video/k8tWLU8cNkI/w-d-xo.html
Thank you for your work 👍
Glad it helped
Very nice thanx for sharing knowledge.
Glad it helped
I love yours WooCommerce Videos, cant wait for next hacking woocommerce lessons
Thank you for your kind words
Thanks a million. 👍
You're welcome
Amazing Video, We want more video Like this
Thanks 😊
Great work, and very useful hacks, thanks.
Quick question : when I try "Deactivate shipping information", the shipping methods disappear but one line remains with "Expedition" and a link to "calculate shipping fees". Do you have any suggestion on how to remove all the line? Many thanks
Probably your theme messes something up
Wow! All this hacks are amazing. I hate having to add plugging to my site, I like to avoid issues as much as I can. You just gain a new subscriber. Excellent work and clear as cristal. Would all this work with the hello theme and elementor? I would like to make sure of that before I implement any changes. Thanks sir
Thanks for the sub.
If you're creating custom layouts (single product page, archive page etc) with Elementor then Elementor uses it's own hooos and overrides default Woocommerce hooks, you would need to find out what are the Elementor hooks they use.
@@wpsimplehacks Thanks for the reply. I will find out.
You the man 😎
I know 😎
Great work, appreciated.
quick question the way you showed SKU number what about if I want to show colour attribute aswell? I have tried the same method as you did to get the SKU number but it didn't work, any help would be highly appreciated. Many Thanks
See whether this helps you out wpsimplehacks.com/how-to-customize-woocommerce-cart-page/#how-to-display-product-attributes-in-woocommerce-cart-page
Great Video. Very Useful. Can you add one more for Min & Max Product Qty with a Proper alert or error message? Thanks
Try this here below. Change $min = 2; and $max = 5; values
/* Changing the minimum quantity to 2 for all the WooCommerce products */
function woocommerce_quantity_input_min_callback( $min, $product ) {
$min = 2;
return $min;
}
add_filter( 'woocommerce_quantity_input_min', 'woocommerce_quantity_input_min_callback', 10, 2 );
/* Changing the maximum quantity to 5 for all the WooCommerce products */
function woocommerce_quantity_input_max_callback( $max, $product ) {
$max = 5;
return $max;
}
add_filter( 'woocommerce_quantity_input_max', 'woocommerce_quantity_input_max_callback', 10, 2 );
?>
@@wpsimplehacks i will try right away and update asap. Thanks a lot.
Hi, sir. Great tutorial. May I ask is there any code to show simple popup (that display messages on successful add to cart for few seconds and disappear) whenever hit the "add to cart".
Is this possible?
Not that I know of since this can not be solved with the help of a simple snippet. See, whether this plugin helps you out wordpress.org/plugins/added-to-cart-popup-woocommerce/
Is there a snippet for country-> states -> city dropdown
I tried every possible way
Great and very practical videos. I thought that it would be so great if woocommerce messages and notifications appear without need to reload the page. Can you do that and create a video? :)
Sorry, I have no plans regarding this video
Anyways. You're videos are still great 🚀
You videos have truly been helpful. Could you help with a hack that displays a message “no products on sale” on the sale products page when there are no products on sale? Thanks
See whether this helps you out wordpress.org/support/topic/show-message-when-no-products-are-on-sale/
If not then unfortunately can't help with that.
you are amazing
Thank you for your kind words 🙂
Great snippets and source of knowledge again. Could you advise the Css for the jammed buttons?.. I need a custom css as none of those on your website solves my issue with the send us enquiry button I've added to my product page. Thanks Janek
Sen me you site link so I could check. Otherwise it is hard to do :)
@@wpsimplehacks Absolutely here stylesnbags.com/ take a look at the enquiry form button on the product pages. Thanks for replying
What is it you would like to be differently. At the moment I see this nimb.ws/WunbEg
@@wpsimplehacks I'd like the Send us your trade enquiry button, to be the same size as the Buy with Gpay button above.
See, whether this helps you out
button#trigger_cf {
width: 100%;
}
شكرا علي الفيديو الرائع :) و how to customize multi vendor ecommerce dashboard to be easy and simple
I am not familiar with the multi vendor plugins
Thank you! Great hacks! I'm trying to change all the text in cart and checkout pages to get them all to be in Estonian language. Is there a one convenient way to do that are should code snippets be used for each text?
Hei Leene,
Kui sinu lehe keel on eesti keel, siis Woocommerce enda eestikeelne tõlge peaks ka ostukorvi lehe eestikeelseks tegema. Selleks pane Seaded >> Üldine alt saidi keeleks Eesti. Kui aga kasutad kujundust, mis Woo ostukorvi omaenda poolt üle kirjutab, siis saad Loco translate pluginaga selle kujunduse vajalikud osad eesti keelde tõlkida.
@@wpsimplehacks Suur tänu! Piinlikult lihtne :) Sain lihtsalt keele muutusega korda!
Tubli! Istu! Viis :)
Not all snippets work with different themes. In some functions, it is necessary to change CSS classes for this to work. For example, the auto-update cart works on 2 out of 5 themes. I found a solution elsewhere where I can write my plus or minus button classes and it works.
Could you share your solution here?
@@wpsimplehacks yep
button[name="update_cart"]{display: none!important;}
jQuery( function( $ ) {
$( 'body' ).on( 'change', '.qty', function() {
setTimeout(function() {
$( '[name="update_cart"]' ).trigger( 'click' );
}, 800 );
} );
$( 'body' ).on( 'click', '.plus, .minus', function() {
setTimeout(function() {
$( '[name="update_cart"]' ).trigger( 'click' );
}, 800 );
} );
} );
how did you solve this one?
You the best , thank you so much for your videos this helped me to help with all the different things my cleint want when building website for them . Can you tell me only sell coupons with now pricing in woocommerce products only $0.00 per product. What I want is not to see the quantity and price and tables in order details and the wocommerce email the client receive after placing the order.
Thanks 🙂
Coukd you exolain a bit more? At the moment I am confused what is it you're trying to do.
Great. Thanks a lot. I want to remove TAX from the cart only so it will not show, however, I want to keep it on the checkout page, how can I do that?
Probably with the help of some CSS
Thank you, your content is helpful, can you help me to change text of "Shipping" and "Flat rate" i want to rename it thats for Cart Totals field
Maybe this helps you out www.businessbloomer.com/translate-single-string-woocommerce-wordpress/
Great video and ive implimented a few of these already on some sites so thank you for that!. Just one thing I have noticed is the "update cart" button appears in mobile view , what can we add to the snippet for this? I cant seem to hide it any way at all in mobile haha... thanks again
I just tested "Update cart on qty change" and there is no button on my site. Which hack is it you’re taking about where the "update cart" is visible on mobile?
OK, I figured out that you’re probably talking about the "move coupon field hack".
Replace part on the snippet with this part and let me know whether it worked.
/* Hide Update cart button */
div.coupon:not(.under-proceed) {
display: none !important;
}
@media only screen and (max-width: 1024px) {
.woocommerce-cart-form__contents .actions .button {
display: none;
}
}
@@wpsimplehacks yeah thats the code mate "Update cart on qty change" , tbh ive used this snippet with elementor and jetwoobuilder , for whatever reason its fine except mobile , sorry mate id say its me not you! , thank you very much for your response , your work is amazing
Try to add this to the additional CSS and see whether it works.
@media only screen and (max-width: 1024px) {
.woocommerce-cart-form__contents .actions .button {
display: none;
}
}
@@wpsimplehacks awesome mate thank you , i was talking about the update qty hack , i just used the code you supplied but put it to the qty hack and it worked.
Great video
How can I add extra cash on delivery charges when the customer choose the cash on delivery option as shipping method
See whether this snippet helps you out (you need to modify it a bit) stackoverflow.com/questions/66156541/add-fee-based-on-payment-methods-and-cart-items-total-in-woocommerce
Or see whether this plugin solves your problem wordpress.org/plugins/checkout-fees-for-woocommerce/
@@wpsimplehacks thank you so much
Cool hacks. Please add timelines when possible. Thanks
What do you mean by "timelines"? Do you mean video Timestamps? They should already be there. If not then here they are:
TIMESTAMPS
00:56 Install Code snippets plugin
01:36 Set minimum order amount
03:02 Show custom content on empty cart page
04:13 Free shipping amount threshold notification
05:08 Add custom message to cart page
05:42 How to find Woocommerce default hooks locations
06:59 Show warning if product is available onbackorder
08:28 Update cart on quantity change
09:27 Add „Empty cart“ button
10:14 Move coupon field location
11:54 Display cart total weight
13:44 Show estimated delivery date notification
15:32 Deactivate shipping information
16:06 Add additional fee / surcharge
17:47 Output shortcode or custom content below cart
18:56 Display product SKU on cart page
19:26 Display shipping class on cart page
20:01 Display categories on cart page
20:42 Display stock availability
21:35 Sort cart products alphabetically
22:36 Remove product links
Oh yes. I meant timestamps. Just noticed it’s way down the description. 👍
Thank you for amazing hacks and tips but when I moved a coupon field the field stopped working unfortunately.
Probably your theme or sone other plugin overrides default Woocommerce hooks or something
@@wpsimplehacks I'll be glad if you share any ideas how to fix that.
Hello and thank you for your work. I am looking for a solutions to display a specific text in cart if the cart contain a specific product. It is possible? Thank you!
See this one here wpsimplehacks.com/how-to-customize-woocommerce-cart-page/#how-to-display-a-custom-message-in-woocommerce-cart-page-for-specific-products
@@wpsimplehacks Thanks for the quick response!
Bro thanks for video.. I want snippet for Minimum weight in cart.. user can't checkout if cart weight is less than 1KG.. please help me ...thanks
Did you try this? 😉
letmegooglethat.com/?q=woocommerce+minimum+order+weight
I have implemented all your other videos on my site and they work great but for a reason all this tips and snippets are not working on my cart page, any suggestions as what should I change?
Do you use any other plugin for your cart and checkout pages? For example, Elementor etc? Also, maybe your theme overrides the default Woocommerce hooks by adding it’s own customizations over there.
@@wpsimplehacks Thanks for your reply I will check on this
Hack# 15 Simmlier that I want to show related products here like whenever the user selects any product from the shop page, we have to show related product under the cart view page. is there any code for that...?
Use cross-sells docs.woocommerce.com/document/related-products-up-sells-and-cross-sells/
Hello, on the cart page
The tabs, Products, Quantity, Sub total, I sell services so I want to change the Products to Services.
Because I added the services as virtual products in Woocommerce and won't make sense on the cart page for clients to see Products tab instead of Services.
So how do I change the Products tab to Services, so it will display Services they have added to cart under it.
Thank you.
Do you want to change the product cart table heading and display Services instead Product? If so, then try this snippet (and change text accordingly:
add_filter('gettext', 'translate_strings');
add_filter('ngettext', 'translate_strings');
function translate_strings($translated) {
$translated = str_ireplace('Product', 'Services', $translated);
return $translated;
}
i Another question, is there a woo commerce hack to change the word "Product" site wide to maybe images or photos? (for a stock photo site)
Add this to the Code snippets or your child theme’s functions.php file (and change the text accordingly)
add_filter('gettext', 'translate_strings');
add_filter('ngettext', 'translate_strings');
function translate_strings($translated) {
$translated = str_ireplace('Product', 'YOUR TEXT HERE', $translated);
return $translated;
}
It worked! Thank you soooo much!@@wpsimplehacks
The How to add “Continue Shopping” snippet returns my cart page to the shop page. How can I fix that?
Most likely the page id on row 4 is not correct
When I try "Update Cart on quantity change" the text disappears but the refresh cart symbol remains. any suggestions on how to remove the refresh symbol as well?
Sorry, can’t help with that. It seems to be working well on my end.
i want to remove the coupon field entirely above the 'place order' button pls help
You can deactivate coupons entirely from the Woocommerce sertings
Free shipping amount threshold notification - How do I get this code to work pre tax? e.g I want the minimum value for free shipping to be 200 excluding tax, but when it calculates the remainder it calculates based on the items value plus tax. Cheers.
Sorry, can’t help you with that.
Dear, I added the code How to Update WooCommerce Cart on Quantity Change?, after that, buttons plus and minus, when I update a product, these buttons disappears, do you know why?? because if someone is buying and add more products and these buttons are not, it´s weird. please your help
Sorry, can’t help with that. It’s probably has some compatibility issues with your theme and/or with some plugin.
@@wpsimplehacks thanks friend
Great video man. Really appriciate it, I will be helpful if you help me how can I do the following:
in the cart page:
o First row: Subtotal: total price without discount---- main price
o Second row: shipping-- shipping charge
o Third row: Korting (discount)- saved
o Fourth row: Total: total price with discount and with shipping--total cost.
Is it possible? Thank you again.
Unfortunately this would require some heavy customization and therefore I cant’t help you with it. Sorry.
@@wpsimplehacks Thank you for your response.
Gosh..so many hacks.. i become woo hacker already. thanks
Thank you for watching
Hello,
When we add a product to cart. It redirect us to single product page. I dont want to redirect to single product page. I want to refresh the current page when product added to cart. How can we do this?
What snippet is the one you:re using?
Couldnt find this hacks from the video. I really liked your every video. Do you have any idea how to refresh the current page when product add to cart. Right now Its redirect us to single product page if product added to cart
I mean, when we click on "add to cart" button from product listing. It will not redirect to single product page
Make a video on cart count show in a HTML anchor button
Do you have any example to show me?
我第一个.
Palju õnne
your website is not loading. showing a critical error.
I just tried and everything seems to be working well. Please try after couple of minutes
Its working. Thank you
found your content on youtube and it's amazing!
let me know if you'll ever need a hand on sth, marketing/content wise. I'd love to help you back.
tried to contact you on twittter but no DMs :)
You can emal me at info@wpsimplehacks.com