Woo Product Grid Widget

The Woo Product Grid widget lets you showcase your WooCommerce products in a customizable grid layout. From basic shop pages to advanced product showcases, this widget gives you full control over what details to display, how to style them, and how products should be queried.

It’s ideal for online stores, landing pages, or custom product sections where you want to go beyond the default WooCommerce look.

Key Features

• Display products in a fully customizable grid layout
• Control columns, products per page, and gaps
• Toggle visibility of key product details (image, category, title, price, etc.)
• Flexible query options (all products or manual selection, order by popularity, price, rating, etc.)
• Full styling controls for text, buttons, and spacing
• Responsive layout with alignment controls

How to Add the Woo Product Grid to Your Page

1. In your WordPress Dashboard, go to Pages and edit an existing page (or create a new one) with Elementor.
2. In the Elementor panel, search for Woo Product Grid.
3. Drag and drop the widget onto your page.
4. Start customizing using the Content, Style, and Advanced tabs.

Content Tab

The Content tab defines what products appear and what details are shown. It includes Grid Settings, Content Toggles, and Query.

Grid Settings

• Columns – Set the number of product columns (e.g., 2, 3, 4). Default: 2
• Products Per Page – Control how many products appear per page. Default: 6

Tip: Keep grids balanced (e.g., 3 or 4 columns) for professional layouts.

Content

Easily choose what product details to display:

• Image
• Category
• Title
• Rating
• Price
• Short Description
• Add to Cart

Best practice: Use only the details your customers need to make a quick decision. Too much info can clutter the grid.

Query

Control how products are fetched and displayed:

• Source
  • All Products – Show all WooCommerce products
• Order By – Sort products by: Date, Price, Title, Popularity, Rating, or Random
• Order – Display products in Ascending or Descending order

Example: To feature your bestsellers, choose Order By: Popularity.

Style Tab

The Style tab gives full design control over the product grid.

Layout

• Column Gap – Space between product columns (default: 20px)
• Row Gap – Space between product rows (default: 30px)

Content Area

• Alignment – Left, Center, or Right align product details
• Background Type – Classic color or image background

Category

• Text Color – Choose category text color
• Typography – Customize font size, weight, and style
• Spacing – Adjust spacing (default: 10px)

Title

• Text Color – Set product title color
• Typography – Full font controls

Rating

• Color – Control star rating color

Price

• Text Color – Set price color

Add to Cart Button

• Text Color – Customize button text color
• Typography – Edit font style
• Padding – Set button padding (default: 15px on all sides)
• Background, Border, Shadow (available in advanced button styling)