PowerPack WooCommerce Products widget lets you display WooCommerce products anywhere on your website using Elementor. You can showcase products in a clean Grid or interactive Carousel layout and fully control what product information is displayed.
This widget also includes multiple Query Options, Product Badges, Quick View, Pagination, and Extensive Styling Controls, making it easy to create attractive product listings without writing any code.
Getting Started: Using the WooCommerce Products Widget#
Required Tools#
Before using this widget, make sure you have installed and activated:
Once you've activated all the tools, follow below-mentioned steps to add the WooCommerce Products widget to your page:
- Open the page where you want to add the widget in Elementor.
- Search for "Woo Products" in the Elementor widgets panel.
- Drag and drop the Woo Products widget onto your page.
Once you add the widget, you'll see two main tabs in left panel:
- Content: Controls what products and product details are displayed.
- Style: Lets you customize appearance of every part of product listing.
Let's explore every option available in both tabs.
Content Tab#
Content tab includes multiple sections that help you choose products, customize their layout, and control information displayed.
The sections are:
- Layout
- Query
- Content
- Product Badges
- Image
- Quick View
- Pagination
Some sections appear only when certain options are selected. For example, selecting Carousel as layout displays an additional Carousel Settings section.
Layout#
Layout section lets you choose how products appear on page.
- Skin: Choose from six ready-made product designs. Each skin offers a different product card design while keeping same functionality.
- Layout: Choose how products should be displayed: Grid or Carousel
Grid layout displays products in multiple rows and columns. Additional options include:
- Columns: Select number of columns for product grid.
- Products Per Page: Choose how many products should appear on each page.
Carousel layout displays products inside a responsive slider. Options include:
- Total Products: Choose total number of products to load.
- Products to Show: Select how many products remain visible at one time.
- Products to Scroll: Specify number of products that move with each slide.
Carousel Settings#
This section becomes available when Carousel layout is selected.
- Transition Speed: Controls how quickly one slide changes to another.
- Autoplay: Automatically rotates carousel without user interaction.
- Autoplay Speed: Choose delay between automatic slide transitions.
- Grab Cursor: Displays a grab cursor, making carousel feel more interactive.
- Pause on Hover: Stops autoplay when visitor hovers over carousel.
- Infinite Loop: Continuously cycles products without reaching an end.
- Arrows: Shows Previous and Next navigation arrows.
- Dots: Displays navigation dots below carousel.
Query#
Query section controls which WooCommerce products are displayed.
- Source: Choose where products should come from. Available sources include:
- All Products
- Custom Query
- Manual Selection
- Main Query
- Related Products
- Upsells
- Cross-Sells
Available options change depending on selected source. For example, when All Products is selected, you'll see:
- Exclude: Exclude specific products from display.
- Exclude Current Product: Hide currently viewed product from listing.
- Advanced: Filter products using options like:
- Filter By
- Order By
- Order
- Query ID: Assign a custom Query ID for advanced integrations.
- If No Product Found: Display a custom message when query returns no products.
Content#
Content section controls which product information appears inside each product card.
- Category: Show or hide product category.
- Title: Display product title.
- Title HTML Tag: Select heading tag for product title to improve page structure and SEO.
- Link Title to Product: Make product title clickable.
- Open Link in New Tab: Open product page in a new browser tab.
- Ratings: Display WooCommerce product ratings.
- Price: Show product price.
- Short Description: Display short product description below title.
- Add to Cart: Show Add to Cart button.
- Change Button Text: Replace default button label with custom text.
- Out of Stock Text: Customize message displayed for unavailable products.
Product Badges#
Highlight products using different badge types. For example:
- Sale: Display Sale badge. You can choose badge position and replace default text with your own.
- Featured: Display Featured badge and choose its position.
- Top Rated: Highlight top-rated products and choose badge position.
- Best Selling: Display Best Selling badge and choose where it appears.
Image#
Image section controls product image settings.
- Link to Product: Make product image clickable.
- Open Link in New Tab: Open product page in a new browser tab.
- Image Resolution: Choose image size to display.
- Image Hover Effect: Apply hover effects for a more engaging product gallery.
Quick View#
Quick View lets visitors preview product details without leaving current page.
- Quick View: Enable or disable Quick View feature.
- Quick View Text: Customize text displayed on Quick View button.
- Pagination: Choose how visitors navigate through multiple products. The options are:
- None
- Numbers
- Numbers + Previous/Next Arrows
Style Tab#
Style tab gives complete control over widget appearance. This section includes:
- Layout
- Box
- Content
- Product Badges
- Quick View
- Lightbox
- Pagination
Layout#
Adjust spacing between products.
- Columns Gap: Control horizontal spacing between columns.
- Rows Gap: Control vertical spacing between product rows.
Box#
Customize appearance of each product card.
- Border Type: Choose border style.
- Border Radius: Round product card corners.
- Box Padding: Adjust inner spacing.
- Background Color: Choose background color for product box.
- Box Shadow: Add shadow to make product cards stand out.
Content#
Customize typography, colors, and spacing for product information.
- Alignment: Align content inside product card.
- Content Background: Choose background color for content area.
- Content Padding: Adjust spacing inside content section.
- Category: Customize category color, typography, and spacing.
- Title: Customize title color, hover color, typography, and spacing.
- Rating: Change rating color and spacing.
- Price: Customize price color, typography, and spacing.
- Product Actions: Style Add to Cart and View Cart buttons by changing text color, View Cart text color, and background color.
- Out of Stock Text: Customize text color, background color, typography, and opacity for out-of-stock messages.
Product Badges#
Style all product badges from one place. You can style, Margin, Style, Color, Background Color, Typography and more.
Quick View#
Customize appearance of Quick View popup.
- Color: Change Quick View button color.
- Background Color: Choose button background color.
- Advanced Styling: Customize typography and colors for: Product Title, Rating, Price, and Short Description.
Lightbox#
Customize popup window used by Quick View.
- Overlay Color: Change overlay color behind popup.
- Background Color: Choose popup background color.
- Padding: Adjust spacing inside popup.
- Border Type: Select border style.
- Box Shadow: Add shadow around popup.
- Close Icon Size: Adjust size of close icon.
- Close Icon Thickness: Control icon thickness.
- Close Icon Color: Choose close icon color.
Pagination#
Customize appearance of pagination.
- Alignment: Align pagination.
- Typography: Customize font settings.
- Text Color: Choose text color.
- Background Color: Select background color.
- Border Color: Customize border color.
- Border Width: Adjust border thickness.
Wrapping Up!#
WooCommerce Products widget makes it easy to create fully customized product listings using Elementor. With flexible layouts, powerful query options, Quick View support, product badges, and extensive styling controls, you can build attractive shop pages that match your website design and improve shopping experience for your visitors.
You may also want to explore other WooCommerce widgets available in PowerPack Addons to create complete and engaging online store pages. Check out the below links: