WooCommerce Checkout Page Customization with JetWooBuilder from Crocoblock

Learn how to manage WooCommerce checkout page customization with JetWooBuilder from Crocoblock in 10 minutes.
Building a more unique and custom checkout experience with WooCommerce just became much easier with the latest release of JetWooBuilder from Crocoblock.
Now you can easily customise almost every aspect of the checkout process and in this tutorial, I'll show you the basics of creating a custom WooCommerce Cart Page and a WooCommerce Checkout Page.
Playlist: • How To Customize Wooco...
Buy JetWooBuilder: jo.my/croc
Buy Elementor Pro: jo.my/1s0t2s2
Take your WordPress website and skills to the next level!
► THE TOOLS I LOVE ◄
If you like what we do and would like to support us, please consider using these affiliate links when purchasing any of the plugins covered in our tutorials. Thank you for your support.
► WORDPRESS VISUAL PAGE BUILDERS ◄
★ ELEMENTOR PRO: jo.my/1s0t2s2
★ Brizy Pro: bit.ly/2Ji97r8
★ WPBakery Page Builder (Formerly VISUAL COMPOSER): bit.ly/2NVbVNP
★ DIVI 3 Page Builder: bit.ly/2HiiDcE
► WORDPRESS THEMES ◄
★ GeneratePress Premium: bit.ly/2Ydn1SE
★ OCEANWP: bit.ly/2fRHBr0
★ DIVI Theme: bit.ly/2G8JMiA
★ Astra Pro: bit.ly/2zruoKn
► WORDPRESS TOOLS ◄
★ SMART SLIDER 3: bit.ly/2G0G1vB
★ CSSHERO: bit.ly/2qbrRl6
★ SLIDER REVOLUTION 6 - jo.my/sr6
► WORDPRESS PLUGINS ◄
★ SEOPress Pro: jo.my/seopress
► SUBSCRIBE ◄
bit.ly/2rX7rhu
► LETS CONNECT: ◄
/ wptutz
SUPPORT: Our website offers additional information and perks. Please check it out! wptuts.co.uk

[@davidwalls2304]

Paul, I am building my first eCommerce store using WooCommerce and JetWooBuilder. This video, along with your others, have given me a lot of useful information when building things out. Thanks much. Keep up the good work!

[@davidwalls2304]

Thanks Paul. I am investigating options with Crocoblock (JetEngine and now JetWooBuilder) for a few of my websites. This makes the decision much easier. Keep up the good work!

[@alexanderhayhoe3160]

2:08 - Was having styling issues while designing my Cart page. This fixed it! Thank you

[@mdazhardware]

Thanks, Paul as usual awesome videos, keep up the brilliant work.

[@davidwhittworth1841]

Hi Paul, I've only just started with Jet Builder and found this video to be very helpful. Delivered in a way that was easy to follow and covering most points. As I don't really use Pro Elementor to its full potential (or anywhere near it actually) I can drop it when the next bill is due in favour of Jet Woo Builder. It's a shame really that a shop hasn't been developed within Pro Elementor.

[@KimMcKee]

This is another superb video Paul. Can you keep doing more detailed ones jet woo builder?

As always, Paul is the first to introduce the recent updates. :) I wonder if you have any free time? ;) P.S. I vote for free T-shirt for me :) :) :)

[@WPTuts]

Lol... 🤣

[@sfmikica]

I was thinking about buying JetWooBuilder for next project, and now I think I will do it

[@WPTuts]

Now they've added the ability to customise these new pages, I think it's a much more viable option over the previous versions. :0)

[@FelixEkpa]

Solid tee-shirt... want my copy too :). First to get here :)

[@ryansimmons6982]

Great video, Paul! Question, though - I've set up my single product page and product archive page with the Elementor Pro WooCommerce Builder. If I use JetWooBuilder for the custom cart, etc., will the "default" for the other pages revert back to the WooCommerce version or remain as my custom version?

[@hirushadeshan3482]

Thank you, Paul.

[@joyelvin7145]

Not sure if Im on the bench in the game or if you Paul C is the magic wizard. Just got a JetWoo Builder GitHub request that Ive been following/requested closed today.... and you the magician already have a Tut on it? What ever it is. Thank you my master!!! 😂😂😂

[@WPTuts]

🤣

[@noqlue1240]

Hi @WPTuts, First of all, thank you for your tutorial! I tried to add the shipping form but it is not showing on the frontend. I used Astra as a theme. Do you, or someone else who is reading along, happen to know why this won't show up?

[@charlesa.reboucas513]

Congratulations on another excellent video on the tools created by crocoblock. But I have a question: how to hide the titles of the templates created in JetWooBuilder? I mean the title that we give to the templates and that appear right at the beginning of the page!

