Build a Powerful WooCommerce Website using JetWooBuilder and Jupiter X

There are dozens of platforms out there to help you build your eCommerce store. If you’re looking for a free and powerful tool, WooCommerce is the most popular one among the shop builders using WordPress. WooCommerce offers some common shopping processes and features including product overviews, add to cart, checkout, shipping and payment and taxes, among others.

However, when it comes to customizing your pages and user experience, you would need to either develop it using a child theme/plugin or through another tool that allows you to customize your shop pages as desired. But wait – there are still ways to build and tailor your WooCommerce store without a single line of code. Read the article in its entirety to learn exactly how to build an eCommerce store in Jupiter X.

The Jupiter X theme offers a great Shop Customizer tool by default. It allows you to customize every part of the default shop pages or choose between the predefined shop page templates. But what if you want to create your own design and layout and use it to build an eCommerce store in Jupiter X? Fortunately, this is possible with the JetWooBuilder plugin which is bundled in with the Jupiter X theme.

What does the JetWooBuilder offer?

Simply put, the JetWooBuilder allows you to override the default shop pages in WooCommerce from single pages to the archive and category pages. It still doesn’t offer any customization on checkout and cart pages, but that part can still be made using Jupiter X or other plugins. So, if you aim to build a completely custom shop page layout, you can make use of the JetWooBuilder plugin. Here is the JetWooBuilder’s official website.

After adding the JetWooBuilder, there will be four global widgets that you’ll be able to use among your templates and even on your own pages:

It also adds a various number of widgets that you can use on your single page templates such as an add to cart button, attributes, content, excerpts, image, price and etc. You can find out how to create a single page template for your eCommerce here. However, we’ll go ahead and go through the steps of creating a shop while using Jupiter X and Jet Woo Builder.

Setting up an eCommerce store with Jupiter X

Let’s set everything up quickly. We already installed the Jupiter X theme and activated it like this. Now we just need to activate the JetWooBuilder plugin and start using it. So, simply go to Jupiter X -> Control Panel -> Plugins, then install and activate the JetWooBuilder plugin. It’s one of the bundled plugins in the Jupiter X theme.

Build an eCommerce Store in Jupiter X Installing JetWoobuilder
Installing JetWooBuilder from the Jupiter X Control Panel

After activating JetWooBuilder, you will notice that two menus are added onto the WordPress Dashboard:

  • Elementor -> JetWooBuilder settings which allow you to set the available widgets.
Build an eCommerce Store in Jupiter X JetWooBuilder Settings
JetWooBuilder settings under the Elementor menu
  • WooCommerce -> JetWoo Templates which lets you add and manage your templates.
Build an eCommerce Store in Jupiter X JetWooBuilder Templates

There is also another place where you can assign your templates to WooCommerce pages. It’s located on WooCommerce -> Settings -> JetWooBuilder.

Build an eCommerce Store in Jupiter X WooCommerce Settings page
The JetWooBuilder tab under the WooCommerce Settings page

Now let’s create our first shop page template and then assign it to our website.

Creating your first shop page template

In order to override your default shop page (usually it would be /shop/ after you finish the WooCommerce wizard), you would need a Shop Page Template and to set the default shop page template in WooCommerce settings.

Let’s do this together step-by-step.

1 – From WooCommerce -> Jet-Woo-Builder Templates, add a new template.

Build an eCommerce Store in Jupiter X Adding a new template
Adding a new template to Jet-Woo-Builder templates.

2 – Select Shop as the “This template for”, then fill in the name of the template and choose your desired layout and click on Create Template.

Creating a default shop page in JetWoo-Builder

3 – Done. Now let’s take a look at the page template that has been created.

The first thing you’ll notice is that this page does not have a style. It may even look like it’s broken.

Build an eCommerce Store in Jupiter X Adding a new template default Shop page template
The default Shop page template created by the JetWooBuilder

Don’t worry – everything is completely ok. It’s just that the widgets used inside the template require dynamic content and since we don’t have any dynamic content at the moment, it looks like this.

