Shop Page Layouts

Complete guide to customizing your shop page display, product grids, and catalog layouts in BuddyX Pro.

---

Overview

BuddyX Pro gives you complete control over how products display on your shop page, category archives, and search results. Choose from multiple layout options, adjust grid spacing, and optimize for different product types.

What You Can Do

With BuddyX Pro’s shop layout options, you can:

• Choose Product Card Styles - Select from 4 pre-designed product layouts
• Control Grid Layout - Adjust products per row and spacing
• Manage Sidebars - Show filters on left, right, both sides, or hide them
• Set Products Per Page - Control pagination and scroll length
• Enable Mobile Filters - Add off-canvas filter sidebar for mobile users
• Customize Product Info - Show/hide ratings, prices, descriptions

---

Product Card Styles

BuddyX Pro includes four distinct product card designs. Each style is optimized for different store types.

Shop Page settings in the Customizer showing Product Style options, Products Per Page, and Filter Button settings

Default Style

Appearance:

• Standard WooCommerce layout
• Product image with hover zoom
• Title and price clearly visible
• Add to Cart button always shown
• Star ratings (if enabled)

Best For:

• General merchandise stores
• First-time WooCommerce users
• Traditional e-commerce look
• Stores with diverse product types

Features:

• Maximum compatibility with plugins
• Clean, familiar design
• Fast loading
• Mobile-optimized

How to Enable:

1. Go to Appearance → Customize
2. Navigate to WooCommerce → Shop
3. Find “Product Style”
4. Select “Default”
5. Click Publish

---

Style 1: Modern with Hover Effects

Style 1 with “ADD TO CART” text links and clean product presentation

Appearance:

• Elegant product cards
• Image hover effects with smooth transitions
• Quick action buttons appear on hover
• Subtle shadows and animations
• Modern spacing and typography

Best For:

• Fashion and apparel stores
• Beauty and cosmetics
• Home décor
• Lifestyle products
• Brands with strong visual identity

Features:

• Eye-catching hover animations
• Modern card design with shadows
• Quick view button integration (with plugin)
• Add to wishlist support (with plugin)
• Social sharing icons (with plugin)

Hover Actions: When customers hover over products:

• Add to Cart button animates in
• Quick view icon appears
• Wishlist icon shows (if plugin active)
• Image slightly zooms

How to Enable:

1. Go to Appearance → Customize → WooCommerce → Shop
2. Select “Style 1” for Product Style
3. Click Publish

Pro Tip: Combine with Circle sale badges for maximum visual impact.

---

Style 2: Minimal & Clean

Style 2 with cart icon buttons and product info outside cards

Appearance:

• Minimal design with focus on images
• Reduced visual clutter
• Compact spacing
• Clean typography
• Large product images

Best For:

• Photography stores
• Art galleries
• Digital products
• Portfolio-style shops
• Premium brands
• Minimalist aesthetics

Features:

• Maximum image prominence
• Reduced border and shadow usage
• Clean, uncluttered layout
• Fast rendering
• Perfect for high-quality photos

Design Philosophy:

• “Less is more” approach
• Product images tell the story
• Minimal text overlay
• Plenty of white space

How to Enable:

1. Go to Appearance → Customize → WooCommerce → Shop
2. Select “Style 2” for Product Style
3. Click Publish

Recommendation: Combine with full-width layout (no sidebar) for maximum impact.

---

Style 3: Information-Dense

Style 3 with minimal layout showing product name and price only

Appearance:

• Detailed product cards
• Specifications visible upfront
• Category badges shown
• More text content
• Information hierarchy

Best For:

• Electronics and tech products
• Books and educational materials
• Tools and equipment
• B2B stores
• Products with complex specifications

Features:

• Short description visible
• Category labels displayed
• Stock status shown
• Multiple product attributes
• Compare-ready layout

What’s Displayed:

• Product image with zoom
• Full product title
• Price and sale price
• Star ratings
• Short description (excerpt)
• Category badges
• Stock status
• Add to Cart button

How to Enable:

1. Go to Appearance → Customize → WooCommerce → Shop
2. Select “Style 3” for Product Style
3. Click Publish

