> ## Documentation Index
> Fetch the complete documentation index at: https://docs.pureclarity.com/llms.txt
> Use this file to discover all available pages before exploring further.

# WooCommerce Zones Configuration

> How to configure and manage recommendation zones in your WooCommerce store using PureClarity

<Note>
  Zones define where recommendations appear on your WooCommerce store. Ensure your PureClarity plugin is configured before setting up zones.
</Note>

## Understanding Zones

Zones are designated areas on your website where PureClarity displays personalized recommendations. Each zone can show different types of content based on your customers' behavior and preferences.

<Info>
  Learn more about zone concepts and best practices in our [Zones Overview](/features/zones/overview) guide.
</Info>

## Automatic Zone Configuration

The PureClarity WooCommerce plugin includes pre-configured zones for optimal performance:

### Default Zone Locations

**Homepage Zones**

* Featured products section
* Category highlights area
* New arrivals display

**Product Page Zones**

* Related products section
* Cross-sell recommendations
* Recently viewed items

**Cart & Checkout Zones**

* Upsell recommendations
* Frequently bought together
* Last chance offers

**Category Page Zones**

* Top products in category
* Alternative product suggestions
* Trending items

<Tip>
  Default zones are optimized for standard WooCommerce themes. Custom themes may require additional configuration.
</Tip>

## Manual Zone Configuration

For custom implementations or specific requirements:

### Using WordPress Widgets

1. **Navigate to Appearance > Widgets** in your WordPress admin
2. **Locate PureClarity widgets** in the available widgets list
3. **Drag widgets** to desired sidebar or widget areas
4. **Configure widget settings**:
   * Zone ID
   * Display title
   * Number of products
   * Styling options

### Using Shortcodes

Insert zones directly into posts, pages, or theme templates:

```php theme={null}
// Basic zone shortcode
[pureclarity_zone id="zone_id"]

// Zone with custom attributes
[pureclarity_zone id="homepage_featured" title="Recommended for You" limit="4"]
```

### Direct Template Integration

For developers working with theme files:

```php theme={null}
<?php
// Display a zone in template files
if (function_exists('pureclarity_display_zone')) {
    pureclarity_display_zone('zone_id', array(
        'title' => 'Personalized Recommendations',
        'limit' => 6,
        'template' => 'custom'
    ));
}
?>
```

<Warning>
  Direct template modifications require PHP knowledge and should be tested thoroughly. Always backup your site before making template changes.
</Warning>

## Zone Management

### Viewing Active Zones

Monitor your zones through the PureClarity dashboard:

1. **Access the dashboard** via WooCommerce > PureClarity
2. **Review zone performance** in the analytics section
3. **Check zone status** for any configuration issues

### Customizing Zone Behavior

**Display Options**

* Number of recommendations to show
* Product image sizes
* Text and styling customization
* Mobile responsiveness settings

**Targeting Options**

* Customer segment filtering
* Product category restrictions
* Behavioral triggers
* Geographic targeting

## Zone Troubleshooting

### Common Issues

**Zones Not Displaying**

* Verify plugin activation
* Check zone IDs match configuration
* Ensure data feeds are processing
* Confirm theme compatibility

**Poor Recommendations**

* Allow time for AI learning (7-14 days)
* Verify product data quality
* Check customer behavior tracking
* Review zone targeting settings

<Info>
  Most recommendation quality improves significantly after 2 weeks of data collection as the AI learns your customers' preferences.
</Info>

### Testing Zones

**Test Mode Configuration**

1. Switch to Test mode in the dashboard
2. Browse your site as a customer would
3. Verify zones display correctly
4. Check recommendation relevance
5. Test on different devices and browsers

## Best Practices

### Zone Placement Strategy

**Above the Fold** - High-visibility areas for maximum engagement
**Context-Relevant** - Product pages show related items
**Non-Intrusive** - Complement existing design and flow
**Mobile-Optimized** - Ensure zones work on all devices

### Performance Optimization

* Limit zones per page (3-5 maximum)
* Use appropriate product limits (4-8 items)
* Implement lazy loading for below-fold zones
* Monitor site speed impact

## Advanced Configuration

### Custom Zone Templates

Create custom zone templates in your theme:

```php theme={null}
// wp-content/themes/your-theme/pureclarity/zone-custom.php
<div class="pureclarity-custom-zone">
    <h3><?php echo $zone_title; ?></h3>
    <div class="products-grid">
        <?php foreach ($products as $product): ?>
            <div class="product-item">
                <!-- Custom product display -->
            </div>
        <?php endforeach; ?>
    </div>
</div>
```

### Integration with Page Builders

**Elementor Integration**

* Use PureClarity widget for Elementor
* Configure zones through widget settings
* Maintain design consistency

**Gutenberg Block Support**

* PureClarity recommendation blocks
* Easy drag-and-drop zone placement
* Visual configuration options

## Related Resources

* [Zone Overview and Concepts](/features/zones/overview)
* [WooCommerce Data Feeds](/integrations/woocommerce/data-feeds)
* [Plugin Settings](/integrations/woocommerce/settings)
* [WooCommerce Troubleshooting](/integrations/woocommerce/troubleshooting)