Crocoblock just celebrated its 4th birthday as of the writing of this article. And indeed they deserve to be celebrated as one of the best industry shapers in web design.
If you’d asked me, “what’s dynamic content?” four years ago, I’d definitely go speechless.
As a web developer, all I did was just create some pretty standard sites.
Then came Crocoblock, which made us(web developers) understand that it’s not just about creating websites, it’s about creating quality websites.
Quality websites will mean creating sites with a dynamic content structure, and with a better user experience. And these are the core features of Crocoblock plugins.
Working with Crocoblock plugins provides you with a one-stop shop for all your web design needs especially if you run a web design agency.
It’s definitely an investment with a 2000% ROI if you’d ask me.
Therefore in honor of this #MadeWithCroco challenge, we’re going to create an Online store exploring JetWoobuilder for Elementor and JetSmartFilters.
Getting Started
In this tutorial, we’ll explore how to improve the functionalities of a basic Online store created with Woocommerce on WordPress.
As stated earlier, we’ll use JetWooBuilder, and Jetsmartfilters to design our Woocommerce store.
Woocommerce comes with very basic features that might fail to bring life to your online store. We all know that making sales on a Woocommerce store is all about visual elements.
Therefore, if you want your store to be vibrant and more appealing to your clients then JetWooBuilder will be your best bet.
JetWooBuilder is all about creating custom Woocommerce pages with exclusive designs to improve usability and user experience.
To get the best out of this tutorial, you’ll need to have created your store with Woocommerce’s basic standard settings. In short, if you have your shop page ready, we can proceed.
Additionally, you’ll need to have the following plugins installed:
- Elementor
- JetSmartFilters
- JetWooBuilder for Elementor
- Woocommerce
To get started, you need to make some changes to settings on JetWooBuilder. To do this, navigate to Crocoblock, then JetPlugin settings.
Under JetWooBuilder, click on “General settings“, and enable the Woocommerce pages templates styles as shown below.
In case you need to make any changes to your Woocommerce store, the widgets section below “general settings” will come in handy.
A very core feature of this tutorial is the Jetwoobuilder setting under Woocommerce settings. This is where we’ll need to overwrite the default Woocommerce settings after creating archive templates.
Creating your shop page Archive Template
I’ll assume that you have your shop page already created as shown below.
Essentially, we’ll need to revamp our shop page, with more functionalities to appear something like this:
Consequently, our shop page will need to have a banner, filter, and view option.
- The first step is to create a shop page archive template. To do this, navigate to “Crocoblock, and select “Woo page builder.” This is where we’ll build the shop page template.
2. Proceed to click on “Add new template”, and you’ll get a tab to create and choose specific settings.
3. Select “shop” as your template, choose a design, and name your template. Proceed to then click on “create template”.
4. Our shop page template will now appear as shown below.
This is the page that we’ll now customize to have our revamped shop page. Make sure to publish it to save changes.
However, this shop page template won’t be picked by Woocommerce, therefore we have to go back to Woocommerce settings and under JetWoobuilder, overwrite the shop page built by Woocommerce.
We’ll now enable the custom shop page and select “Default shop template” created as our shop page template. Make sure to then save the changes.
After publishing these changes, our main shop page should pick up the shop template page created as shown below.
Now that we have the basic structure setup we’ll need to now add a switcher to our shop page and portray grid and list view for enhanced usability.
To do this, go back to the “JetWooBuilder templates” and on our “Default shop page template”, select “Edit with Elementor“.
Select the inner section as shown below to access switcher options.
On the Elementor editing tab on the left, proceed to “enable layout switcher” as shown below.
Since we haven’t built our switcher archive templates, we’ll need to create them first. Make sure to update changes before exiting the page.
We’ll need to go back to our JetWoobuilder templates page and create a new archive template.
Create your grid template as shown below:
Follow the same steps to create your list template. Make sure to choose a design that displays the “list” type of view.
Note: Once you’ve created your list item, proceed to navigate to Settings on the bottom left corner. Click on “template settings” and enable “use custom columns count“. Under “template columns”, choose 1. This will prevent the list option from creating multiple items.
Use the following images for guidance.
We’ll now navigate back to our default shop page, to add the grid and list archive templates.
Select the view options as shown below:
Now select the switches for both grid and list options.
Make sure to change the names of the views as well as shown below:
You’ll now have a grid and list option to offer visitors different views.
To have a uniform across grid and list view, navigate to Woocommerce and under settings, on “widgets render method” select, “Elementor default”.
We’ll now set the background image for the banner.
This now completes our shop archive template page.
Create single Product page template
Now that we’ve built the shop page template, we also need to create a single product page, exploring different settings.
To do this navigate back to “Jetwoobuilder templates” and click “add new template“.
Select the single template and choose a single view of your desire according to the templates portrayed.
We’ll now have a single page template to work with as shown below:
When we’re on the single page template, we’ll be able to add new settings specifically for the single product page template.
You can choose whichever widget you’d like to add to improve the outlook of your single product page.
After completing the design for the page, we’ll need to have this single product page as the default single product design across all products.
As shown earlier, we’ll need to go to Woocommerce settings and select “jetwoobuilder” and change the single product page as shown below:
Adding a shopping cart Archive template
Navigate to the “JetWooBuilder templates” and “add a new template” This time make sure to select “cart”.
With JetWooBuilder, we are able to design a cart with no content, and one with content.
To create a cart with no content, simply drag the “cart empty message” widget to your cart page.
The result should appear as shown below:
Now, this is how your cart will appear when you a client hasn’t added any products.
To create a cart with content in it, we have to create another cart template.
However, this time, we’ll choose the “cart table widget” as shown below:
The result should be as shown below:
Now, this is how your cart will appear when a client adds a product to the cart.
On this page, we can add a “return to shop” widget for enhancing usability.
All you’ll need is to drag the “cart return to shop” widget under the cart section.
The result should appear as below:
After creating your pages successfully, proceed to enable the custom cart on JetWoobuilder settings under Woocommerce.
Adding a custom Checkout page template
We’ll now add a custom checkout page from Jetwoobuilder widgets.
To do this we’ll need to create our template on “Jetwoobuilder templates”.
We’ll divide our checkout page templates into two; one for the top and another for the bottom.
Once we create the “checkout top” template, we can divide the top section into two columns.
Here, we’ll insert a coupon form in one column and a login form in the other column.
The coupon column will then appear like this:
On the next column, drag in the checkout login form.
It will then appear like this:
We’ll then create the bottom checkout template.
Proceed to divide the section into 2 columns.
On the first column, drag the checkout billing form.
And the billing form should appear.
On the next column, drag the checkout shippping form widget.
We’ll add another section below the above section to accommodate the “checkout order review” and “checkout payment” widgets.
Once done, we need to enable the custom checkout pages like the other templates.
Filter Products with JetSmartFilters
JetSmartFilters helps users to filter Woocommerce products according to various categories.
To create our JetsmartFilters template, navigate to SmartFilters and click on “add new“.
Name the filter as “categories” and fill the other settings as shown below.
Proceed to publish your filter.
Now we’ll need to add this filter option to our default shop page template.
To do this, navigate to JetWooBuilder templates and select the default shop page template to edit with Elementor.
You’ll now need to drag the checkbox filter to the page.
Drag the checkboxes filter to the section shown below:
Continue to edit the settings for the checkboxes as follows:
You’ll now have an active filters section where you can filter products according to categories.
Now, we’ll have a fully customized shop page created with JetWooBuilder and JetsmartFilters.
Conclusion
This tutorial was meant to just give you an overview of how you can create customized and more appealing woo-commerce pages with JetWoobuilder. Feel free to explore more options and see how you can integrate JetWooBuilder with other Crocoblock products such as JetEngine.
Crocoblock has indeed come a long way in producing dynamic content plugins. You can tell they put a lot of effort into development based on the quality of their products. And I’m here to celebrate their journey. Happy Birthday, Crocoblock!