Pro Tip: Use left sidebar with attribute filters for best results with this style.

---

Grid Layout Options

Control how products arrange on your shop page.

Products Per Row

WooCommerce typically displays 4 products per row on desktop. You can customize this with code or page builders.

Standard Layouts:

Layout	Products/Row Desktop	Products/Row Tablet	Products/Row Mobile
Default	4	2-3	1-2
Wide	5-6	3	1-2
Spacious	3	2	1

Width Calculations:

For 4-column layout:

• Each product: ~25% width
• With spacing: ~23% width + 2% margin

For 3-column layout:

• Each product: ~33% width
• With spacing: ~31% width + 2% margin

How to Change (Requires Code):

Add to child theme functions.php:

// Change to 3 columns
add_filter('loop_shop_columns', function() {
    return 3;
});

Page Builder Options:

• Elementor: Use WooCommerce Products widget with columns setting
• WPBakery: Use WooCommerce products element
• Gutenberg: Use Products block with column controls

Products Per Page

Control how many products show before pagination.

Current Setting: Controlled via Customizer (see WooCommerce Settings)

Optimal Settings by Store Size:

Store Size	Products	Products Per Page	Why
Small (1-50)	All on one page	24-50	No pagination needed
Medium (50-200)	Multiple pages	16-24	Balanced loading
Large (200-1000)	Many pages	12-16	Performance focus
Huge (1000+)	Very many pages	12	Load time critical

SEO Considerations:

• More products per page = fewer pages for Google to crawl
• Fewer products per page = faster loading = better ranking
• Balance: 16-20 products per page

---

Sidebar Layouts

Choose where sidebars display on shop pages.

No Sidebar (Full Width)

Layout: Products span full content area

Benefits:

• Maximum space for products
• Modern, clean appearance
• Focus on products, not filters
• Mobile-friendly by default

Best For:

• Small catalogs (under 50 products)
• Curated collections
• Minimal stores
• Landing pages
• Flash sales

How to Set Up:

1. Go to Appearance → Customize → Sidebars
2. Find “WooCommerce Sidebar”
3. Select “None”
4. Click Publish

Left Sidebar

Layout: Sidebar on left, products on right

Benefits:

• Filters visible first (LTR languages)
• Traditional layout
• Category-first navigation
• Good for desktop users

Best For:

• Category-heavy stores
• Electronics and tech
• Stores with many attributes
• B2B catalogs

How to Set Up:

1. Go to Appearance → Customize → Sidebars
2. Find “WooCommerce Sidebar”
3. Select “Left”
4. Click Publish
5. Add widgets to WooCommerce Left Sidebar

Recommended Widgets:

• WooCommerce Product Categories
• WooCommerce Layered Nav (Attributes)
• WooCommerce Price Filter

Right Sidebar

Layout: Products on left, sidebar on right

Benefits:

• Standard e-commerce layout
• Products visible first
• Familiar to customers
• Most common configuration

Best For:

• Most store types
• General merchandise
• Fashion stores
• Default recommendation

How to Set Up:

1. Go to Appearance → Customize → Sidebars
2. Find “WooCommerce Sidebar”
3. Select “Right”
4. Click Publish
5. Add widgets to WooCommerce Right Sidebar

Recommended Widgets:

• WooCommerce Layered Nav (Price)
• WooCommerce Product Search
• WooCommerce Recent Products
• WooCommerce Top Rated Products

Both Sidebars

Layout: Sidebars on both sides, products in center

Benefits:

• Maximum filter options
• Advanced navigation
• Multiple widget areas
• Power-user focused

Best For:

• Large catalogs (500+ products)
• Stores with many categories
• Advanced filtering needs
• B2B marketplaces

How to Set Up:

1. Go to Appearance → Customize → Sidebars
2. Find “WooCommerce Sidebar”
3. Select “Both”
4. Click Publish
5. Add widgets to both sidebar areas

Layout Strategy:

• Left Sidebar: Categories, brands, main filters
• Right Sidebar: Price range, ratings, recent products

---

Mobile Filter Sidebar

BuddyX Pro includes a special off-canvas filter sidebar for mobile devices.