On the created page, you’ll see some elements such as filtering widgets among others. Feel free to add or remove the widgets as you wish. Just consider one point: the JetWooBuilder uses the Products Loop element inside the default shop page template. We need the Product Loop widget here. It’s not possible or recommended to change it to Products Grid or any other product loop as it will ruin the mechanism and won’t look good.

Scroll down the left sidebar to see the available widgets under the JetWooBuilder. You can also use other widgets if you like. As you can see, the default shop page utilizes some native WordPress widgets to filter the shopping items in the front end.

Available widgets in Jet Woo Builder

There is one point we should address about the template settings in the JetWooBuilder: The default shop page can be unique, but the rest of the templates such as archive and category pages will be wrapped up inside the default shop page template, as a Product Loop item template if you have it enabled.

This means that you can only design the whole shop page template once, and after that, if you want to use it for category and archive pages, simply create one of the item templates instead of the whole page. In other words, you won’t need to repeat the whole design of your shop page for your category and archive pages.

If you do so, it’ll ruin your pages, and you’ll wonder why the pages aren’t working. The logic behind this is a little bit confusing, but if you know how to use it correctly, then you’ll have as much flexibility as you’ll need to build up all of your custom designs without a single line of code.

Now let’s save this template then add some products to our shop and check out our shop page. Before that, it’s better to set our template as the default shop page in the WooCommerce Settings.

Setting the Shop Default template

1 – From the WooCommerce Settings page, choose JetWooBuilder.
2 – Check the Custom Shop Page checkbox.
3 – Choose the Product Shop Template that you created in the previous step.

Setting up the default shop page template in JetWooBuilder settings

4 – Save the settings.
5 – Make sure you already selected the default shop page in the WooCommerce settings.

Default Shop page of WooCommerce

After adding some products (you can find a dummy product file here), the final results on the shop page will be like the following:

The Default Shop page populated by the dummy products.

Creating the archive and category pages using JetWooBuilder

The overall process was easy, right? Now let’s practice the steps above with a new goal in mind – which is adding the archive and category pages. The JetWooBuilder website explains this topic thoroughly.

However, a question that will probably pop into your mind is: what will happen if you don’t use an archive or category page? Well, the answer is nothing. It will still wrap up the products on the default shop page and show the default loop item layout. If you want to have a different layout on the loop items, you can use the archive and category page templates. Here is the complete tutorial for this: How to create and set a Product’s Archive template

Here’s the video that demonstrates how this template feature works with the JetWooBuilder.

Final Thoughts

The JetWooBuilder is a tool that can help you create highly customizable shop pages. From the default shop page to archive and single pages, there are widgets and options that allow you to create stunning shop pages that fit your needs.

In this article, we briefly explained how to build an eCommerce store in Jupiter X by working with the JetWooBuilder. The most common issue with JetWooBuilder occurs when you change the Product Loop widget on the shop page or use the product grid on the archive pages.

Let us know your experiences and thoughts in the comment section below! 😉

How to Create a Custom Product List with Jupiter X Shop Customizer

WooCommerce is the world’s most popular eCommerce platform. And yes, it’s highly customizable. But adding a bunch of snippet codes to your theme or coding a custom product list to have a unique products page is really difficult.

On the other hand, what if you want to change the styles of every element in the product list? you must overwrite its CSS and check if the new styles are the one that you prefer or not. Man, It’s really time-consuming! Isn’t there any better solution to customize products list on your website?

Well, the answer is positive! Jupiter X solved that problem by introducing Shop Customizer. Jupiter X Shop Customizer allows you to customize almost every untouchable part of your WooCommerce shop including product list, product single, shopping cart, and checkout pages without writing any single line of code. Also, you can see your changes live and do trial-and-error testing easily and quickly.

When you create a custom product list with Jupiter X, you are able to:

  • Show/Hide product elements such as Image, Name, Price, etc.
  • Define the number of columns and rows of products in the list
  • Define the space between rows and columns.
  • Enable/disable pagination option.
  • Change the style of every element in the product list page.