[@stefangieser3300]

Good video. Just didn't find how to customize the info messages on the cart page for example when updating the cart or removing products. Any suggestions?

[@webmovie]

great tuts. I miss a way to create a template for checkout while the cart is empty. It shows me the styled template from "empty cart" but I can not style the additional message which says something like 'you cannot checkout while you have an empty cart'. any idea?

[@MarkoKozlica]

Great tutorial, as usual, :D I was wondering if you could help me with a glitch that looks odd, I have made all the templates with JetWooBuilder, but when I load the frontend page you can see, for a brief moment, it loads WooCommerce template and then the JetWooBuilder one on top of it, can I change this?

[@EmranHussainBD]

very helpful videos . thanks a lot wptuts from bangladesh

[@WPTuts]

Hello Bangladesh :0)

[@EmranHussainBD]

@@WPTuts i am begginer wordpress developer. your all tutorial very helpful for me

[@durjoysoldier9650]

@@WPTuts hello wptuts

[@shmulikisraeli4984]

Can I create a popup with JetWooBuilder after the user click on the add to cart button?

[@durjoysoldier9650]

love from narayanganj.

[@Alina-dw2lg]

The only person on KZbin asking the audience for dislikes :))

[@WPTuts]

Well, if people are gonna hit the dislike button, I'm here to make em feel good about it. Lol

[@manuelasmar]

First of all, Thanks for the always fantastic job ; you are really a great teacher. This time however i am having problems implementing these steps. Created the cart template in woobuilder fine, however when i go to view the cart page it sends me back to my home page ?! i asked croco team and they said that i needed to first create a new Cart page with the shortcode in it then go to the advanced tab in woocommerce settings and reference the cart page to my page. I did that and now the cart button does wok and sends me to my Cart page but it does not look at all like the cart templates i created ??? would really appreciate any pointers. Thank you again.

[@SolmazAnvar200]

Nice Shirt :)

[@sebalizarraga1051]

Hi great video, how can i remove the sidebar from the chekout page? i am using generatepress pro. Thanks!!

[@RogveAsset]

I was using crocoblock as part of a bundle with a theme. I have decided to leave the theme and buy crocoblock full license. I have designed my single product pages in elementor themebuilder. Would I have to redesign them with jetwoobuilder to get similar functionality or can I just apply the widgets through elementor pro?

[@_nawazpasha]

Awesome Content Suggestion: You can use timestamps

[@dossantos_films]

How do you make the product image to show up on cart page on Mobile?

[@stephanepruvost1732]

hi Paul, for me when i select the render method to "default elementor" the template doesn't whorks any more. selected "macro" works. Jetwoo builder Version 1.10.5

[@henryherrera3362]

hi I want to ask is there way to change end point pages like Pay order page?

[@synthoelectro]

Bought this lately, but I'm looking for simple monthly paid subs for my users to buy from. Does this plugin do that?

[@yasirhussain7873]

Hi I want to automatically add delivery charges on specfic cart subtotal.....what is the php code for this and where it should be added in the files...Plz guide me..Thanks

[@Semireject]

What Theme did you use here? I'm working on client site running Hello and I don't get as clean original layout of the Cart table as you did from start. One example being the Update cart row which have annoying hover effect I can't get rid of. And besides of that non of the buttons were styled according to the "theme style" I've set up. Much of that could be styled through the widget and custom CSS but I still struggle with some of the unwanted styling (one being that hover effect). And besides that it's quite annoying that most of the fields aren't localized meaning the Table heads for example has English instead of Swedish in my case :/

[@WPTuts]

This video was done on top of the Astra theme with one of their starter sites installed.

[@napoleon2323]