What It Does

Desktop Behavior:

• Filter button hidden on desktop
• Regular sidebars display normally

Mobile Behavior:

• “Filter” button appears above products
• Clicking opens slide-in sidebar
• Filters accessible without scrolling
• Smooth animation
• Close button included

Benefits:

• Mobile-optimized filtering
• Doesn’t clutter mobile layout
• Standard e-commerce pattern
• Improves conversion on mobile

Setting Up Mobile Filters

Step 1: Enable Filter Button

1. Go to Appearance → Customize
2. Navigate to WooCommerce → Shop
3. Enable “Display Filter Button”
4. Customize “Filter Button Text” if desired
5. Click Publish

Step 2: Add Filter Widgets

1. Go to Appearance → Widgets
2. Find Off Canvas Sidebar widget area
3. Add these widgets:
   • WooCommerce Product Categories
   • WooCommerce Layered Nav (Color, Size, etc.)
   • WooCommerce Price Filter
   • WooCommerce Product Search

Step 3: Test on Mobile

1. Visit shop page on mobile device
2. Look for “Filter” button above products
3. Tap to open filter sidebar
4. Verify all filters work correctly

---

Recommended Layouts by Store Type

Fashion & Apparel Store

Layout Configuration:

Product Style: Style 1 (hover effects)
Products Per Page: 12
Sidebar: Right
Products Per Row: 4
Filter Button: Enabled

Sidebar Widgets:
- Product Categories
- Layered Nav (Size)
- Layered Nav (Color)
- Price Filter

Why This Works:

• Visual products need modern presentation
• Size and color are primary filters
• 12 products balance browsing and performance
• Right sidebar is familiar pattern

---

Electronics Store

Layout Configuration:

Product Style: Style 3 (info-dense)
Products Per Page: 16
Sidebar: Left
Products Per Row: 4
Filter Button: Enabled

Sidebar Widgets:
- Product Categories
- Layered Nav (Brand)
- Layered Nav (Screen Size)
- Price Filter
- Top Rated Products

Why This Works:

• Specifications are important
• Brand filtering is critical
• More products per page for comparison
• Left sidebar emphasizes categories

---

Digital Products Store

Layout Configuration:

Product Style: Style 2 (minimal)
Products Per Page: 24
Sidebar: None (full width)
Products Per Row: 5-6
Filter Button: Disabled

No sidebars needed

Why This Works:

• Digital products need less visual space
• More products visible at once
• Minimal design for clean presentation
• No physical attributes to filter

---

Furniture & Home Décor

Layout Configuration:

Product Style: Default
Products Per Page: 9
Sidebar: Right
Products Per Row: 3
Filter Button: Enabled

Sidebar Widgets:
- Product Categories
- Layered Nav (Color)
- Layered Nav (Style)
- Price Filter
- Recent Products

Why This Works:

• Large products need space (3 columns)
• Visual presentation is key
• Fewer products allow larger images
• Style and color are important filters

---

Books & Educational Materials

Layout Configuration:

Product Style: Style 3 (info-dense)
Products Per Page: 20
Sidebar: Left
Products Per Row: 4
Filter Button: Enabled

Sidebar Widgets:
- Product Categories
- Layered Nav (Author)
- Layered Nav (Genre)
- Price Filter
- Recent Reviews

Why This Works:

• Details matter (descriptions visible)
• Many products per page for browsing
• Category navigation is primary
• Author and genre filters essential

---

Customization Tips

Creating Custom Product Grids

Using CSS (Child Theme):

/* 3 columns on desktop */
@media (min-width: 768px) {
    .woocommerce ul.products li.product {
        width: 31.33%;
        margin-right: 2%;
    }
}

/* 2 columns on tablet */
@media (min-width: 481px) and (max-width: 767px) {
    .woocommerce ul.products li.product {
        width: 48%;
        margin-right: 4%;
    }
}

Adding Custom Spacing

/* More space between products */
.woocommerce ul.products li.product {
    margin-bottom: 3em;
}

/* Tighter spacing */
.woocommerce ul.products li.product {
    margin-bottom: 1em;
}

Changing Image Aspect Ratios

