Visulogix - Advanced Visual Logic Plugin for Elementor

🎯 Overview

Visulogix is an advanced visual logic and conditional display plugin for Elementor that transforms how you control element visibility. With an intuitive visual content browser, comprehensive conditional logic system, and seamless Elementor integration, you can create dynamic, personalized experiences for your visitors.

✨ Key Features

🎨 Visual Content Browser

• Thumbnail previews for posts, pages, and categories
• Bookmark system to save favorite content
• Search and filter capabilities
• Grid-based interface for easy browsing
• Real-time content loading with AJAX

🎯 Smart Conditional Logic

• Quick selectors for pages, posts, and categories
• Advanced condition builder with multiple criteria
• Logic operators (AND/OR) for complex conditions
• Universal element support (widgets, sections, columns, containers)

🚀 Comprehensive Condition Types

• Content-based: Pages, posts, categories, custom post types
• User-based: Login status, user roles, capabilities
• Technical: Device types, browser detection
• Temporal: Date ranges, time-based conditions
• Custom: Meta fields, taxonomies, and more

🎭 Smooth Animations

• Multiple animation types: Fade, slide (up/down/left/right)
• Customizable timing and speed controls
• Performance optimized with CSS3 transitions

🛠️ Professional Tools

• Conditions manager with overview dashboard
• Import/Export functionality for easy migration
• Debug mode for troubleshooting
• Cache optimization for better performance

📦 Installation

Method 1: Upload via WordPress Admin

1. Download the plugin zip file
2. Go to WordPress Admin → Plugins → Add New → Upload Plugin
3. Upload the zip file and click Install Now
4. Activate the plugin

Method 2: Manual Installation

1. Download and extract the plugin files
2. Upload the visulogix folder to /wp-content/plugins/
3. Go to WordPress Admin → Plugins
4. Find Visulogix and click Activate

Method 3: Git Clone

cd /wp-content/plugins/
git clone https://github.com/prangishviliAbe/WP-visulogix.git visulogix

🎮 Quick Start Guide

1. Basic Setup

• Ensure Elementor 3.0.0+ is installed and activated
• Activate the Visulogix plugin
• Go to Visulogix → Settings to configure options

2. Using Visual Logic

1. Edit any page with Elementor
2. Click on any element (widget, section, column, container)
3. Go to Advanced tab
4. Look for "🎯 Visual Logic" section
5. Enable Visual Logic and set your conditions

3. Quick Page/Post Selection

• Use 📄 Quick Page Select for simple page-based conditions
• Use 📝 Quick Post Select for post-specific visibility
• Use 🏷️ Quick Category Select for category-based logic

4. Advanced Conditions

• Click ⚙️ Advanced Conditions for complex logic
• Add multiple conditions with AND/OR operators
• Combine different condition types for precise control

🎨 Content Browser Usage

Access the Browser

1. Go to WordPress Admin → Visulogix
2. Click "Content Browser 🔍" to expand
3. Load content by type: Posts, Pages, Categories

Browser Features

• 📋 Visual thumbnails for easy identification
• ⭐ Bookmark items for quick access later
• ✓ Select multiple items for bulk condition setup
• 🔍 Search functionality with real-time filtering
• 📊 Status indicators (Published, Draft, Private)

Automatic Installation

1. Upload the visulogix folder to /wp-content/plugins/
2. Activate the plugin through the 'Plugins' menu in WordPress
3. Ensure Elementor is installed and activated

Manual Installation

1. Download the plugin ZIP file
2. Go to WordPress Admin → Plugins → Add New → Upload Plugin
3. Choose the ZIP file and click "Install Now"
4. Activate the plugin

Quick Start Guide

1. Enable Visual Logic on an Element

1. Edit any page with Elementor
2. Select a widget, section, or column
3. Go to the Advanced tab
4. Find the Visual Logic section
5. Toggle "Enable Visual Logic" to ON

2. Add Your First Condition

