Shop

The Shop Widget allows you to add, style, and manage product displays anywhere on your Elementor-powered page. It’s perfect for showcasing WooCommerce products with customizable layouts, styling options, and responsive settings, ideal for creating online stores, product showcases, or promotional sections.

Whether you’re designing a shop page, product catalog, or featured products section, the Shop Widget makes it easy to present products with precision and style.

Key Features:

• Display WooCommerce products with filtering options
• Choose from multiple layout styles
• Control visibility and layout for different devices
• Enable slider functionality for dynamic display
• Customize product styling, spacing, border, and shadows
• Fully responsive and optimized

🚀 How to Enable the Shop Widget

To start using the Shop Widget, follow these steps:

1. Navigate to your WordPress dashboard.
2. Go to Topper Pack → Widgets.
3. Locate the Shop widget from the list.
4. Toggle the switch to “On” to enable it.
5. The widget is now available in the Elementor editor.

🧩 How to Use the Shop Widget in Elementor

Step 1: Add the Widget to Your Page

• Open your desired page using Elementor Editor.
• Search for “Shop” in the Elementor widget panel.
• Drag and drop the Shop TP widget onto your page canvas.
• 🔄 Tip: It includes the TP badge, which means it’s from the Topper Pack.

Step 2: Select Shop Style

• After inserting the widget, scroll to the Style → Styles panel.
• Choose a layout style from the predefined style library. This controls how your products are visually arranged and displayed.

Step 3: Configure Product Query

• Under the Content → Product Query section:
  • Enable Product by Cat to filter by category (toggle to Show if needed).
  • Set Order by (e.g., None) and Order (e.g., ASC) for sorting.
  • Set Display Items (e.g., 3) to control the number of products shown.
  • Use Price Range to filter products by price.
  • Set Stock Status (e.g., All) to filter by availability.
  • Toggle Featured Products Only to show only featured items.
  • Toggle On Sale Products Only to display only discounted items.
  • Set Minimum Rating and Product Type for additional filtering.
  • Use Exclude Products to omit specific products from the display.

Step 4: Customize Product Options

• Under the Content → Product Options section:
  • Choose Product Image Size (e.g., WooCommerce Thumbnail).
  • Set HTML Tag for titles (e.g., H2) and adjust Title Word Count (e.g., 10 words).
  • Choose Image Animation (e.g., Anim One) for hover effects.
  • Toggle Enable Title, Enable Description, Enable Cart Button, Enable Cart Icon, Enable Rating, Enable Sale Badge, and Show Sale Badge to control visibility of product elements.
  • Set Cart Button Style (e.g., Icon Only) and customize Add to Cart Text (e.g., “Add to cart”).
  • Toggle Show Related Products under the Related Products section to display associated items.

Step 5: Adjust Content Order and Direction

• Under the Content → Content Order section:
  • Toggle Enable Content Order to “Yes” to customize the order of productanalytics product elements.
  • Choose Content Layout (e.g., Flexbox) for flexible ordering and alignment.
  • Set Content Direction (e.g., Column for vertical or Row for horizontal layout).
  • Adjust Title Order, Description Order, Price Order, Rating Order, and Button Order to prioritize elements (lower numbers appear first).

Step 6: Disable Slider

This setting allows you to enable or disable the column control feature using the toggle switch. When enabled, the column control provides flexible options to manage the layout of the slider by adjusting the number of columns displayed. This gives you greater control over the visual presentation and responsiveness of your slider content.

Step 7: Enable Slider

• Under the Content → Slider Options section:
  • Toggle Slider to “Yes” to display products in a slider.
  • Enable Auto Loop for continuous sliding.
  • Set Items (Large), Items (Tablet), Items (Mobile), and Items (Small Mobile) to control the number of visible items per device (e.g., 1, 1, 1, 1).
  • Adjust Spacing (e.g., 24px), Autoplay (e.g., 2000ms), and Transition Speed (e.g., 600ms).
  • Toggle Dots for slider navigation dots.

Step 7: Style the Product Display

• Go to the Style → Styles section:
  • Adjust product box styling, including spacing, borders, and shadows.
  • Customize margins, padding, and alignment for a polished look.

✅ Final Preview and Save

Once your shop widget settings and style options are applied:

• Click Preview Changes to see how it looks.
• Hit Publish or Update to save your page.