WooAccordion Pro Documentation

Complete guide to setting up and customizing your WooCommerce product accordions

Overview

WooAccordion Pro transforms your traditional WooCommerce product tabs into beautiful, mobile-optimized accordions. With smooth animations, customizable styling, and built-in custom tab management, it's designed to improve your customers' shopping experience and boost conversions.

Key Benefits: 40% higher mobile conversions, better user experience, advanced customization options, and custom tab management.

What's Included

  • Accordion Conversion: Transform existing WooCommerce tabs to accordions
  • Smooth Animations: Customizable animation speeds and styles
  • Multiple Icon Styles: CSS icons and FontAwesome support
  • Advanced Styling: Complete color customization with template presets
  • Custom Tab Manager: Create and manage custom accordion tabs with conditional logic
  • Mobile Optimization: Touch gestures and responsive design
  • Template System: Choose from Modern, Minimal, or Classic templates

Installation

Automatic Installation (Recommended)

1Download Plugin

Download the WooAccordion Pro plugin file from your purchase confirmation email.

2Upload to WordPress

Go to Plugins → Add New → Upload Plugin and select the downloaded file.

3Activate Plugin

Click "Activate Plugin" after successful upload.

Manual Installation via FTP

  1. Extract the wooaccordion-pro.zip file
  2. Upload the wooaccordion-pro folder to /wp-content/plugins/
  3. Activate the plugin through the WordPress admin panel
Installation Complete! You'll find the settings under WooCommerce → Accordions.

Quick Setup (3 Minutes)

Step 1: Enable Accordions

  1. Navigate to WooCommerce → Accordions
  2. Check "Enable Accordions" to replace default tabs
  3. Click "Save Settings"
// Your product tabs are now automatically converted to accordions! // Visit any product page to see the change.

Step 2: Choose Your Style

  1. In the Styling tab, select your preferred Template Style
  2. Choose your Toggle Icon Style (Plus/Minus, Arrow, Chevron, or Triangle)
  3. Customize colors to match your theme using the color pickers

Step 3: Test on Mobile

  1. Open a product page on your mobile device
  2. Test the touch gestures (tap to expand/collapse)
  3. Verify the responsive design looks good
Pro Tip: Use Chrome DevTools' mobile simulator to quickly test different screen sizes.

System Requirements

Requirement Minimum Recommended
WordPress Version 5.0+ 6.0+
WooCommerce Version 4.0+ 8.0+
PHP Version 7.4+ 8.1+
Memory Limit 128MB 256MB+

Compatible Themes

WooAccordion Pro works with any properly coded WordPress theme. Tested extensively with:

  • Storefront (WooCommerce default)
  • Astra
  • OceanWP
  • GeneratePress
  • Flatsome
  • Divi

Basic Settings

General Options

Setting Description Default
Enable Accordions Replace WooCommerce tabs with accordions Enabled
Auto Expand First Automatically expand the first accordion item Enabled
Allow Multiple Open Allow multiple accordion items to be open simultaneously Disabled
Show Icons Display icons next to accordion headers Enabled
Icon Library Choose between CSS icons (lightweight) or FontAwesome CSS Icons
Animation Speed Control how fast accordions open and close Normal (300ms)
Performance Tip: CSS Icons are lightweight and load faster than FontAwesome, making them ideal for performance-focused sites.

Styling Options

Template Styles

Modern Card

Clean, card-based design with subtle shadows and rounded corners. Perfect for modern e-commerce sites.

Minimal Flat

Flat design with clean lines and minimal visual elements. Great for minimalist themes.

Classic

Traditional styling with borders and conventional spacing. Ideal for established brands.

Toggle Icon Styles

Style Icons Used Best For
Plus/Minus + / − Universal, clear indication
Arrow Down ↓ / ↑ Directional, intuitive
Chevron ⌄ / ⌃ Modern, subtle
Triangle ▶ / ▼ Classic, distinctive

Color Customization

Element Description Reset Option
Header Background Accordion header background color ✓
Header Text Color Accordion header text color ✓
Active Header Background Background color when accordion is expanded ✓
Active Header Text Color Text color when accordion is expanded ✓
Border Color Border color for accordion items ✓
Smart Templates: When you change templates, colors automatically reset to match the template's default color scheme.

Mobile Features

Touch Gestures

Gesture Action Status
Tap Expand/collapse accordion Always enabled
Swipe Gestures Enhanced touch interactions Configurable