In this article, we will guide you, step by step, through learning how you can create a custom product list with Jupiter X by a practical example. But before customizing the Product List page, you must create it.

Creating a Product List page

Once you have WooCommerce plugin installed and activated, you can use Jupiter X Shop Customizer to modify your product list. WooCommerce usually creates necessary default shop pages for you by including Products List. To make sure whether they’ve already been created, you can check it from WordPress left menu > Pages > All Pages. The one labeled as Shop Page is your default Product List page which can be modified via Jupiter X shop customizer.

In case you didn’t find that page, you can create a new page in WordPress, then navigate to WooCommerce > Settings > Products and make sure Product Archive/ Shop Page is assigned to it.

Note: Before any customizations, make sure that your shop page is set to the Default template.

There are two methods to create Shop page or Product List for your website in Jupiter X. The one by Shop Customizer and the other, by Elementor. In this tutorial, we focus on creating Product List via Shop Customizer.

If you plan to create your products page with Elementor, you can use raven Products element instead of Shop Customizer. That Elementor widget allows you to create your custom product list page with Elementor. In case you’ve created your products page with Elementor, you can’t use Shop Customizer and you must only edit it via Elementor.

Also, be aware that all the WooCommerce default shop pages, including Shop Page, should not be edited with Elementor. Once you modified them with Elementor, you won’t be able to edit them even anymore, even through Elementor. If you accidentally edit WooCommerce default product page with Elementor for any reason, you have two option to restore it:

1. You can simply delete that page and create a new page. Then, navigate to WooCommerce > Settings > Products and assign Product Archive/ Shop Page to it as we explained before. Make sure the new page is set to a default template.

2. Switch to text editor mode and remove every existing code inside it. WooCommerce default shop page must be empty, according to WooCommerce documentation.   

Customizing Product List with Shop Customizer

After creating Shop Page, you will be able to modify it with Jupiter X Shop Customizer.  To customize the product list you’ve created:

1. From the WordPress left dashboard, go to Jupiter X > Customize > Shop > Product List

2. A new window will open with all the available options to customize and style the Product List. Product List Customizer has two tabs: Settings and Styles tab. The first tab (Settings) allows you to enable pagination option, show/hide elements, define the number of rows and columns for your products page and more. In the second tab (Styles), you can change the styles of each element of the product list.

Settings

Here are the all available options in the Product List Settings tab:

Styles

Here is the description of all available options for styling elements which can be found in the Styles tab by clicking on Customize for a specific element.

Margins and Paddings

You can set margin and padding for every available element in Product List.

Units

Units are crucial to set font-sizes, measuring spaces, setting the width, etc. Because of that, you can set different units for all the properties which have units. There are four types of units in Jupiter X customizer: PX, REM, EM, and %. By clicking on the chosen unit, other possible units will be shown, and you can choose another unit for the property.

Responsive Option

The responsive option is one of the important and useful features in Jupiter X Customizer. This option allows you to set different values for different screen sizes for some of the properties of a particular element. For example, you can choose different font-sizes for Tablet and Mobile screen sizes. For every property which has the responsive option, you will see the Monitor icon next to it. By hovering over the monitor icon, three devices will be shown and you can choose another value for them.

Case Study

Let’s pretend that we want to create a Product List page with 2 columns and 6 products per page (demo is shown below). Pagination should be enabled so that users can navigate through pages.

Here’s what you can do:

1. Create a Product List page as described before.

2. Go to WordPress left Menu > Jupiter X > Customize > Shop > Product List

For this example, we want to enable the pagination and have 6 products per page in two columns. So, we set the number of columns to 2 and the number of rows to 3, so that we have 6 (2×3) products per page. In this example, we set Title HTML Tag to h2. You can also set the spaces between columns and rows.

Let’s now set the spaces between columns to 30px and rows to 70px. Finally, we want to display all the available elements in the Product List page, except rating. So, all you need to do is disable Rating option and enable all other elements. Final settings should look like this:

3. It’s time to style the elements you’ve enabled for products in the product list. So, navigate to the Styles tab. You can see all the available items you can customize theirs. By clicking on Customize on each item, you will be lead to the customization panel of that element.

Let’s start with customizing Name element:

  • Text Color: #333
  • Font Size: 20px
  • Font Weight: 700

Regular Price

  • Font Size: 25px
  • Font Weight: 500
  • Text Decoration: none
  • Text Style: Normal

Sale Price

  • Text Color: #e63b6b
  • Font Size: 25px
  • Font Weight: 700
  • Text Decoration: none
  • Text Style: Normal

Category

  • Text Color: #333
  • Font Size: 15px
  • Font Weight: 500
  • Text Style: Normal

Add to Cart Button

  • Text Color: #fff
  • Background color: #e63b6b, Background color (Hover): #6b6f78
  • Border width: 0, border radius: 0
  • Letter spacing: 1px
  • Font Size: 15px
  • Font Weight: 700
  • Text Style: Normal

Sale Badge

  • Text Color: #e63b6b
  • Background color: Transparent
  • Border width: 3, border radius: 5, Border color: #6b6f78
  • Font Size: 15px
  • Font Weight: 700
  • Text Style: Normal

Out of Stock Badge

  • Text Color: #888
  • Background color: #fff
  • Border width: 2, border radius: 0
  • Font Size: 15px
  • Text Style: Normal

Item Container

  • Text Align: center
  • Background color: #fff
  • Border width: 10, border radius: 0, Border color: #c4c4c4;

Pagination

  • Text align: left
  • Font size: 15px
  • Background color: #fff
  • Border width: 1, border radius: 0

After you’re done with all the customizations, simply close the Product List settings panel and Publish the changes.

Summary

In this article, we’ve explained how you can create a custom Product List with Jupiter X for your e-commerce website and how you can modify it via the Jupiter X Shop Customizer.

Meet JetWooBuilder! The Ultimate Tool to Create Unique Product Page Templates With Jupiter X

JetWooBuilder is a great new feature in Jupiter X that allows you to create WooCommerce Single Product page templates and WooCommerce Product Archive templates with Elementor live page builder’s multiple dynamic content widgets.

You can create unique product page templates with Jupiter X using lots of special widgets and assign it to any product you need. JetWooBuilder is very simple to use. Anyone, from beginners to expert developers, can create attractive and professional-looking WooCommerce Single Product pages without ever touching a single line of code.

Like many other amazing features in Jupiter X, JetWooBuilder is a plugin that can easily be activated through Jupiter X plugin manager.

Customizability

With JetWooBuilder, you can create any layout and design using Elementor page builder and assign it to a product or create an archive template for Shop in your website. So, the options are limitless.

JetWooBuilder Overview – 

Check out samples here.

Powerful Global Widgets For WooCommerce Online Store

Some global widgets in JetWooBuilder can be used for showcasing products and their taxonomies on a custom page.

This widget displays the WooCommerce Product Categories in a Grid layout on the pages built with Elementor.

With this widget, you’ll display the products in a beautiful grid layout. Note that products should be created with featured images, descriptions, and prices in place, so you can set up the widget in the most fitting form.

Using this widget, you’ll showcase the WooCommerce products into stylish list layouts.

This widget allows you to display the taxonomy categories or tags for the WooCommerce products in the form of attractive tile layouts.

Creating a Single Product Page Template

With JetWooBuilder you can create a new or use a pre-designed single product template using dynamic WooCommerce widgets and set it for WooCommerce products.

The layouts that can be used are:

Left-side Product Image 1

Left-side Product Image 2

Right-side Product Image

Centered Product Image

The JetWooBuilder documentation will give you more information on how to create unique product page templates with Jupiter X.

Creating Product Archive Template

Another great feature is creating the Product Archive template to use for the Shop page or any other product layouts displaying related products, cross-sells or products in the shortcode.

