Crocoblock WooCommerce with JetWooBuilder & Elementor

Learn how to use Crocoblock WooCommerce plugin JetWooBuilder to build your first custom eCommerce website design.
JetWooBuilder is a super powerful plugin for Elementor and WordPress that helps you create unique, eye-catching WooCommerce websites without the need to understand any coding.
In this tutorial, I'll show you how to build the following custom pages and build a full WooCommerce Online Store.
✅ Buy JetWooBuilder: jo.my/croc
✅ Build a custom homepage
✅ Building the default shop page (include list filters)
✅ Building the default archive
✅ Building the single product page
✅ Build a custom shopping cart page
✅ Build a custom Checkout page
✅ A basic introduction to JetSmartFilters for WooCommerce
If you're looking for an easy to follow tutorial on getting more from your WooCommerce designs, this tutorial is going to be perfect for you.
TIMESTAMPS
00:00 - Introduction
00:49 - What we'll be building
01:27 - The Tools & Settings
04:15 - Building the Homepage
19:22 - Building the Shop Page & Archives
29:13 - Building the Single Product Page
33:56 - Building the Cart Page
39:37 - Building the Checkout Page
44:12 - Adding JetSmartFilters
47:00 - Summary
Referenced tutorials:
Custom Cart & Checkout: • WooCommerce Checkout P...
JetSmartFilters: • Best WordPress Filter ...
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.
► MY PREFERRED HOSTING PROVIDERS ◄
✅ CloudWays: jo.my/1feeng8
✅ SiteGround: jo.my/sgwptuts
► WORDPRESS VISUAL PAGE BUILDERS ◄
✅ ELEMENTOR PRO: jo.my/1s0t2s2
✅ Brizy Pro: bit.ly/2Ji97r8
✅ 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
► 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

[@davidwhittworth1841]

Your video may be 2 years old but to me it's still relevant even to the point of coming back to it time and time again. Great video, thank you.

[@fernandoespejo6549]

Amazing! Thank you so much for your help!

[@Waladhoolin]

Always the best!!🔥🔥🔥

[@selamatdolcevita5215]

Thank you for all, the best tuto I have found on the subject

[@OmarWaleed]

More than wonderful tutorial ;) thanks

[@wptalkswitharif]

Thanks a lot. I have spend more than hours to know how to use the template, finally I found it.

[@johnm3066]

You got some of the most useful vidoes, thanks man you got my sub.

[@asadhasanzada4877]

Thank you very much for this Tutorial! 👍👍

[@SaurabhMishra90]

You’re the champ. Would love to see more advance video on this. Love what you’re doing. Keep going

[@WPTuts]

Thanks! Will do!

[@michaelmclaughlin1563]

@@WPTuts G'Day Paul. Add me to the list looking for a more detailed tutorial on JetWooBuilder. Thanks.

[@MissCaecilia]

Yess please a more advanced tutorial:)

[@murilotrucolo]

Thanks so much for this video, It helped me a lot!

[@joecretella4784]

Hey Paul, I'd love to see a video explaining best practices for using Elementor page templates vs Crocoblock page templates. May sound basic, but I think a lot of people (like me) have issues troubleshooting page content errors because they don't understand how templates work behind the scenes... Anyways thanks for the great content, as always!

[@EdmontonRealEstate01]

I would love to see an in depth tutorial on JetWooBuilder. I would love to customize the entire checkout process since I need for them to also create a subscriber account during the purchase process and I have very little understanding of how to do that.

[@shapourh6516]

You deserve a big like man, Thank you

[@WPTuts]

Glad it helped

[@Domingos_Ferros]

Thank you for all the great content. You are doing an excellent job, I can´t thank you enough it´s been helping me a lot. I would like to see more videos too, videos about all the requested below and how to set an automatic invoice after payment too.

[@christianbernalgarzon8055]

Excelente vídeo. Desde Bogotá - Colombia

[@DBCVC]

Thanks Paul Great video!

[@WPTuts]

Glad you enjoyed it

[@protap888]

Thanks, Sir!

[@laurentbelin2194]

Very nice!

[@tephlondandada156]

Awesome tutorial. I would definitely be interested in a full in depth tutorial of jetwoobuilder.

[@homecrayons]

Hey, that was really awesome and helpful tutorial. First of all Thank You! An in depth tutorial would be great for jetwoobuilder as there are not much videos available on the tube related to this amazing plugin. Thanks again.

