Creating a WooCommerce Product Categories Grid with JupiterX

Would you like to showcase your WooCommerce Product Categories in a visually appealing grid on your website? JupiterX makes it easy to add and customize a categories grid to fit your site's design. Here's how you can get started:

First, ensure that you have the WooCommerce plugin installed and active on your WordPress site.

Adding the Categories Widget to Your Page:

Open the page where you want to display the product categories grid.
Click on "Edit with Elementor" to launch the Elementor Page Builder.
From the Elementor panel, drag and drop the "Categories" widget onto your page.

Configuring the Categories Widget:

In the Content Tab:

Skin: You can select between two skins – "Outer Content" or "Inner Content". The "Outer Content" skin displays category information below the image, while 'Inner Content' places it inside the image.
Source: To show product categories, select "Shop" from the dropdown menu.
Specific Categories: Here, you can specify only certain categories you want to showcase by typing in their names.

In the Settings Section:

Layout: You have the choice between a "Grid" or “Masonry” layout.
Columns: Set the number of columns, ranging from 1 to 6, for your grid.
Image Resolution: Pick the resolution that best fits your design for the category images.
Hover Effect: Select an engaging effect for when visitors hover their mouse over a category.
Sub Categories: If you want to include sub-categories, toggle this to "Show".
Featured Image: Toggle "Show" to include a visual representation of each category.
Title: To display the name of each category, ensure this is toggled to "Show".
Category Count: Decide if you want to display how many items are in each category.
Description: For a brief introduction to each category, toggle "Show".
Button: If you desire a call-to-action button for each category, toggle "Show".

In the Filter Section:

Exclude: List any categories you wish to leave out of the grid display.

In the Style Tab:

Container: Here, you can modify the overall look of the category widget's container.
Featured Image: Adjust the style of the category images including size, shape, and border.
Title: Utilize various typography options and text colors to style the category titles.
Category Count: If displayed, you can set the style for the category count with different colors and typography.
Description: The category description text can be customized with typography settings and color.
Button: Define the look of your buttons, tweaking text color, background, border, and hover effects to match your site's theme.

Once you've finished customizing your categories grid, click "Publish" or "Update" to save the changes.

We hope this guide helps you create an attractive and functional WooCommerce Product Categories grid for your website with JupiterX. If you have any questions or require further assistance, don't hesitate to reach out to our support team. Happy designing!