The WooCommerce Products Block displays your WooCommerce products in a customizable grid layout with extensive styling options. This block is found in the DigiBlocks WooCommerce category and provides complete control over product presentation, filtering, and pagination. It’s perfect for creating custom shop pages and product showcases with our DigiFusion theme and its Pro version‘s site builder feature.
Adding the WooCommerce Products Block
Navigate to the post or page where you want to display your products. Click the block inserter (+) and search for “Products” in the DigiBlocks WooCommerce category. The block will load your WooCommerce products automatically using the default settings.
Layout Configuration
Display Settings
Control the basic layout structure in the Layout panel:
Products to Show
- Set the number of products to display (1-20)
- Affects the initial load and pagination if enabled
Columns
- Desktop: 1-6 columns
- Tablet: 1-4 columns
- Mobile: 1-2 columns
- Responsive controls for optimal display across devices
Item Spacing
- Adjust the gap between product items (0-80px)
- Responsive controls for precise spacing on all devices
Card Style
- Toggle to enable card-style product display
- Adds background colors, padding, and border options
- Creates a more structured, professional appearance
Content Display Options
Product Elements
Control which product information to display:
Display Featured Image
- Shows product images with hover effects
- Image size options: Thumbnail, Medium, Large, Full
- Automatic zoom effect on hover
Display Sale Badge
- Shows “Sale!” badge for discounted products
- Positioned in top-left corner of product image
- Customizable colors and styling
Display Title
- Shows product names as clickable links
- Responsive typography controls
- Hover color effects
Display Price
- Shows current product pricing
- Displays both regular and sale prices when applicable
- Strikethrough styling for original prices on sale items
Display Rating
- Shows star ratings with review counts
- Visual star display with filled, half, and empty states
- Includes review count in parentheses
Display Categories
- Shows product category tags
- Clickable category links
- Customizable background and text colors
Display Short Description
- Shows product excerpts or short descriptions
- Configurable word count (5-100 words)
- Automatic truncation with ellipsis
Display Add to Cart Button
- Shows “Add to cart” buttons
- Full styling controls including typography and spacing
- Hover effects and responsive design
Query and Filtering
Sorting Options
Order By
- Date – Most recent first
- Title – Alphabetical ordering
- Price – Low to high or high to low
- Popularity – Based on sales volume
- Rating – Highest rated first
- Random – Random product order
Order
- Ascending – A to Z, low to high, oldest to newest
- Descending – Z to A, high to low, newest to oldest
Product Filtering
Category Filter
- Select specific product categories to display
- “All Categories” shows products from all categories
- Dropdown populated with your WooCommerce categories
Show Only On Sale Products
- Filter to display only discounted products
- Useful for creating sale or clearance pages
Show Only Featured Products
- Display only products marked as featured
- Perfect for highlighting promoted or bestselling items
Pagination Settings
Enable Pagination
- Add page navigation for large product sets
- Automatically calculates pages based on products to show
Pagination Alignment
- Left – Align pagination to the left
- Center – Center pagination controls
- Right – Align pagination to the right
Color Customization
Normal State Colors
Configure default colors for all product elements:
Title Color
- Color for product names and titles
Price Color
- Color for current product prices
Regular Price Color
- Color for original prices (shown with strikethrough on sale items)
Rating Color
- Color for filled star ratings
Categories Background Color
- Background color for category tags
Categories Color
- Text color for category tags
Sale Badge Background
- Background color for sale badges
Sale Badge Text
- Text color for sale badges
Description Color
- Color for product descriptions and excerpts
Button Background
- Background color for add to cart buttons
Button Text
- Text color for add to cart buttons
Hover Effects
Title Hover Color
- Color change when hovering over product titles
Categories Hover Background Color
- Background color change for category tags on hover
Categories Hover Color
- Text color change for category tags on hover
Button Background Hover
- Background color change for buttons on hover
Button Text Hover
- Text color change for buttons on hover
Pagination Colors
Pagination Background
- Background color for pagination buttons
Pagination Color
- Text color for pagination buttons
Pagination Active Background
- Background color for current page indicator
Pagination Active Color
- Text color for current page indicator
Card Colors
When card style is enabled:
Card Background
- Background color for product cards
Card Border
- Border color for product cards
Typography Controls
Title Typography
Font Family
- Choose from Google Fonts library
Font Size
- Responsive controls with pixel, em, or rem units
Font Weight
- Select from available font weights
Font Style
- Normal or italic styling
Text Transform
- None, uppercase, lowercase, or capitalize
Text Decoration
- Add underline, overline, or line-through effects
Line Height
- Control line spacing with em or pixel units
Letter Spacing
- Adjust character spacing with responsive controls
Price Typography
Independent typography controls for product pricing with the same options as title typography.
Category Typography
Separate typography settings for category tags with full responsive controls.
Short Description Typography
Typography controls specific to product descriptions and excerpts.
Button Typography
Complete typography customization for add to cart buttons.
Spacing Controls
Layout Spacing
Padding
- Internal spacing around the entire block
- Responsive controls for all devices
Margin
- External spacing around the block
- Four-directional control (top, right, bottom, left)
Image Margin
- Spacing between product images and content
- Responsive pixel controls
Content Margin
- Spacing between different content elements within each product
- Controls gap between title, price, description, etc.
Button Padding
- Internal spacing within add to cart buttons
- Four-directional responsive controls
Border and Radius Settings
Image Styling
Image Border Radius
- Round the corners of product images
- Supports pixel and percentage units
- Four-corner independent control
Button Styling
Button Border Radius
- Round the corners of add to cart buttons
- Responsive controls with multiple units
Card Styling
When card style is enabled:
Card Border Style
- None, solid, dashed, dotted, or double borders
Card Border Width
- Control thickness of card borders
- Four-directional responsive controls
Card Border Radius
- Round the corners of product cards
- Supports pixel and percentage units
Card Shadow
- Add drop shadows to product cards
- Separate normal and hover shadow effects
- Controls for horizontal offset, vertical offset, blur, spread, and color
Animation Effects
Add entrance animations to make products appear with engaging effects when users scroll to them:
Animation Effect
- Choose from fade, slide, zoom, bounce, and other animations
- None option to disable animations
Preview Animation
- Test animation effects directly in the editor
- Button to trigger animation preview
Visibility Controls
Control when the block appears across different devices:
Hide on Desktop
- Hide the products block on desktop screens
Hide on Tablet
- Hide the products block on tablet devices
Hide on Mobile
- Hide the products block on mobile devices
Hidden elements appear with reduced opacity in the editor but are completely hidden on the frontend.
Advanced Settings
HTML Anchor
- Create a unique web address for direct linking to this block
- Useful for creating jump links and navigation
Additional CSS Classes
- Add custom CSS classes for advanced styling
- Separate multiple classes with spaces
Responsive Design
All styling options include responsive controls for desktop, tablet, and mobile devices. The block automatically adjusts column layouts, spacing, and typography for optimal display across all screen sizes. Product cards maintain their proportions while adapting to smaller screens through the responsive column system.