[@saeedjj]

great . thank you

[@fasihahmad6828]

Excellent

[@davefilchakmusic]

More in depth would be great .... thanks!

[@TheWagatron]

paul iv created a grid and list, and i would like to display custom acf's in that loop, although they dont display? what can i do?

[@christosdaglis5987]

Loved this video!! A question regarding JetSmartFilters though. For example if I have a glasses woocommerce shop and I've filtered everything BUT glass types (Round, Rectangle etc) but I have not created such attribute or tag for the products... what is the best approach? Create an attribute for each product type or is it possible to create this filtering option using JetSmartFilters alone?

[@sarahpowell5662]

Hi, great vid as always. I too seem to get to the point of assigning the grid/list layout options and the moment I do all products disappear and the layout option on the front end isn't there. Am I missing something? I've enabled the Archive product as instructed, also assigned the "Grid" layout to the Archive Product Template to no avail.

[@gabrielk5497]

Thanks for sharing your knowledge Paul. I wanted to share a doubt I have. For the default products template it's possible to create and assign more than one? Since sometimes depending the categories you can display different designs. With Elementor pro that could be achieved inserting conditions and assigning it to a specific category. With Jet Woo Builder that's possible? Thanks in advance!

[@apiedoe]

Hi Paul, Thanks alot, do you know how to align the " ad to cart" button

[@alhanrahman]

Yes Paul. We want advance tutorials with as much details as possible. 👍👍 Great Job. Amazing Videos. Can you share what mic you use. Amazing audio quality. You must have spent alot on acoustics too I guess.

[@WPTuts]

Sure, the mic in the screen capture stage is an Aston Stealth and the mic used for the to camera pieces is a Beyer Dynamic shotgun mic into a Tascam recorder and synced in post with Red Giant Pluraleyes.

[@VladimirKurian]

Great tutorial Paul, thanks a lot. I would be interested in full in depth tutorial about creating custom shopping cart, checkout, thank you page and registration page.

[@H2theU2theG2thH]

Very helpful. You're using the Storefront theme for WordPress. Any advice on which is the best theme to use with Crocoblock extensions/plugins? Is it best to use the Crocoblock Kava theme?

[@nayandas-jy6tw]

Sir thank you. we like to see more advance like this, please

[@thunderke2]

Hi all , Paul. Is it possible to hide the titles of the checkout page within the jetwoobuilder ? Can't find a way to disable the titles. thanks!

[@inspector-tech]

The problem with using Jetwoobuilder templates is you can’t force them to use the Elementor canvas by default. So you have to have a header present. Do you know a way to bypass this?

[@spennysimmo3006]

Hi Paul. It would be good to see a more advanced video also. Also, I noticed you had JetSearch installed but didn’t make use of it. Would be good to see how that is configured and integrated into the templates.

[@willscurlock]

Hi Paul, great presentation as always. I was wondering if JetWooBuilder could be used to create a general listing directory? This would then require a front end form so that registered users could upload their content. Is that possible?

[@logantate2721]

worked great for me, but for some reason my header won't show on the JetWoo Template pages. Any idea why this might be?

[@ricr8987]

So, Jetwoobuilder desn't have infinite scroll in products grid? We are in 1999 with the 1-2-3 pagination?

where can change the number of products that show in Loop. I create the archive for the loop. Thanks

[@fahmid1971]

I need to create *dynamic archive page for Artists* for a art selling website. Is there a way to do that?

[@GrahamBrownVirtualTours]

Hey Paul, great tutorial as ever :) I noticed at the end that the results counter did not update when you clicked on the categories filter provided by JetSmart Filters. Do you know a fix for this?

[@JoeLujano]

No homo... I love u.... you're a savage bro I've watched almost all these crocoblock videos

[@davidr5847]

Would love to see some video's from you about oxygen :) Just started using it since last week (coming from Elementor) and I'm in love, bit would love to see some tips from you!

[@WPTuts]

Oxygen is definitely on the cards for when I have some time to dedicate to learning it. 💪

[@mendezkare5720]

Text displaying vertical after checkboxes on the Checkout Page. How do I fix this

[@jpdizzel305]

Hey Paul, love your tuts and content. Have you experienced any bugs mixing templates between Elementor theme builder and Crocoblocks Theme builder? For example, I built my single product page with Elementor theme builder and created my cart, checkout, shop, with Crocoblock Woo Page Builder. Do you find this to be a problem? Are there any disadvantages?

[@MrTajcsi]

When the cart is empty, the cart totals widget still shows, and it lets me click on the proceed to checkout button in the empty cart, which leads to a "page does not exist" page. Can you please help? Thank you.

[@ventajadigital8580]

Hi Paul, really thankd for all your videos, I would like to ask you something. I have a category template with jet woo builder with a filter by categories, it works almost perfect. I have this problem: when I click on a category page is the website, it opens the category page but it does not show the category products related, how can I fix that?

[@ThomasDevOnline]

Following along in 2022 - For some reason at: 23:02 - Product Switcher doesn't appear for some reason! Very frustrating! (Update: I had to go into WooCommerce > JetWooBuilder > Enable Custom Archive Page)

[@ariaw.a.9055]

Terimakasih 😇🙏

[@Dbomb81]

When I get to my shop page, in elementor I see my product items. When I go to the live page, there are no product items at all. What am I missing here?

[@sivlillevik1927]

I would really like to see the template part of this (archive and how it applies to the shop page). I struggle with it now and the documentation on Crocoblock pages are not helpful

[@pabloibarguren6236]

27:00 now it has a 1st option: "Select Archive item template:" whitch only let you choose (grid or list archives) and all productos just disappear on the test pege... what can i do?

[@ankit7791]

How to add paginations or products grid or products loop in jet woo builder , can you please guide here

[@tayorain6554]

how did you get the living life theme how to get it i dont have it ? and you didnt even tell it

[@hosnialqaramani4457]

Hi paul Looking for complete shopping site with jet plugins include payments, customer account, password rest, and so on.

[@MrTajcsi]

I did a custom cart page and empty cart page, but when I try it, the bottom says "Next JetWooBuilder Template →". How can I get rid of that?

[@jonestan7220]

Very helpful video for me that just started to build a webshop! But here, I can't seem to replace my cart page with the page I've built with jetwoo builder, but other pages do just fine. Any advices?

[@rodrigogoncalves751]

também não

[@MaxWeir]

Have you got any guides for creating a crocoblock header within a woocommerce site? E.g logo, mega-menu (desktop/mobile) and adding cart, account links etc. Im struggling to find any recent guides on how to create this.

[@prajapatikishan3222]

I'm using Kava Theme and my "My Account" Pages and all pages built by jetwoobuilder are not having full width. Solution?

[@eduardobaruffi4510]

Helo ! I'm from Brazil and I have a doubt. If I add a listing on the home of a woocommece product, how do I show products from only one category? Thanks

[@dnrhossain]

Today I have got a problem with the WooCommerce plugin. When I activate the WooCommerce plugin then the browser shows "503 services unavailable". But when I deactivate the WooCommerce plugin then there is no problem. Details are below 1. WordPress 5.6.2 2. Theme = Hello Elementor 3. Plugins = Elementor, Elementor Pro, Crocoblock all Plugins, WooCommerce. Eagerly waiting for your reply. Regards

[@kingsgamingfederation8444]

When I am clicking on add to cart it doesn't redirect to cart, instead it simply adds to cart how to redirect directly to cart ....

[@FancyDesign]

Hit the "dislike" button twice... LOL... well, great video guide. I hit the "Like" button once. Keep creating great tutorials. ♥

[@GameMasters10]

Thanks, for the tutorial. Great helps alot. Can you create a deeper tutorial for jetwoo builder?

[@gsboss81fr]

Great Video! Do you know If they are going to implement some woocommerce variation swatches in this plugin? It could be great! That’s exactly what I need right now...If not, do you know if there’s a good plugin for variation swatches that works with jetwoobuilder? Thanks

[@mohamedel-toukhi4093]

Hello Paul, thanks a lot These jet woo pages are not updating!! Can you please explain further to me

[@lv986]

Great video Paul, it would be nice if we can choose which fields we have in the billing form on the checkout page and also the order, like in woolentor or woolementor. Then we need less plugins.

[@WPTuts]

Good point! I agree that it would definitely be a very useful feature. Hopefully, this will be something they include in a future update.

[@mediadesign8231]

Can I edit and add fields() in the Billing Form section? Thank you

[@WPTuts]

Not at the moment, no. There's no options for editing the actual form content or structure, just styling options.

[@caseywhitcher6158]

Great intro to jetwoo! For some reason when I change my Widgets Render Method to Elementor Default, the products disappear from my shop page? Still says it's displaying them, but they are not present. I'll keep troubleshooting, but if anyone has a quick fix! Thanks!

[@caseywhitcher6158]

Custom Archive was not checked in Woo > Settings > JetWooBuilder, I thought it was something like that, I must have missed it when I was going through the tut! :)

[@Dominatorgame]

Please sir, I wanted on my WordPress real estate website, a tenants page to carry info such as apartment occupied, address of property occupied, rent due, rent paid, outstanding if any, signed contract, and a space where they can receive and also send documents such as proof of payment, tenancy agreement, receipts, e.t.c. So as to reduce physical interactions and paperwork but online interactions and soft work. Please I need your help sir

[@saidulislam49dev]

Which theme did you use in this project? If you mention the theme that you use in your tutorial projects that would be a great to us to go with you!!

[@sfmikica]

Idead for comparison video Woolentor Pro vs JetWooBuilder

[@OscarObians]

I might have missed it but what theme did you build this on?

[@WPTuts]

Pretty sure this was with the Hello theme.

[@OscarObians]

@@WPTuts Okay. Thanks

[@user-kb9ls7po2u]

Спасибо большое за видео 👍 Я наконец-то смог найти ответ, как решить мою проблему с компоновкой каталога.

[@houseal]

One particular issue is driving me mad trying to customize a WooCommerce site with Elementor and JetWooBuilder: How do you control and customize the default WooCommerce notifications and messages? XYX product has been added to your cart... Shipping options updated... Cart updated... etc etc. Once I customize the single product, cart and checkout templates, these messages invariably take up the entire browser width and I can't control the position or appearance at all. What am I missing? I'm using the Elementor Hello theme.

[@-publicarlos]

No es recomendado utilizar "Hello elementor". Te recomiendo que uses "Astra" es adecuando para tienda.

[@rhysadams]

Is there a way we can change the fields on the checkout? Great video as per usual

[@WPTuts]

Not at present, but I have spoken to Crocoblock and passed on the comments about fields and they'll look into adding it .

[@gabrielk5497]

It's possible to modify (add or remove fields) with plugins. For that purposr I use Checkout Field Editor.

[@evolutionmedia2120]

Hi there, I was following your tutorial (awesome by the way) However when we get to 27:26 where you switch the "widget render method" from Macros to Elementor Default my Grid layout and List layout no longer show anything... any idea why? - Andy.

[@evolutionmedia2120]

I found the issue, I had to enable and assign the "Grid" layout to the Archive Product Template as well.

[@OmarWaleed]

Great tutorial as usual ;) Thanks But in time 41:37 How can I delete an unnecessary field from "Billing Address", I want only the "Name", "Email" and "Address" and delete the rest. Thanks in advance

[@deanlohcom]

Thank you Sir for the good tutorial! Exactly what I needed! is there a way we can control the order of categories here → 7:58

[@TheWagatron]

Paul, i love your videos, i purchased crock, after watching your video, hopefully the link in your description, enabled you to get some type off affliate payment, as its well deserved, after all. But a simple question do u think there is any need to use crock and elm pro at the same time? simple reason after installing crock buy the way i bought the full sha bang from them, but now all my custom templates from elm pro have gone (not associated) . Obviously im going to rebuild them anyhow so its no biggy, but it does pose the question, is there any need in elm pro now.

[@WPTuts]

If you're using JWB then I don't see the need for Elementor Pro for that aspect as there is a lot of duplicate functionality. That doesn't mean that there are other things that Pro offers outside of the Woo integration that you may not need. So, I guess the answer is 'maybe'.

[@TheWagatron]

@@WPTuts one more question of you don’t mind, what are your opinion on jwb with doms and page speed?

[@daedaluxe]

With builders like this there is normally a flash of content from the default themes layout, is there a way to disable the default theme styling completely?

[@WPTuts]

Use a theme like Hello and that really doesn't have any styling involved.

[@daedaluxe]

@@WPTuts Hmm, suppose I should do that. I use oceanwp/child at the minute. Is there much of a speed difference between Hello and Oceanwp do you know?

[@jaynegardiner4358]