Responsive Design

  • Mobile (< 768px): Optimized touch targets and spacing
  • Tablet (768px - 1024px): Balanced design for medium screens
  • Desktop (> 1024px): Full accordion functionality

Mobile Settings

Enable Touch Gestures in the Mobile tab to allow enhanced swipe interactions on mobile devices. This feature is optimized for better mobile user experience.

Mobile First: The plugin is designed with mobile users in mind, as 75% of e-commerce traffic comes from mobile devices.

Custom Tabs Manager

Creating Custom Tabs

The Custom Tabs Manager allows you to create unlimited custom accordion sections with rich content and conditional display logic.

Adding a New Tab

  1. Go to WooCommerce → Accordions → Custom Tabs
  2. Click "Add New Tab"
  3. Fill in the basic information:
    • Tab Title: The heading that appears in the accordion
    • Priority: Controls display order (1-100, lower numbers first)
    • Status: Enable or disable the tab
  4. Add your content using the HTML editor
  5. Set display conditions (optional)
  6. Save the tab

Content Editor

The custom tab content editor supports HTML and includes formatting buttons for:

  • Bold and Italic text
  • Headings (H2, H3)
  • Bullet lists
  • Code formatting
  • Links

Dynamic Placeholders

Use these placeholders in your content for dynamic product information:

{product_name} - Display the product name {product_price} - Show the product price {product_sku} - Display the SKU {product_weight} - Show product weight {product_dimensions} - Display dimensions

Conditional Display Logic

Control when and where your custom tabs appear:

Product Categories

Show tabs only for products in specific categories. Great for category-specific information like:

  • Electronics → Warranty & Tech Support
  • Clothing → Size Guide & Care Instructions
  • Books → Author Bio & Reviews

User Roles

Display different content based on user roles:

  • Customers: Standard product information
  • Wholesale: Bulk pricing and trade terms
  • Administrators: Internal notes and management info

Product Types

Show tabs only for specific product types:

  • Simple products
  • Variable products
  • Grouped products
  • External products
Powerful Combinations: You can combine multiple conditions. For example, show a "Bulk Pricing" tab only for wholesale users viewing electronics products.

Troubleshooting

Common Issues

Accordions Not Showing

Problem: Accordions don't appear on product pages

Solutions:

  1. Verify plugin is activated in Plugins → Installed Plugins
  2. Check that "Enable Accordions" is checked in WooCommerce → Accordions → General
  3. Clear any caching plugins
  4. Test with a different theme to check for theme conflicts

Styling Issues

Problem: Accordions look broken or unstyled

Solutions:

  1. Try different template styles (Modern, Minimal, Classic)
  2. Reset colors to template defaults using the reset buttons
  3. Check if your theme has conflicting CSS
  4. Clear browser cache and refresh the page

JavaScript Errors

Problem: Accordions don't expand/collapse

Solutions:

  1. Check browser console for JavaScript errors (F12 → Console)
  2. Deactivate other plugins to test for conflicts
  3. Ensure jQuery is loaded properly
  4. Clear browser cache and test in incognito mode

Custom Tabs Not Saving

Problem: Custom tab content doesn't save properly

Solutions:

  1. Ensure you have proper permissions (manage_woocommerce capability)
  2. Check that the tab title is filled in (required field)
  3. Try saving without special characters in the content
  4. Clear any page caching

Debug Mode

Enable debug mode to troubleshoot issues:

// Add to wp-config.php define('WP_DEBUG', true); define('WP_DEBUG_LOG', true); // Check debug log at: /wp-content/debug.log

Theme Compatibility

If your theme isn't fully compatible:

  1. Contact theme developer for WooCommerce compatibility
  2. Test with a default WordPress theme (Twenty Twenty-Four)
  3. Consider switching to a WooCommerce-certified theme
Still Need Help? Contact our support team with your site URL, theme name, and detailed description of the issue.

Frequently Asked Questions

General Questions

Q: Will this work with my theme?

A: WooAccordion Pro works with any properly coded WordPress theme that supports WooCommerce. We've tested it with 50+ popular themes including Storefront, Astra, OceanWP, and Divi.

Q: Does it affect site performance?

A: No, the plugin is optimized for performance. CSS and JavaScript are only loaded on product pages, and the code is minified and optimized. Most sites see no measurable performance impact.

Q: Can I customize the appearance?

A: Yes! The plugin includes extensive styling options, multiple templates, color customization with reset options, and supports different toggle icon styles.

Q: What happens to my existing product tabs?

