The Dynamic Product Category Design plugin provides a powerful Elementor Widget that enables users to showcase WooCommerce product categories in grid layouts and sliders. With full customization options, you can create visually appealing and interactive category displays. Below is a comprehensive guide to using the Elementor widget effectively.
1. Accessing the Widget
To use the Dynamic Product Category Design widget in Elementor:
1. Open the Elementor editor on your WordPress website.
2. Search for “Product Categories Design” in the Elementor widget panel.
3. Drag and drop the widget into your desired section.
2. Layout Settings
In the Content Tab, navigate to the Layout Section to configure your category display.
Grid Layout Configuration
• Layout Type: Select Grid to display product categories in a structured grid format.
• Layout Style: Choose from multiple pre-designed grid layouts for different visual styles.
• Columns: Set the number of columns to control the category display width.
Slider Layout Configuration
• Layout Type: Select Slider to showcase product categories in a dynamic sliding format.
• Layout Style: Pick from multiple slider styles for better engagement.
• Columns: Define the number of categories shown per slide.
• Autoplay Speed: Set the transition speed (default: 4000ms).
• Enable Autoplay: Toggle ON to make the slider move automatically.
• Show Arrows: Choose to display navigation arrows for manual scrolling.
• Show Dot Navigation: Enable dots to indicate multiple slides.
3. Query Settings
The Query Settings allow you to control which categories are displayed based on specific criteria.
• Product Category Selection: Choose specific categories to include in the display. (e.g., “Photos” and “Car” in the screenshot)
• Hide Empty Categories: Toggle ON to hide categories without products.
• Order By: Sort categories by different criteria such as Date, Name, ID, or Custom Order.
• Order: Choose between Ascending (ASC) or Descending (DESC) sorting order.
4. Style Customization
Under the Style Tab, you can personalize:
• Category Title & Typography – Adjust font, size, and colors.
• Background & Spacing – Modify layout background and add custom spacing.
• Hover Effects – Apply effects when users hover over a category.
5. Publishing Your Category Design
Once you’ve customized your layout, click Publish in Elementor to save changes. Your WooCommerce category slider or grid display will now be live on your website!
The Elementor Widget in the Dynamic Product Category Design Plugin makes it easy to create custom WooCommerce category sliders and grids without coding. With flexible design options, autoplay sliders, advanced query filters, and sorting controls, this tool enhances your store’s user experience and boosts product discovery.