Can u just buy the jetwoo plugins if we already have WooCommerce and Elementor?

[@WPTuts]

Yes, you can buy JetWooBuilder as a single plugin from here: jetwoobuilder.zemez.io

[@marketingscarborough]

Great explanation of crocoblock Paul, easy to follow and detailed. What theme did you use? Astra? Hello? Does it matter?

[@marketingscarborough]

Hello theme - I just found it in the reply to one of the comments

[@spiritualityjuice]

At what point do I just quit and say it’s buggy and doesn’t work at all?

[@russelbraum1733]

Hi Paul. What theme did you use for this tutorial?

[@WPTuts]

Looks like it was probably Hello for Elementor.

[@russelbraum1733]

@@WPTuts awesome thank you.

[@lucapriati246]

This isn’t mobile responsive? Do you know how to address that?

[@LALINROBLES]

Good video. I can see in your shop page Result Count widget does not work with Filtered products. It always showing "9 results" when you filter products. I know it also happens with the pagination widget. Both widgets from crocoblock. Is there a way to make this Crocoblock widgets to work with Filtered products? Best Regards From Perú.

[@rifathassannibir8378]

We do want to see some advanced tutorials.

[@WPTuts]

I'll see what I can come up with over the next couple of weeks. :)

[@dylangoh7153]

@@WPTuts looking forward to it... Your tutorials inspires me

[@tamera00]

Hi Paul It would be great to see an easy way to show "Sub Categories" as thumbs when going to the master category page, Love your vids..

[@WPTuts]

Funnily enough I covered that on Friday. kzbin.info/www/bejne/fKClpmt3h6eehtE

[@tamera00]

@@WPTuts Yes, I'm watching it now.. Although I need to watch again as it shows you setting sub categories on the shop page so I'm confused with when to use the shop page and when to use the archive page? Cheers Paul

[@WPTuts]

@@tamera00 you can set it up on any archive template and use the settings I show and it automatically detects sub categories based upon your product categories.

[@tamera00]

@@WPTuts Thanks for the reply Paul, The bit I'm struggling with is that I want to create the landing master category page and for it to only show the sub category thumbs without the products listed below? - but if I remove the products grid then no products show when the sub category is chosen? Ideally, I'd like a simple category page showing sub category options only, Then only show products when the sub category is selected? It appears that it can be done with Elementor pro templates but not JetWoo Builder, unless I've missed something silly somewhere. Thanks for your help though..

[@1manshow120]

Multivendor tutorial please... Thank You.

[@patricialanzina4184]

Great tutorial. May I ask you what is the name of the theme you started from ?

[@WPTuts]

More than likely the Hello theme for Elementor.

[@patricialanzina4184]

@@WPTuts thank you a lot

[@WPTuts]

@@patricialanzina4184 my pleasure. 😁

[@viralinbound5215]

what theme were you using ?

[@WPTuts]

The Hello theme for Elementor.

[@rodlivz]

Well done 👍 mate... Always a pleasure. How does the speed of the site compare with a standard WooCommerce theme?

[@WPTuts]

I haven't benchmarked or optimised it, but it certainly felt snappy while building and testing things out. That was on shared SiteGround hosting - so, still room for optimisation and speed increases.

[@saphelife7231]

I scheduled a demo at 8am this morning. No communication, No show. Is this company still around? Paul do you know?

[@WPTuts]

That's odd. Was the call confirmed?

[@redabeg]

Why you don't show how to build Categories Page? Becouse this is realy big problem.

[@prantokhan2303]

No sorting

[@davidhan3672]

jetwoo builder is not updated for the new wordpress, I can not follow up with anything in your tutorial

[@WPTuts]

Really not sure what you're talking about! This was recorded using the latest version of WordPress and JetWooBuilder!

[@davidhan3672]

@@WPTuts Hi WPTuts, thanks for your reply . I downloaded the free version on wordpress, without noticing this. I guess in any of the future tutorials, there should be an explanation that JetWooBuilder is a paid app, and need to be downloaded in their company websites instead of wordpress store. Otherwise, I guess, still some of the fresh guys still be having problems.

[@MegaHannanas]

please please please do a more advanced tutorial, they are so hard to find. especially done as well as you do.

[@spiritualityjuice]

Wow everything absolutely doesn’t work!! Amazing ! It’s infuriating .