Using special, easy-to-use WooCommerce widgets, you can build such archive layouts:

Products Grid with Left Sidebar

Products List with Left Sidebar 1

Products List with Left Sidebar 2

Products List with Right Sidebar

Find more details about creating archive templates in the JetWooBuilder documentation.

Other Features

There are numerous options you’ll discover once you start experimenting with this amazing Shop builder. Aside from that, you can create Categories Loop template, set advanced appearance settings of the widgets, define widget margins and padding, use entrance animation, change the background for the whole widget, and so much more.

When users search for a specific product, you can use the Archive template to show the relevant items they’re looking for. The Archive template will also allow you to display items using shortcode, or with Upsells or Cross-sells widgets in Elementor-built single product templates.

How to Create Unique Product Page Templates With Jupiter X

Watch this video to learn how you can easily create templates for your online store using Jupiter X and JetWooBuilder:

Giveaway: Get This Free T-shirt Shop PSD Webpage Template

Free T-shirt Shop PSD Webpage Template Featured Image

We’ve created a WordPress theme for e-commerce websites and we would like you to give it a try by downloading its free PSD landing page template. For the next installment of our giveaway, we are giving another FREE T-shirt Shop PSD webpage template. Absolute no mechanics!

We’ve created a WordPress theme for e-commerce websites and we would like you to give it a try by downloading its free PSD landing page template. Expertly designed by the Artbees team, this new theme, T-shirt Shop, is created to suit the most advanced layout builder, Jupiter X.

It’s a free T-shirt Shop PSD webpage template that consists of Photoshop files instead of heavy codes. No need to worry about writing or editing code. What’s great, is that this is not a contest, you can easily download the PSD WordPress template without any mechanics to follow!

Key Features

Built for online stores, T-shirt Shop is a single shop-based WordPress template for Jupiter X builder. The template has a full-screen search feature, modified single product, and product lists which are improved and modified with Shop Customizer.

It has a simple yet professional design with green accents that complement the white background. It also has accessible contact information all throughout the website which is perfect for an e-commerce website. Another thing that’s great about this Jupiter theme is that it has an Add To Cart feature as well as a Sort Button feature that are essential for online stores.

No coding skills? No problem! This template contains Photoshop files and requires no coding skills. You can set up an online store for your business without doing all the crazy coding stuff in an hour or two!

Free T-shirt Shop PSD Webpage Template Full Page

Use Cases

The free T-shirt Shop PSD webpage template is perfect for businesses who want to create a simple e-commerce website and feature their products online. These businesses could be start-ups and are new to e-commerce or those who have existing businesses but want to showcase their products online through an e-commerce website. Especially now that we’re in the digital era, more and more people prefer to shop online instead of going to the stores.

Some businesses that may find this template in theme with their brand include t-shirt shops, sporting goods store, arts and crafts businesses, home improvement stores, office supplies stores, and more.

You can use the free T-shirt Shop PSD webpage template to create an online platform for your business while eliminating distracting information and placing focus on your products. This Jupiter theme is well-designed to suit any business and can be tweaked accordingly to transform it in a way that matches your brand.

Build an online presence for your business in as easy as 1-2-3 with this free T-shirt Shop PSD webpage template from the makers of the visual website builder, Jupiter X. Start raking in sales by having your own e-commerce website and enjoy endless opportunities for your business. Download the T-shirt Shop PSD WordPress template today for free and start selling!

To enjoy more than 160 advanced templates that are already coded with the highest standards, download Jupiter WordPress Theme!

***Important Note: Artbees free templates cannot be sold or distributed as it is — only derivative works for end users can be sold.

Giveaway Alert: FREE Fashion Shop Webpage Template Up for Grabs!

This is a free giveaway for everyone who wants to use our template, Fashion Shop. You can use this homepage template to update, revamp or build a brand new landing page. The best thing about it is that this is a PSD template — no codes at all! It’s perfect for beginners and amateur WordPress website designers.

Continue reading