How to Customize Woocommerce Checkout Page Without a Plugin? 26 useful hacks
Vložit
- čas přidán 28. 06. 2024
- In this video I’m going to show you how to customize woocommerce checkout page without a plugin. I’ll show you 26 extremely useful hcaks which allow you to modify checkout fields, shipping and payment mehtoids, add custom messages etc.
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:
How to Customize Woocommerce Cart Page: 21 Cart page Hacks • How to Customize Wooco...
How to Customize Woocommerce Category Page | 17+ Hacks for Every Shop • How to Customize Wooco...
How to Customize Woocommerce Single Product Page | 14 Useful 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 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 events calendar and ticket selling plugin - WP Eventin wpsimplehacks.com/wp-eventin (SAVE 20% Coupon: WPSH20)
Best for email marketing - Fluent CRM: wpsimplehacks.com/fluentcrm (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
Image Map Pro - wpsimplehacks.com/imagemap
✅ 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:00 Overview
01:20 Install Code Snippets plugin
01:49 Add Custom message at Woocommerce checkout
02:36 How to find Woocommerce hook positions?
03:33 Add Country specific message at checkout
04:58 Add „Continue shopping“ button at checkout
05:32 Add backorder notification at checkout page
06:47 Set minimum order amount
08:08 Show product images
08:50 Auto-add coupon using URL
10:33 Auto-apply coupon for minimum cart total
12:14 Disable „Have a coupon?“ section
13:12 Set default country, state and city
15:11 Give a Discount if Woocommerce Local Pickup shipping mehtod is selected?
16:29 Hide checkout fields if local pickup
18:12 Hide shipping based on attributes
20:49 Hide other shipping if free is available
21:38 Hide shipping for specific user role
23:40 Hide shipping method based on subtotal
24:32 Disable all payment gateways
26:00 Disable payment gateways to specific user role
27:24 Move billing email field to top
28:21 Remove checkout fields
30:16 Make Woocommerce checkout fields to be optional
31:20 Add Delivery date datepicker field at Woocommerce checkout
32:34 Add custom checkout fields
34:54 Add „Confirm email address“ field
36:11 Add phone field to shipping
36:57 Rename "Place order" button - Jak na to + styl
![How To Make WooCommerce Checkout Like Shopify - Conversion Optimized, Oh And [ FREE ]](http://i.ytimg.com/vi/q6HjxaHBPm8/mqdefault.jpg)
Amazing the amount of value you provide in each video, you're really something else mate. Thanks so much.
I appreciate that!
You are a legend. Please dont stop sharing such woocommerce hacks.
Thanks
Beyond awesome... One of the Woocommerce tutorial videos out there!
Glad you think so! ☺️
Salute to you.. Your video saved me to use many plugins and make heavy to my site.. I never thought using this snippets many things possible.. 🙏
Glad it helped 😊
This channel should have a million views. Keep doing the good work man!
Working on it! :)
Excellent tutorial!! So far the best i've seen about woocommerce hacks. Keep posting! You are doing a greate job.
Wow, thanks! :)
Did you see the playlist with all the hacks? See here czcams.com/play/PLS1Y4-9j3vy4zZ0ReD3wy35xe0ll8F0V6.html
Thank you, sir. You're really a Woocommerce specialist. Very valuable and exceptional hacks tutorials.
Thank you for watching 😊
It's not often that I click on a video and find a perfect fix. But this video had exactly what I needed. thanks!
Glad it helped :)
Hey, this stuff is dynamite. You should call it the plugin killer. Thanks to you I can delete a lot of plugins and speed up my websites. I’ve never seen this on any other channel…probably because they want to sell you a plugin. Keep up the good work. Truly amazing!!!
Thanks :)
Exactly! I am so grateful that I came across his channel
This video should have received million views and likes. Wonderful and impactful
Thanks :)
my dude, you are simply amazing. you condensed hours of hard work into a great video, it really is the checkout addon killer video.
Glad you liked it 😊
Great One, Thank you !
Glad you liked it!
Life saver, underrated channel👍
Happy to help!
This video is godlike! Thank you!
Glad you liked it!
Absolutely great! Thanks a lot!
Glad you liked it!
Thank you I found this very helpful to add a message to my checkout page :)
Glad it helped 🙂
You are an awesome. Thank you for this information hacks tutorials. Much appreciated. Keep up the good work!
Thanks 😊
Thanks for this tips!
Happy to help!
Great information, thank you.
Glad you liked it 😊
Very helpful. Thank you.
So glad!
great tips! thank you so much!!
😊
Crazy valuable video. I used some of the tips in combination with Chatgpt to get code that did exactly what I needed. I almost started paying 29usd a month for a plugin. Thanks!
Awesome 😊
The best as always Janek!
Thanks :)
I got that. Thanks Bags for life Romania , i never knew the legends name. Take a bow Janek.
Thank you. This video is incredible. Keep more coming. I subscribed. :)
Thanks 😊
Thanks so much for all the tips and tricks
You are so welcome!
Thank you so much, this is beyond awesome!!
You're so welcome!
Really great lesson! Thanks a lot!
Glad you liked it 🙂
Amazing video. Very useful!
Thanks 🙂
Love this channel
Thanks 😊
WELL DONE. THANK YOU
🙂
Thank you very much for making this video!
My pleasure!
Thanks a lot for this super useful video. Grateful to you.
Thanks 🙂
best channel , very very useful information
So nice of you, thanks :)
Super cool! Danke from Californian!
You're welcome (from Estonian) ☺️
Amazing.... I was looking for " Make Woocommerce checkout fields to be optional".. Thank you so much.
Glad you liked it
very nice tutorial, thanks.
Glad it was helpful!
This was a great video, thanks for sharing
Glad you enjoyed it!
Very useful!
Thanks
very awesome. Thank you vey much
🙂
Amazing Thank you so mush
You're welcome 😊
woooow! thank u! and greetings from Poland!
Hi Karolina. Fun fact: I got my name because of the Polish TV series "Czterej pancerni i pies" 🤓
@@wpsimplehacks love it ❤️
Sir,
Thank you very much! 💕
🙂
I love this chanel so much
Thanks 😊
Great..you are top man
I appreciate that
Awesome!!!
Thank you! Cheers!
Thank u so much
You're welcome 😊
I wish I could like this video multiple times.
Thanks ☺️
thank you :)
You're welcome ☺️
Hi there! Thank you for the amazing tips. I succesfully implemented a couple of them in my webshop and they work flawless! Do you also have a solution to toggle between prices with and without VAT without using a plugin, perhaps?
Got to Woocommerce >> Settings >> Taxes and inside "Price display suffix" define text to show after your product prices. This could be, for example, "inc. Vat" to explain your pricing. You can also have prices substituted here using one of the following: {price_including_tax}, {price_excluding_tax}.
thank you so mush
You're welcome. ☺️
So much value! Thank you so much for putting in the effort. Question concerning the "Email confirmation field snippet" : What do I need to change in the snippet for it to apply to logged-out users only? Thanks in advance, p
Try to add if ( is_user_logged_in() ) {
Thanks for your videos! Do you have snippets for different custom field types? such as dropdown selectors, multiple select, etc?
Sorry, no
❤❤ lots of love from Bangladesh 🇧🇩
Thanks 😊
Your video and snippets are SO helpful, thank you! Curious if you have a solution to place a second Place Order section on the checkout page? I'd like to have a section at the top of the checkout page that has checkbox for the T&C and the Place Order button, and then if the customer wants to scroll down and review all the details, there would be another checkbox and Place Order button at the end of the block (where it is now). As an alternative I could also just move the Place Order section, but ideally I would like to add an additional one.
See whether Stackoverflow has something
Another video that is simply GOLD! Thank you, I have learned a lot.
I have a question regarding transactional emails. Is it worth doing anything with them?
I used Kadence Email Customizer and WooMail - WooCommerce Email Customizer (on separate pages) and I managed to create good-looking transactional emails in which I can sell additional services, offer discount codes, etc.
I have not noticed any problems in terms of functionality or speed of the website. E-mails do not end up in spam either, but I prefer to make sure and ask a more experienced person.
I use Kadence Email Customizer on couple of sites and it is awesome. So you have no need to worry about it.
This stuffs you're sharing here is wonderful! Thank you so much Janek!
I have a question: do you know how to limit input characters into order notes field? let's say I'd like to have it less than 200 characters, and my customers will be able to see how many character remaining available when they're typing?
This will help you to set the limit to 200 char and renames the order comments label. Can’t help with the "remaining characters" issue though.
add_filter( 'woocommerce_checkout_fields' , 'wpsh_order_comments_maxlenght' );
function wpsh_order_comments_maxlenght( $fields ) {
// Set max lenght to order comments field
$fields['order']['order_comments']['custom_attributes'] = array('maxlength' => 200);
// Rename Order comments filed label
$fields['order']['order_comments']['label'] = __('Order comments (max lenght 200 char.)', "woocommerce");
return $fields;
}
Merci beaucoup !
You’re welcome :)
Fantastic video, no BSing around. I tried the 1st one and it worked fine, but when I tried the 2nd one for a certain country, it didn't work. This video is 3yrs old so I wonder if they changed some of the hooks. Thanks again!
Glad it helped!
excellent
Thank you! Cheers!
awesome brother
Thanks ✌️
@@wpsimplehacks iam watching your videos like crazy and its GOOOD STUFF
Hey, what is the domain of the website your showong? I really like the checkout design as well!
What do you mean by domain? Do you mean. .local? It’s a "domain2 name for sites on your localhost machine (computer).
Checkout page is the one that comes with the Blocksy theme + some additional CSS :)
Thank You. It worked well. Any Video on Woocommerece Thank you Page customization (After Checkout) without plugin
Nope, not yet.
Thumbs up!..
Thank you! Cheers!
excellent information presented very clearly!
Is it possible to hide all except the Name and email fields if ONLY downloadable items are in basket. - I have both and sometimes there is a mixture and sometimes just download only.
Thanks
Alan
Sorry, can't help you with this, but I'm pretty sure that it's possible with some custom coding
You are absolutely amazing, thank you so much ❤❤❤
All your videos are so great!
Have a question... "Set minimum order amount". How do I get that code to ignore orders if the total amount is 0 euros?
Sorry, can’t help you with that.
Super as always, I have a question for you and I would be thankful if you could answer. HACK 22 - If I want to show specific days on the calendar like 'Sunday' and 'Wednesday' only then how would I do that? Thanks in advance.
Then you would probably need some kind of specific plugin, or you would need some custom coding. Sorry, can't help with that.
Wow, great videos. I was looking for videos like this a long time, so thank you for your hard work. One question: I've added the snippet 'show product images on the checkout page' and the thumbnail of the product showed up for a millisecond and then disappears. Do you have any solution for that?
Sorry, can’t help you with that. Maybe there’s a conflict with some other plugin, theme or your caching system.
Awesome work dude, heaps of respect. Could you may do a idea to: How can I manage to outsource the fee's of paypal & credit card provider's into the checkout so let people choose their payment method and automatically integrate the fee (1,75% + 0,3 € for example)
See whether this helps you out wordpress.org/plugins/checkout-fees-for-woocommerce/
Hi, such great content here! is there a place where the scripts are written and we can copy them?
Link to the snippets is in the video description
This Great tips Janek,
Could you please add another tip like a woo-commerce attribute tooltip?
What do you mean by that? Any examples?
If you’re tired of youtubers that are peddling plugin sponsors then you’ve come to the right place. I grow weary of installing plugins that require more effort to get working and then fail later down the line when i update Wordpress.
Thank you for your kind words :)
Excellent bunch of hacks, thank you. Question: Can you show how to change the hack 'Add Country specific message at checkout' to use a custom message based on Shipping method instead? Thank you.
Sorry, can’t help you with this.
Brilliant!. Do you have a video where I can add a checkout message based upon product category? It would be a great help.
No, sorry. You can use either conditional logic like displayed here www.businessbloomer.com/woocommerce-conditional-logic-ultimate-php-guide/
Or, Kadence Shop Kit is an awesome plugin which allows you to do that. See my review here czcams.com/video/Nk6VXAzRRFQ/video.html
Great video! do you how to fix if the stripe icons dont show?
Sry, can't help with this. It would be wise to ask this from the Stripe plugin support team.
Hi, just found your channel. Great videos for customising WooCommerce.
Regarding this snippet "Show Woocommerce backorder notification in checkout page", how can i modify it show a message shows up when an item is in the cart that is above a certain length?👍
Sorry, can't help you with that
very useful info. this is great but I didn't the country based custom message, which code do I have to copy for multiple countries
How about this snippet here? :)
wpsimplehacks.com/how-to-customize-woocommerce-checkout-page/#how-to-show-backorder-notification-at-woocommerce-checkout-page
you deserve 10M subsribers
Thanks 🙂
Thank you for your tips
Do you have any idea about including cancellation button after placing order in the order history without using any plugin
See whether this helps you out stackoverflow.com/questions/50164552/conditional-cancel-button-on-my-account-orders-list-in-woocommerce/50164660#50164660
Thank you so much 😊
Thank you very much! May i ask you what theme you used for this presentation?
It is Blocksy Pro theme wpsimplehacks.com/blocksy (SAVE 10% Coupon WPSH10)
@@wpsimplehacks thank you!
Hi, thanks for the tutorial. Just want to know is there any code for adding a checkbox to autofill the address as the customer address? for example 'Same address as above' on many websites.
Unfortunately I can’t help with that because I haven’t had a need for this solution. Sorry.
@@wpsimplehacks can we have another checkout page for a specific product(2 checkout page on same website)? If Yes please reply with the code so that I can put the product id. Thanks
This is brilliant. With doing the Coupon Via Link is there anyway to apply the new discounted price to the single product page?
Not that I know of
Superb & Great content sir. How to add custom field on woocommerce checkout & add fees to that field?
See whether this helps you out stackoverflow.com/questions/51558286/dynamic-shipping-fee-based-on-custom-radio-buttons-in-woocommerce
Awesome video and great work. One of the best videos for Woocommerce . I havent test those code yet but I think that would work great! I just wondering if there is any code that can disable ajax when entering street/billing address and postcode. Unfortunately I havent found any solution on the net . When someone entering street/billing address and postcode. ?wc-ajax=update_order_review is loading and refreshing and it's really annoying for customers (especially on mobile). Any hack for this?
Sorry, can't help with that
Hi! Great video again. Following your "27:24 Move billing email field to top", I am looking for a tip to move the "Create an account?" field to top too. Do you have any solution, please ? Thank you very much for your amazing job.
Sorry, can’t help wit that. It can be done with the child theme and some Woocommerce files modifications. See here wordpress.stackexchange.com/questions/125172/how-to-move-the-create-new-account-higher-in-woocommerce
Great video as usually. Hopefully I can use parts of your Hacks to achieve my needs. I need to add a Yes NO check box to the Billing registration form that asks if it is a PO Box and if they select Yes then remove a Shipping method. If you know a method it would help me out big time but going to buy you a beer regardless for all the useful hacks.
Maybe it’s easier to rename "Shot to different address" as "I have a PO box" or something and if checked then shipping fields will appear as usual?
PS! Thank you for the beer :)
@@wpsimplehacks Will look into that method. Just need it to remove TNT shipping option if they indicate it is a PO Box as TNT will not deliver to PO Boxes. So that way they will only be able to choose Australian Post. Thanks from Downunder.
I sent you an email with the solution.
Another one!
More to come...
Great video! Thanks! But how does changing the fields the checkout form affects the database integration? Will woocommerce handle this for us automatically? Or i have to also modify the database to reflect the checkout form changes as well?
Changing database fields will not mess up your DB and everything will be done by Woo. You don’t have to do anything else.
@@wpsimplehacks thanks!
It was great and cool. Thank you for the information you provided.
Just one question, I want to make email optional and phone number required instead. I followed your instructions, I made the email optional, but when I want to place the order, a nottification says that you must enter the email.
From the functions.php section, I also checked that there was no special code that prevented the email from being optional. There was no special code from the snippet plugin to prevent it too.
Can you please guide me?
Sorry, can’t help you with that
Janek, Thank you so much for this video! I noticed a slight problem. When I use snippet "27:24 Move billing email field to top", Of course it goes to the top. But when I use snippet "34:54 Add „Confirm email address“ field", It remains at the bottom! Could you possibly tell me how to make it go on top, together with the existing emaill field? Again, thank you so much, Great work!!!!
Did you try to change priority in this line here
$checkout_fields['billing']['billing_email']['priority'] = 4;
Hello! I love your tutorials friend ❤. I recently subscribed to your channel. In the minute 8:50 I just put the Shortcode to apply the Coupon code on checkot page for the button, but I would like to know if there is any way to make the button disappear once you see that the Coupon has been applied. It is that the button is still visible and causes confusion to the buyer. Can it disappear the button after the Coupon is applied? Thanks a lot❤
Nope, unfortunately I don have a solution for that :)
Hello sir..its awesome..and i have a query in this..can we change shipping methods according to the delivery date? suppose i have a free shipping and fast courier shipping..and if customer choose date before 2 weeks date, then automatically they have to choose for fast courier only and other shipping methods disabled. and if customer choose after 2 weeks date, then both shipping will be enable
Sorry, can't help you with that
For delivery date picker on checkout page- What if we want something like only Wednesdays or only weekend options to be enabled for selection?
Then you would need a custom code for it. Or a plugin. See this for example wordpress.org/plugins/woo-delivery/
Wondering if you have a tutorial on how to make changes to the order completed confirmation email (for digital downloads)?
Nope, I don't 🙂 Set a limit for your downloadable products. For example, allow to download 5 times. This means it doesn't matter which way they donwload it (email link or my account).
Ser, tell me please, which topic would you advise to choose for the sale of accessories for mobile phones (free theme) which is better blocksy or Kadence? Thank you in advance.
Blocksy has more Woocommerce related customization options, so it's probably better.
@@wpsimplehacks It's a pity you don't have such a video.
I hope there will be a video on this topic in the future.
I also wanted to thank you for your hard work.
I watch all your lessons and use them to create an online store for my small business.
All your videos are very informative and very understandable even for people who are far from programming.
Once again thanks very much.
Hi Nice video, thats super helpful. One question though: If I have a multi language site, how can I implement the hacks. The texts are hardcoded..any workaround to make it tanslatable ?
It depends on the plugin you are using. For example, if you’re using WPML then use something like this
add_action( 'woocommerce_product_meta_start', 'my_function', 1 );
function my_function() {
if(ICL_LANGUAGE_CODE=='de'){
echo '' . __( 'TEXT IN GERMAN', 'domain' ) . '';
echo do_shortcode( '[fluentform id="1"]' );
}
if(ICL_LANGUAGE_CODE=='en'){
echo '' . __( 'SAME TEXT IN ENGLISH', 'domain' ) . '';
echo do_shortcode( '[fluentform id="2"]' );
}
}
Hey Thanks. I'm using translatepress
Hi! I have a question, How can edit the position of a custom field at the billing fields? For example, add a new field under the name and not at the final of the form? thank you in advance!
See this here below (tested and works).
Some explanations:
1) Change billing_address_3 accoding to your custom field name.
2) ['priority'] = 1; - Change the number accordingly. 1 moves it to the top, 120 to the bottom. Here are the priorities:
billing_first_name - 10, billing_last_name - 20, billing_company - 30, billing_address_1 - 40, billing_address_2 - 50, billing_city - 60, billing_postcode - 70, billing_country - 80, billing_state - 90, billing_email - 100, billing_phone - 110
3) If you find this helpful, then consider supporting my site through the donation form on my site. :)
add_filter( 'woocommerce_checkout_fields', 'wpsh_rearrange_fields' );
function wpsh_rearrange_fields( $checkout_fields ) {
$checkout_fields['billing']['billing_address_3']['priority'] = 1;
return $checkout_fields;
}
Thank you! I used the rename "Place order" button hack. Is there a way to change "Proceed to checkout" button text on the cart page?
Loco translate pluginaga saad muuta pluginate tõlkefaile. Kui on ühekeelne leht, siis saab ka väikese koodijupiga selle ära lahendada.
Millegipärast su tänane kommentaar on Google poolt automaatselt kustutatud, st ma ei saa sellele vastata. Aga: selleks, et kassa lehel oleksid lingid müügitingimustele ja pr.poliitikale, peab seal tekstis olema see shortcode, mis selle tekitab. Müügitingimusele oli vist [terms] vms. Kui neidei ole, siis ka linki ei ole.
Hi, do you have a snippet to force displaying the shipping address along with the billing address or to force the the check Box to "Ship to a different Address. I have a checkout page where there is no option to ship to a different address and no standard method of putting the checkbox there is working.
Hi,
Unfortunately I have no such snippet. See whether Stackoverflow has one.
Hey! Good stuff!! I hafe 2 questiond, if u can help me. 1. How can i add a VAT field, but the meta key has to be named "cui". 2 The code that i put it from the 3 field added at checkout it created meta key in data base. If i don`t use them do i have to search them and delete them? All the best!
This needs another hacks. There are free checkout field plugins available that can do that with the couple of clicks
Hi sir! May i know how to add the custom field only for the Virtual Product?
It would require a modification of the snippet but unfortunatley I have too much stuff going on at the moment to take a closer look at it.