Hi and thank you for that video tutorial. i followed everything you did at this video. After that i am having this problem. when i enter the address at billing address woocommerce doent automatikly update my shipping zones. if i disable jetwoobuilder it works fine. if i enable again it stops :( :( any help REALLY appresiated :(

[@JosephQuinn1981]

Can you change the order of the fields in the checkout? For instance , can you place the email field at the top? This is arguably the most important field to collect especially for cart abandonment. I know you can do this with woocommerce blocks but I am curious to know if Jet Woobuilder has this ability.

[@loge9981]

yes i need to know that too

[@sebalizarraga1051]

Hi i cant remove the sidebar from the cart page using this plugin and generate press, what can i do???

[@Pedant_Patrol]

Great video, Paul. Excellent job as per usual. My one question is, does this allow me to customise the checkout form fields?

[@WPTuts]

I don't believe so, no. I think this is more about designing the look and feel as opposed to adding extra features.

[@Pedant_Patrol]

@@WPTuts Ah, OK. Thanks, Paul. I'm looking for a solution other than Woolementor. I hate the fact that they force me to install two plugins to do one job.

[@WPTuts]

@@Pedant_Patrol I know what you mean. :) Hopefully this is something that they will add in the future. There are a couple of things that I think would make the plugin even more useful. Managing fields (as you asked) as well as the ability to manage field labels and choose to hide them, include the same info in the field itself to create cleaner looking forms, etc.

[@sebalizarraga1051]

Hi how can you edit a clean template on elementor full width? i dont even have that option on my page settings, thanks

[@MahmoudReyad]

will it work fine with an variable products single page ?

[@WPTuts]

It should work fine with all product types I believe.

[@sebalizarraga1051]

Hi how are you? i can´t remove the page tittle either what can i do? Thank you so much!

[@VividConsultant]

Hi Paul, can jetwoo builder be used to create a multi step check-out?

[@manuelhudec]

I'm asking myself the same question. In principle it should be possible with JetTabs, for example, or?

[@ridwaan9289]

Awesome video, can I request a video? (If it's not already done) Basically, I want to show all attributes on the product page and show a different image for each attribute. I'm building a website for mobile phone repairs and need to show all available repair services associated with each device. And the customer can add multiple repair options to the cart and continue to check out. Thanks

[@bobbyw1074]

how can you have a check out button in the cart? The way you have it set up in the cart page, there is no going straight to checkout.

[@Musician324]

Made a slight amend to the surname initial from C to K :) To avoid the confusion :)

[@WPTuts]

Lol, nice one Paul K (aka Paul C) 😂

[@Musician324]

😆😆 I’m having a nightmare with a sticky header today. I’ve disabled it and everything is fine. I wanted the page content to go behind the header but on scroll sections of the page are going in front of the header. All very strange .

[@kevinschmidt2210]

This is a great tool if you want to get up and running fast. However, I think there are too many limitations for those with greater development experience. For them, I think you should do a series that combines Elementor or Oxygen with Meta Box. MB has customized everything, as well as codeless programming that taps into the api, functions, etc. It also eliminates the need for a lot of plugins.

[@adityaarsharmapersonal]

yup have been hearing this from quite a Long Time... Btw one question can themeforest themes be edited by oxygen builder? have u tried then please let me know

[@kevinschmidt2210]

@@adityaarsharmapersonal It doesn't matter which theme you use. Oxygen disables all themes and becomes its own theme with the most efficient code. It eliminates all theme limitations. That is why it is a site builder and not just a page builder.

[@denzu2725]

After creating the cart page and setting up the template, I have a blank page. Anyone had such a problem? I am using hello elementor

[@babelson6]

I have exactly the same problem

[@wallerode46e]

Does the checkout page support external payment facility plug-ins, unlike the Gutenberg version you demoed a while ago? Thank you.

[@WPTuts]

To be honest, I haven't tested with alternative payment gateways as I tend to use PayPal or Stripe (which are the standard WC payment options).

[@wallerode46e]

WPTuts Thank you.

[@WPTuts]

@@wallerode46e no problem at all. :0)

[@Answer_This]

I am confused, whats the difference between Crocoblock and elementor if both are page builders? Thank you

[@WPTuts]

Crocoblock isn't a page builder. It's a suite of plugins that work with both Elementor free and Elementor Pro to expand what you can do with it. JetWooBuilder focuses on letting you build more custom WooCommerce designs.

[@Answer_This]

@@WPTuts nice thank you sir!!

[@WPTuts]

@@Answer_This no worries at all.

[@mehediimam5870]

has anyone faced any problem designing for responsive view on this template?

[@nocturiushd]

Woocommerce Block payment method only accepts PayPal and Stripe. Just to leet you know.

[@SC36DC]

The Kadence WooCommerce Elementor plugin seems to be more powerful, and is free. If you get the Pro version, it's even better. Can anyone with experience using both confirm or deny?

[@marionpaolo319]

In the end of the day Kadence limits what you can do. While this theme builder lets you design as your minds desire.

[@WPTuts]

The free version of Kadence WooCommerce designer doesn't let you create custom checkout and archive pages and the Pro version also costs almost double that of JetWooBuilder. As for being better, I've not tested the Kadence plugin to say one is better than the other.

[@adnanamin1843]

💜💜💜💜💜💜 🌹🌹🌹🌹

[@akhtarabdulrehman4816]

is this jetwoobuilder plugin is free??

[@yonisudwerts408]

no

[@l4webdesign186]

Why do all of the WordPress tutors on KZbin have their arms crossed on the thumbnails?

[@Atractiondj]

your theme in video?

[@WPTuts]

This was done with Astra and one of their free starter themes.

[@Atractiondj]

@@WPTuts thanks

[@WPTuts]

@@Atractiondj no problem at all.