A: Your content is preserved exactly as it was. The plugin simply changes how it's displayed - from horizontal tabs to vertical accordions. You can easily switch back by disabling the plugin.

Technical Questions

Q: Does it work with variable products?

A: Yes, accordions work perfectly with variable products, grouped products, and all WooCommerce product types.

Q: Can I add custom accordion sections?

A: Absolutely! Use the built-in Custom Tabs Manager to create unlimited custom accordion sections with rich content, conditional display logic, and priority ordering.

Q: How do I reorder accordion items?

A: Use the Priority setting in each custom tab (1-100, lower numbers appear first). Default WooCommerce tabs have fixed priorities, but custom tabs can be positioned anywhere.

Q: Can I show different tabs to different users?

A: Yes! Use the conditional display logic to show tabs based on user roles, product categories, or product types.

Q: Is it translation-ready?

A: Yes, the plugin is fully translation-ready and includes .pot files for easy translation. It's also compatible with WPML and Polylang.

Q: Does it work with page builders?

A: Yes, it works with Elementor, Beaver Builder, Divi Builder, and other page builders that properly support WooCommerce product pages.

Custom Tabs Questions

Q: How many custom tabs can I create?

A: There's no limit! You can create as many custom tabs as needed. Use conditional logic to keep the interface clean for different user types.

Q: Can I use HTML in custom tabs?

A: Yes, the custom tab editor supports HTML. Use the formatting toolbar for common elements or write HTML directly.

Q: Do custom tabs work with product variations?

A: Yes, custom tabs work with all product types. You can even use conditional logic to show different tabs for different product types.

Get Support

Before Contacting Support

  1. Check this documentation for solutions
  2. Review the FAQ section above
  3. Test with default WordPress theme (Twenty Twenty-Four)
  4. Deactivate other plugins to check for conflicts
  5. Clear all caches (site cache, browser cache)

How to Get Help

Support Ticket (Recommended)

  • URL: support.wooaccordionpro.com
  • Response Time: 24-48 hours
  • What to Include: Site URL, detailed issue description, screenshots

Community Forum

  • URL: community.wooaccordionpro.com
  • Best For: General questions, feature requests, sharing tips
  • Response Time: Community-driven (usually same day)

Video Tutorials

  • YouTube Channel: WooAccordion Pro Official
  • Covers: Installation, configuration, custom tabs, troubleshooting
  • New Videos: Added weekly

System Information

When contacting support, please include this information:

WordPress Version: [Your version] WooCommerce Version: [Your version] Theme: [Your theme name and version] Plugin Version: [WooAccordion Pro version] PHP Version: [Your PHP version] Browser: [Your browser and version] Issue Description: [Detailed description] Steps to Reproduce: [Step-by-step instructions]

Changelog

Version 1.0.0 (Current)

Release Date: January 2025

Initial Release Features:

  • ✨ Convert WooCommerce tabs to responsive accordions
  • 🎨 Multiple template styles (Modern, Minimal, Classic)
  • 🎯 Four toggle icon styles (Plus/Minus, Arrow, Chevron, Triangle)
  • 📱 Mobile-optimized touch gestures
  • 🔧 Complete custom tab management system
  • 🧠 Conditional display logic (categories, user roles, product types)
  • 🎛️ Advanced styling controls with color reset options
  • ⚡ Performance optimizations
  • 🌍 Translation-ready
  • 📝 Rich content editor for custom tabs
  • 🔄 Dynamic content placeholders

Key Features in v1.0.0

Admin Interface

  • Premium admin design with tabbed interface
  • Real-time color customization with reset buttons
  • Template-based color schemes
  • Custom tabs manager with modal editor
  • Conditional logic builder

Frontend Features

  • Smooth accordion animations
  • Responsive design for all devices
  • Multiple icon styles
  • Touch-friendly mobile interface
  • Clean, professional templates

Developer Features

  • WordPress coding standards compliant
  • Modular class structure
  • Secure AJAX handling
  • Proper sanitization and validation
  • Hook-based architecture

What's Not Included (Future Versions)

  • Custom field integration (ACF, Meta Box) - Planned for v1.1
  • Analytics dashboard - Planned for v1.2
  • A/B testing functionality - Planned for v1.3
  • Multi-level nested accordions - Under consideration
  • Live preview in admin - Planned for v1.1
Feature Requests: Have an idea for a new feature? Submit it through our community forum or support system!
Thank you for choosing WooAccordion Pro! We're committed to helping you create the best possible shopping experience for your customers. If you have any questions or feedback, don't hesitate to reach out to our support team.