The Archive Products block allows you to display a grid of WooCommerce products on your Product Archive Templates. This block automatically shows product listings on shop pages, category archives, tag archives, and other product collection pages with customizable layouts and filtering options.
This block is essential for creating custom Product Archive Templates where you want full control over how your products are displayed. You can customize the number of columns, enable pagination, add sorting options, and filter which products appear based on categories, tags, attributes, or other criteria, creating a shopping experience that perfectly matches your brand.
Adding the Archive Products Block to Your Pages
Follow these steps to add an Archive Products block to your SeedProd Product Archive Template:
Step 1: Add the Block
Under Design > Blocks > WooCommerce Template Tags, drag and drop the Archive Products block into the desired section of your Product Archive Template.
The Archive Products block is located under WooCommerce Template Tags and can be added to your Product Archive Template.
Step 2: Configure Content Settings
Once added, click on the Archive Products block to open its settings. In the Content tab, you can configure how products are displayed and filtered.
Layout Settings:
- Columns: Set the number of columns in your product grid. More columns fit more products per row, while fewer columns give each product more prominence. Common layouts include 3 or 4 columns
- Pagination: Toggle to enable or disable pagination controls. When enabled, products are split across multiple pages with navigation buttons
- Show Items Count: Toggle to display the total number of products found (e.g., “Showing 1-12 of 48 results”)
- Show Order By: Toggle to display a dropdown menu that lets visitors sort products by criteria like popularity, rating, price, or newness
- Limit: Set the maximum number of products to display per page. This works with pagination to determine how many products appear before requiring visitors to click “Next”
Query:
- Type: Set to “Archive Products” to display products based on the current archive being viewed (category, tag, etc.)
- Query By: Choose how to filter which products appear. Options include Attribute (filter by product attributes), Tags (show products with specific tags), Category (display products from certain categories), SKU (filter by product SKU), Group (filter by product groupings), or Visibility (control which products show based on catalog visibility settings)
- Select By Tags: When querying by tags, choose which product tags to include or exclude
- Select By Category: When querying by category, select which product categories to display
- Select By SKU: When querying by SKU, enter specific product SKUs to show
- Select By Group: When querying by group, choose product groupings to filter
- Select By Visibility: Control whether to show products marked as visible in catalog, visible in search, hidden, or featured
The Content tab allows you to configure columns, pagination, product limits, and filtering options for your product archive.
Step 3: Customize the Design
In the Advanced tab, you can customize the visual appearance of your Archive Products block:
Styles:
- Alignment: Set the horizontal alignment for product items within the grid (left, center, or right)
- Description Typography: Control the font properties for product descriptions, including font family, size, weight, and style
- Price Typography: Customize the font properties for product prices
- Price Color: Set the color for product prices to make them stand out
- Sale Badge Color: Choose the color for sale badges that appear on discounted products
Button:
- Button Style: Choose the visual style for “Add to Cart” buttons. Options include Flat (modern flat design), 2D (subtle depth), Vintage (classic look), Ghost (transparent with border), or Link (plain text link)
- Button Color: Set the background color for product buttons
- Button Typography: Customize the font properties for button text
- Button Size: Choose the button size from Small, Medium, Large, X Large, or 2X Large
- Border Radius: Control the roundness of button corners. Higher values create more rounded buttons
Image:
- Shadow: Add shadow effects to product images for depth. Choose from None, Hairline, Small, Medium, Large, X Large, 2X Large, or Bottom Drop Shadow
- Image Border: Enable borders around product images
- Border Radius: Control the roundness of image corners
- Border Style: Choose the border appearance: Solid (continuous line), Dotted (small dots), or Dashed (short dashes)
- Border Color: Select the color for image borders
- Border Width: Set individual border thickness for each side (Top, Right, Bottom, Left)
- Image Whitespace Padding: Add internal padding around product images to create breathing room
Spacing:
- Margin: Control the outer spacing around your Archive Products block (Top, Right, Bottom, Left). This determines how much space appears between the product grid and surrounding elements
- Padding: Adjust the inner spacing within your Archive Products block (Top, Right, Bottom, Left). This creates breathing room between the product grid and the block edges
Attributes:
- CSS ID: Displays the auto-generated unique identifier for your Archive Products block. This ID is created automatically by SeedProd for custom styling or JavaScript targeting
- Custom Class: Add custom CSS classes to apply specific styles from your theme or custom CSS
- Custom Attributes: Add any HTML attributes to the block wrapper element. Enter each attribute on a new line using the format: attribute-name|value (e.g., data-products|archive)
Device Visibility:
- Hide on Desktop: Hide the Archive Products block on desktop screens
- Hide on Tablet: Hide the Archive Products block on tablet devices
- Hide on Mobile: Hide the Archive Products block on mobile devices
Animation Effects:
- Entrance Animation: Choose from various animation effects that play when the product grid scrolls into view. Options include Bounce, Fade In, Zoom In, Rotate In, and many more. This draws attention to your product listings
The Advanced tab provides extensive styling options for product layout, typography, buttons, images, spacing, and animations.
Step 4: Save Your Changes
Once you have finished configuring the Archive Products block and customizing its appearance, make sure to save your work.
You’ve successfully added an Archive Products block to your Product Archive Template! This powerful block automatically displays your WooCommerce products in a customizable grid layout with filtering, sorting, and pagination options. Experiment with different column layouts, button styles, and query settings to create a product archive that perfectly matches your brand and helps customers find exactly what they’re looking for.