Creating an e-commerce website can be a daunting task, especially for beginners. But with the right tools, the process becomes much more manageable. One of those tools is JetWooBuilder, a feature of the Crocoblock suite for WordPress, designed to enhance your WooCommerce experience.This guide is designed for beginners, detailing the installation of JetWooBuilder and how to use its rich set of features. Let's dive in!
JetWooBuilder is not a standalone plugin, rather, it's a part of the Crocoblock suite. To use JetWooBuilder, you'll need to install Crocoblock. Here's how: Step 1: Purchase and Download CrocoblockHead to the Crocoblock website (https://crocoblock.com) and choose the appropriate plan for your needs. After purchasing, you'll be redirected to a page to download the plugin files. Step 2: Upload the Plugin to Your WordPress SiteLog in to your WordPress dashboard. Typically, this can be accessed by typing your website’s URL into your browser, followed by "/wp-admin". For example: "www.yourwebsite.com/wp-admin".Navigate to "Plugins > Add New" in the left-hand menu.Click on "Upload Plugin" at the top of the page.Click on "Choose File" and find the Crocoblock ZIP file on your computer. Click "Install Now" once you have selected the file. Step 3: Activate the PluginAfter the installation is complete, you'll see an "Activate Plugin" button. Click it to activate the plugin. Step 4: Install JetWooBuilderWith Crocoblock activated:Navigate to Crocoblock in the WordPress dashboard menu.Click on "JetPlugins" in the dropdown.Find JetWooBuilder in the list of available plugins.Click on "Install" next to JetWooBuilder.
From your WordPress dashboard, go to "Crocoblock > Woo Page Builder > Add New Single Product". Give your template a name and click "Create Template". This opens up the Elementor editor. On the left, you'll see various widgets specific to JetWooBuilder. These include product images, product rating, product content, and more. Drag and drop the widgets you want onto the page and customize them as per your liking. Once you're happy with your design, click "Publish". Now, let's apply this template to a product:Go to "Crocoblock > Woo Page Builder" and find your newly created template. Click on "Settings" under the template name. In the "Single Product Settings" section, you can choose to apply the template to all products or specific categories, tags, or products. Make your selection and click "Save".
Go to "Crocoblock > Woo Page Builder > Add New Archive Product". Give your template a name and click "Create Template". In the Elementor editor, you can use widgets like 'Products Grid' and 'Products Loop' to display a list of products. Customize the layout and design of your product grid or loop. For example, you can set the number of columns and rows, choose which product data to display, and adjust spacing, colors, typography, and more. Click "Publish" when you're satisfied with your design. Applying this template to a product category is similar to the process for a single product: Go to "Crocoblock > Woo Page Builder" and find your newly created template. Click on "Settings" under the template name. In the "Archive Product Settings" section, choose whether the template applies to all product categories or only specific ones. Click "Save" once you've made your selection.
JetWooBuilder comes with many widgets to create detailed product and category pages. Here are a few key ones: Product Images: Displays the product’s images. You can customize the size and layout of the images. Product Title: Displays the product’s title. You can change the typography, color, and alignment. Product Rating: Displays the product’s rating. You can adjust the size and color of the stars. Product Price: Displays the product’s price. You can customize the typography and color. Add to Cart Button: Adds an "Add to Cart" button to the page. You can customize the design of the button. Product Meta: Displays product metadata like category, tags, and SKU. You can choose which metadata to display and adjust its appearance. Products Grid: Displays a grid of products, which can be from a specific category, tag, or a selection of products. Products Loop: Similar to the Products Grid but gives more control over the layout of the products. To use a widget, simply drag and drop it from the Elementor panel to your page. Then, customize it in the left-hand panel.For beginners, sticking with the default settings for these widgets is a good starting point. Once you become more familiar with JetWooBuilder, you can start experimenting with different settings to create a unique look for your store.
Taxonomies Tiles allow you to showcase your product categories, tags, or custom taxonomies in a stylish manner, often leading to better user navigation and increased engagement. Here's how to use it: Open the Elementor editor for the page where you want to add the Taxonomies Tiles. Look for the 'Taxonomies Tiles' widget in the Elementor panel and drag it to your page. In the left-hand panel, select the taxonomy you want to display (Categories, Tags, or a custom taxonomy). Customize the appearance of the tiles. You can adjust the size, layout, colors, typography, and add a background image if you wish. Hit 'Update' to save your changes.
The Product Carousel widget allows you to display a carousel of selected products. This can be a great way to showcase featured, new, or best-selling products. Here's how to set it up: Open the Elementor editor for the page where you want to add the Product Carousel. Look for the 'Products Carousel' widget in the Elementor panel and drag it to your page. In the left-hand panel, choose which products to display in the carousel. You can select all products, or filter by category, tag, sale status, or specific products. Customize the appearance of the carousel. You can adjust the layout, number of slides to show and scroll, spacing, navigation, and more. Hit 'Update' to save your changes.
The Products Grid List is another way to display a set of products. Unlike the normal Products Grid, the Grid List displays products in a more compact list format, which may be preferred depending on your site design and product types. Here's how to use it: Open the Elementor editor for the page where you want to add the Products Grid List. Look for the 'Products Grid List' widget in the Elementor panel and drag it to your page. In the left-hand panel, choose which products to display in the list. You can select all products, or filter by category, tag, sale status, or specific products. Customize the appearance of the list. You can adjust the layout, number of products to show, spacing, and more. You can also decide which product data to display (image, title, price, rating, etc.). Click 'Update' to save your changes.
The Product Thumbnails widget displays all the additional images of a product in a neat layout. This is useful for products that have multiple images, giving your customers a better view of your products. Here's how to use it: Open the Elementor editor for a single product template or a single product page. Look for the 'Product Thumbnails' widget in the Elementor panel and drag it to your page. Position it appropriately, usually near the main product image. In the left-hand panel, you can customize the appearance of the thumbnails. You can adjust the size, spacing, and layout. Click 'Update' to save your changes.
The Categories Grid widget allows you to display your product categories in a grid format. This is useful for online stores with a wide range of products across multiple categories. Here's how you can use it: Open the Elementor editor for the page where you want to add the Categories Grid. Look for the 'Categories Grid' widget in the Elementor panel and drag it to your page. In the left-hand panel, choose which categories to display. You can select all categories, or specific ones. Customize the appearance of the grid. You can adjust the layout, number of columns, category image, and more. You can also decide which category data to display (title, description, count, etc.). Click 'Update' to save your changes.
The Products List widget displays your products in a list format. This is useful for showcasing a series of products without taking up much space on your page. Here's how to use it: Open the Elementor editor for the page where you want to add the Products List. Look for the 'Products List' widget in the Elementor panel and drag it to your page. In the left-hand panel, choose which products to display in the list. You can select all products, or filter by category, tag, sale status, or specific products. Customize the appearance of the list. You can adjust the layout, product image, and more. You can also decide which product data to display (title, price, rating, etc.). Click 'Update' to save your changes.
With JetWooBuilder, the power to create a stunning WooCommerce store is at your fingertips, even as a beginner. This guide covered the basics to get you started, but the potential for customization with JetWooBuilder is virtually limitless.So, take your time to explore the features, experiment with different designs, and most importantly, have fun with the process. Happy building!
The latest tech news, the WordPress world, tutorials, and helpful tips. Sent once a day. You can opt out at any time - we respect your privacy.
Newsletters to keep you close
Subscribe to our weekly mailing list to stay updated on the latest in economics and the digital world, and get free links to download two comprehensive educational packs with video lessons on email marketing and SEO.