1. Click Add Item in the Conditions field
2. Choose a Condition Type (e.g., "Device Type")
3. Select an Operator (e.g., "Equals")
4. Enter a Value (e.g., "mobile")
5. Update the page

3. Test Your Conditions

1. In the Elementor editor, click the Test Conditions button
2. View the results in real-time
3. Adjust conditions as needed

Condition Types Reference

Page Conditions

// Show only on specific pages
Condition Type: Page ID
Operator: Equals
Value: 1,5,10 (comma-separated IDs)

// Hide on blog posts
Condition Type: Post Type
Operator: Equals
Value: post

User Conditions

// Show only to administrators
Condition Type: User Role
Operator: Equals
Value: administrator

// Hide from logged-out users
Condition Type: User Logged In
Operator: Equals
Value: yes

Device Conditions

// Show only on mobile devices
Condition Type: Device Type
Operator: Equals
Value: mobile

// Hide on Internet Explorer
Condition Type: Browser
Operator: Equals
Value: ie

Date & Time Conditions

// Show during business hours
Condition Type: Time Range
Operator: Between
Value: 09:00
Compare Value: 17:00

// Show only on weekends
Condition Type: Day of Week
Operator: Equals
Value: 0,6 (Sunday, Saturday)

WooCommerce Conditions

// Show when cart total > $100
Condition Type: WooCommerce Cart Total
Operator: Greater Than
Value: 100

// Show only for specific product category
Condition Type: WooCommerce Product Category
Operator: Equals
Value: electronics

Custom Conditions

// Show when URL parameter exists
Condition Type: URL Parameter
Operator: Exists
Value: utm_source

// Show based on custom field
Condition Type: Custom Field
Operator: Equals
Value: featured_product
Compare Value: yes

Advanced Usage

Logic Operators

AND Logic (default): All conditions must be true

// Show only to mobile users who are logged in
Condition 1: Device Type equals mobile
Condition 2: User Logged In equals yes
Logic: AND

OR Logic: Any condition can be true

// Show to admins OR editors
Condition 1: User Role equals administrator
Condition 2: User Role equals editor
Logic: OR

Animation Settings

Control how elements appear and disappear:

• None: Instant show/hide
• Fade: Smooth opacity transition
• Slide Up: Element slides up from below
• Slide Down: Element slides down from above
• Slide Left: Element slides in from the right
• Slide Right: Element slides in from the left

Performance Optimization

• Caching: Condition results are cached to improve performance
• Lazy Loading: Conditions are evaluated only when needed
• Efficient Queries: Optimized database queries for large sites

Developer Documentation

Custom Conditions

Add your own condition types:

add_filter('visulogix_condition_types', function($types) {
    $types['weather'] = 'Weather Conditions';
    return $types;
});

add_filter('visulogix_evaluate_custom_condition', function($result, $condition, $context) {
    if ($condition['type'] === 'weather') {
        // Your custom logic here
        return weather_api_check($condition['value']);
    }
    return $result;
}, 10, 3);

Hooks and Filters

Actions:

• visulogix_before_condition_check - Before evaluating conditions
• visulogix_after_condition_check - After evaluating conditions
• visulogix_element_hidden - When an element is hidden
• visulogix_element_shown - When an element is shown

Filters:

• visulogix_condition_types - Add custom condition types
• visulogix_evaluate_custom_condition - Add custom condition logic
• visulogix_animation_speed - Modify animation speed
• visulogix_cache_duration - Modify cache duration

REST API Endpoints

// Test conditions
POST /wp-json/visulogix/v1/test-conditions
{
    "conditions": [...],
    "logic": "AND"
}

// Get condition statistics
GET /wp-json/visulogix/v1/stats

// Export conditions
GET /wp-json/visulogix/v1/export

// Import conditions
POST /wp-json/visulogix/v1/import

Troubleshooting

Common Issues

Elements not hiding/showing:

1. Check that Visual Logic is enabled
2. Verify conditions are properly configured
3. Enable Debug Mode to see console logs
4. Clear any caching plugins

Performance issues:

1. Enable condition caching
2. Reduce the number of complex conditions
3. Use server-side conditions when possible

Animation not working:

1. Check for CSS conflicts
2. Verify animation speed setting
3. Test with different animation types

Debug Mode

Enable debug mode for detailed logging:

1. Go to Visulogix → Settings
2. Check "Enable Debug Mode"
3. Open browser console to see condition evaluation logs

Cache Issues

Clear cache after making changes:

1. Clear WordPress cache
2. Clear Elementor cache
3. Clear browser cache
4. Purge CDN cache if applicable

🔧 Configuration Options

General Settings

• Debug Mode: Enable console logging for troubleshooting
• Cache Conditions: Improve performance with result caching
• Frontend Scripts: Control script loading behavior
• Animation Speed: Customize transition timing (0-2000ms)

Advanced Options

• Import/Export: Backup and restore condition configurations
• Conditions Manager: Monitor and manage active conditions
• Performance Settings: Optimize for your specific needs

🎯 Condition Types Reference

Condition Type	Description	Example Use Cases
Page	Show/hide on specific pages	Landing page exclusives, page-specific CTAs
Post	Target individual posts	Author bio on specific articles
Category	Category-based visibility	Category-specific sidebars, related content
User Role	Role-based content	Admin-only elements, subscriber content
Device Type	Responsive conditions	Mobile-only buttons, desktop layouts
Date Range	Time-based display	Seasonal content, limited-time offers
Custom Fields	Meta-based logic	Product-specific features, custom data

🔍 Troubleshooting

Common Issues

Visual Logic section not showing?

• Verify Elementor version (3.0.0+ required)
• Clear cache and regenerate Elementor CSS
• Deactivate/reactivate Visulogix plugin

Conditions not working?

• Enable Debug Mode in Visulogix settings
• Check browser console for JavaScript errors
• Verify condition logic and operators

Content Browser not loading?

• Check WordPress AJAX functionality
• Verify user permissions
• Clear browser cache

Debug Mode

Enable debug mode in Visulogix → Settings to get detailed console logs for:

• Condition evaluation processes
• AJAX request/response data
• Performance timing information
• Error tracking and reporting

🛠️ Development

File Structure

visulogix/
├── assets/
│   ├── css/
│   │   ├── admin.css
│   │   └── frontend.css
│   ├── js/
│   │   ├── admin.js
│   │   ├── editor.js
│   │   └── frontend.js
│   └── cover.png
├── includes/
│   ├── class-admin.php
│   ├── class-conditions.php
│   ├── class-elementor-integration.php
│   ├── class-frontend.php
│   └── class-logic-engine.php
├── languages/
│   └── visulogix.pot
├── visulogix.php
├── uninstall.php
└── README.md

📝 Changelog

Version 1.0.1

• Bug Fix: Removed duplicate add_admin_menu() method causing fatal error
• Stability: Plugin now activates without PHP errors
• Compatibility: Improved plugin activation reliability

Version 1.0.0

• Initial release
• Visual content browser with thumbnails and bookmarking
• Comprehensive conditional logic system
• Universal Elementor element support
• Advanced condition types and operators
• Smooth animations and transitions
• Import/export functionality
• Debug mode and performance optimization

📄 License

This project is licensed under the GPL v2 or later - see the LICENSE file for details.

👨‍💻 Author

Abe Prangishvili

• GitHub: @prangishviliAbe
• Plugin Repository: WP-visulogix

🤝 Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

🎉 Support

If you find this plugin helpful, please:

• ⭐ Star the repository
• 🐛 Report bugs via GitHub Issues
• 💡 Suggest features via GitHub Discussions
• 📖 Contribute to documentation

---

Transform your Elementor experience with intelligent, condition-based content display. Make every element count with Visulogix! 🚀