/* Square images (1:1) */
.woocommerce ul.products li.product a img {
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

/* Portrait images (3:4) */
.woocommerce ul.products li.product a img {
    aspect-ratio: 3 / 4;
    object-fit: cover;
}

---

Troubleshooting Layouts

Products displaying in single column

Cause: Theme or plugin CSS conflict

Solution:

1. Check for CSS conflicts in browser inspector
2. Temporarily disable plugins one by one
3. Verify WooCommerce CSS is loading
4. Clear all caches

Sidebar not showing

Cause: No widgets added to sidebar area

Solution:

1. Go to Appearance → Widgets
2. Add at least one widget to the sidebar
3. Make sure sidebar position is not “None”
4. Check if WooCommerce pages are using correct template

Mobile layout broken

Cause: Theme not responsive or CSS conflict

Solution:

1. Test on different mobile devices
2. Check viewport meta tag exists
3. Verify responsive CSS is loading
4. Test with default WordPress theme

Products too wide/narrow

Cause: Custom CSS or theme conflict

Solution:

1. Inspect element in browser
2. Check for custom CSS overrides
3. Remove conflicting CSS
4. Adjust container width settings

Filter button not appearing

Cause: Setting not enabled or JavaScript error

Solution:

1. Enable “Display Filter Button” in Customizer
2. Check browser console for errors
3. Add widgets to Off Canvas Sidebar
4. Clear JavaScript cache

---

Performance Optimization

Image Loading

Recommendations:

• Use 600×600px for product thumbnails
• Enable lazy loading
• Compress images before upload
• Use WebP format when possible

Implementation:

// Add to child theme functions.php
add_filter('wp_lazy_loading_enabled', '__return_true');

Limiting Products Per Page

Impact on Performance:

Products	Page Load	Memory	Best For
12	~1-2s	Low	Small servers
16	~1.5-2.5s	Medium	Balanced
24	~2-3s	High	Strong servers
50+	~3-5s	Very High	Avoid

Recommendation: Keep under 24 products per page for best performance.

Caching Strategies

1. Enable Page Caching

   • Cache shop page
   • Don’t cache cart/checkout
   • Use WP Rocket or W3 Total Cache

2. Enable Object Caching

   • Reduces database queries
   • Speeds up repeated page loads
   • Use Redis or Memcached

3. Use CDN for Images

   • Offload product images
   • Faster delivery worldwide
   • Cloudflare or StackPath

---

Accessibility Best Practices

Keyboard Navigation

Ensure customers can navigate with keyboard:

• Tab through products
• Enter to open product pages
• Arrow keys for grid navigation (optional)

Screen Reader Support

• Product images have descriptive alt text
• Prices are properly labeled
• Add to Cart buttons are clear
• Sale badges are announced

Color Contrast

• Ensure text meets WCAG AA standards
• Price text clearly visible
• Sale badges readable
• Link colors distinguishable

Focus Indicators

/* Visible focus for keyboard users */
.woocommerce ul.products li.product a:focus {
    outline: 2px solid #007cba;
    outline-offset: 2px;
}

---

Common Questions

Can I show different layouts on different categories?

Not natively through Customizer. You would need custom code or a plugin like “WooCommerce Category Page Customizer”.

How do I change the number of columns?

Use custom code (see “Creating Custom Product Grids” above) or a page builder widget.

Can I hide prices from non-logged-in users?

Yes, use a plugin like “WooCommerce Catalog Mode” or add custom code to your child theme.

Will changing layout affect mobile?

BuddyX Pro layouts are responsive and adjust automatically for mobile devices.

Can I mix product styles?

Not on the same page. Product style applies globally to all shop pages.

How do I add a banner above products?

Use the WooCommerce shop page hook or add content to the page itself using a page builder.

---

Related Settings

• WooCommerce Setup Guide - Initial installation
• WooCommerce Customizer Settings - Detailed settings guide
• Cart & Checkout - Payment page configuration

---

Need Help?

Documentation: docs.wbcomdesigns.com Support Forum: wbcomdesigns.com/support Custom Layout Services: wbcomdesigns.com/hire

Email Support: support@wbcomdesigns.com