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

​
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.
Learn more about zone concepts and best practices in our Zones Overview guide.

​
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
Default zones are optimized for standard WooCommerce themes. Custom themes may require additional configuration.

​
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: 
// 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
// 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'
    ));
}
?>
Direct template modifications require PHP knowledge and should be tested thoroughly. Always backup your site before making template changes.

​
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
Most recommendation quality improves significantly after 2 weeks of data collection as the AI learns your customers’ preferences.

​
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: 
// 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