Idea Plugins
🛍️ WooCommerce Product Side Panel — Documentation
A premium, floating product panel for your WooCommerce store. A trigger button fixed to the edge of the screen opens a sliding drawer of popular, sale, featured, new, category, or hand-picked products — without visitors ever leaving the page they're on. This page explains what every setting in the admin panel does and which part of the display it controls.
Version 1.0.4
HPOS & Blocks Compatible
No License Key Required
Legend Used On This Page
The tab a setting belongs to
✅ Tip / Recommendation
⚠️ Caution / Warning
⛔ Risky Area
01
Setup & Menu Location
This plugin requires WooCommerce. After installing and activating both plugins, the settings screen can be found here:
WordPress Admin Menu → 🛍️ Side Panel
⚠️ Warning: This menu only appears when WooCommerce is installed and active. If WooCommerce is missing, the plugin shows an admin notice instead of loading its settings. Access requires the "manage_woocommerce" capability (typically the Administrator / Shop Manager roles).
02
TAB
Dashboard
A quick overview of the panel's current status, shown when the settings page first loads.
🟢 Status Cards
| Card |
What It Shows |
| Panel status | Whether the panel is currently enabled and visible on the storefront |
| WooCommerce | Whether WooCommerce is detected as active, and its installed version |
| Plugin version | The currently installed version of the Product Side Panel plugin |
📋 Current Configuration
A summary list showing the active Position, Product source, Product count, Theme mode, and whether AJAX loading is on — a fast way to confirm your setup at a glance.
03
TAB
General
Panel visibility, where it displays, its screen position, and the trigger button's look.
👁️ Visibility
- Enable product panel — the master on/off switch for the entire floating panel, site-wide.
- Show on — All pages / Shop & category pages only / Single product pages only.
📍 Position
- Screen side — Left or Right edge of the screen.
- Vertical position of trigger — Top / Middle / Bottom.
🔘 Trigger Button
- Trigger text — the label shown on the tab (e.g. "Products").
- Trigger icon — Bag / Star / Tag / Heart / None.
- Show icon / Show text — independently toggle each part of the button.
- Drop shadow / Hover effect — subtle visual polish toggles.
- Width, Height, Border radius, Font size (px) — precise sizing controls.
- Font weight — Regular / Medium / Semibold / Bold.
✅
Tip: Changes on this tab reflect instantly in the
Live Preview panel on the right, so you can fine-tune sizing without saving first.
04
TAB
Products
Choose which products appear inside the panel, and which fields are shown on each product card.
🧲 Product Source
| Source |
What It Shows |
| Popular products | Best-sellers, ranked by WooCommerce's total sales count |
| Sale products | Products currently on sale |
| Category | A fixed number of products from one chosen category |
| Featured products | Products marked "Featured" in WooCommerce |
| New products | The most recently published products |
| Specific products | An exact, hand-picked list you choose yourself via search |
✅ Tip: pick "Category" to show a set number of products from one category, or "Specific products" to hand-pick exact items using the search box.
🗂️ Category (only used when source = "Category")
A dropdown of every WooCommerce product category. The "Number of products" field below controls how many items from it are shown.
🔍 Specific Products Picker (only used when source = "Specific products")
Search products by name (optionally narrowed to a category), each result showing its photo, name and price. Click a result to add it as a chip — up to 20 products — and click the × on a chip to remove it.
✅ Type at least 2 characters to trigger the search.
🔢 Count, Sort & Stock
- Number of products — how many products to display; used by every source except "Specific products" (which always shows exactly the items you picked).
- Hide out-of-stock products — excludes out-of-stock items from the panel.
- Order by — Date / Price / Title / Rating.
- Order — Ascending or Descending.
🧾 Product Card Fields
Independent checkboxes for each element of a product card: Image, Title, Price, Rating, Sale badge, Short description, Add to cart button, View product button.
⚠️ If every field here is left unchecked, product cards render empty — leave at least Image, Title and Price checked for a useful panel.
05
TAB
Appearance
Colors, typography and theme mode — every change previews live in the sidebar.
🌗 Theme
Choose Light, Dark, or Follow system (matches each visitor's own OS/browser preference automatically, driven entirely by CSS custom properties).
🔤 Typography
- Panel width (px) and Border radius (px) for the drawer itself.
- Heading font size / weight / letter spacing — for the panel title.
- Body font size / line height / weight — for product titles and text inside the cards.
🎨 Colors — Light & Dark Theme
Two complete, independent color palettes — one for Light theme, one for Dark theme — each with its own color pickers, grouped as:
| Group |
Fields |
| Panel | Background, Text, Heading, Border, Shadow |
| Trigger | Background, Text, Icon, Hover background, Hover text |
| Card | Background, Title, Price, Sale price, Badge, Border |
| Button | Background, Text, Hover background, Hover text |
✅ Both palettes accept hex (#111827) or rgba() values; anything else is rejected and the previous safe value is kept.
06
TAB
Content
Every piece of text shown to visitors, fully editable and translation-ready.
✏️ Editable Text Fields
- Panel title
- Panel subtitle
- Add to cart text
- View product text
- Sale badge text
- Popular badge text
- Empty state title
- Empty state text
- Loading text
- Error text
- Close button label
07
TAB
Advanced
Performance, debugging, custom CSS, confetti effects, and the settings reset action.
⚡ Performance
- Load products via AJAX — recommended: keeps initial page load fast; products are fetched only when a visitor opens the panel. When off, products are rendered directly into the page HTML instead.
- Product cache duration (minutes, 0 = disabled) — how long the queried product list is cached in a transient before being re-queried.
- Debug mode — logs technical diagnostics to the standard WordPress debug log. No personal data is logged.
🧩 Custom CSS
A free-text CSS field for advanced users. Target the ideap_-prefixed classes and CSS custom properties to fine-tune the panel's appearance.
⛔ Risky Area: tags, @import, expression() and url(javascript:...) are automatically stripped for safety, but invalid CSS can still break the panel's appearance — back up your existing code before making changes.
🎉 Effects
- Confetti effect on open — bursts a short, colourful confetti animation across the panel each time a visitor opens it. Off by default.
- Confetti speed — Slow / Normal / Fast.
✅ Automatically skipped for visitors who have "reduce motion" enabled in their operating system.
♻️ Reset Settings
Restores every setting on this page to plugin defaults, after a confirmation prompt. Your WooCommerce products and orders are never affected.
⛔ Caution: this immediately overwrites all panel settings (position, products, colors, text, everything) back to their defaults. This cannot be undone.
08
Live Preview (Sidebar)
On the right side of the settings page, a preview card shows the panel exactly as it will appear on your storefront — visible while editing the General, Products, Appearance, and Content tabs.
✅ The preview reuses the plugin's actual frontend stylesheet, so what you see closely matches the real storefront rendering (actual results may still vary slightly depending on your active theme).
💾 One Form, One Save
All six tabs live inside a single form and are saved together with one "Save changes" button at the bottom — switching tabs never discards unsaved changes on another tab, and saving from any tab always saves every tab's current values at once.
✅ After saving, a persistent confirmation banner appears at the top of the page and stays visible until you dismiss it yourself with its close button — it will not auto-disappear.
10
Frequently Asked Questions
Does this plugin require WooCommerce?
Yes. WooCommerce must be installed and active. The plugin displays an admin notice if it's missing and does not load its settings until WooCommerce is active.
Will updating the plugin reset my settings?
No. All settings, product configuration, and theme customization are preserved through updates via a versioned migration system that only ever adds or repairs data — it never wipes existing configuration.
Does deactivating or deleting the plugin remove my data?
No. Deactivation never touches your data. Uninstalling (deleting) the plugin also preserves your settings by default; destructive deletion only happens if a developer explicitly opts in via a code-level filter — never through an in-app toggle a store owner could hit by accident.
Does this plugin use any external services or tracking?
No. There are no license servers, telemetry, tracking, or required external/CDN dependencies. It runs fully self-contained on your own WordPress/WooCommerce installation.
Is it accessible for keyboard and screen-reader users?
Yes. The panel supports keyboard navigation, focus trapping while open, ARIA attributes, closing via the Escape key, and respects each visitor's operating-system "reduce motion" preference.
Idea Plugins — WooCommerce Product Side Panel — Documentation · Version 1.0.4