CSS selector targeting
Aim steps at existing #id, .class, nested, or [data-*] selectors. No theme edits required.
WordPress plugin · v1.0.1
Product Tour by Logicanvas
Lightweight Driver.js product tours for any WordPress theme.
Create modern, branded walkthroughs without slowing the site down. Point steps at existing CSS selectors, style them with a brand kit, and load Driver.js only on pages that actually run a tour.
Capabilities
Tours that stay out of the way
Brand kit
Colors, radius, fonts, overlay, shadow, progress style, custom CSS, and a live preview.
Process controls
Auto or manual start, audience rules, show-once with version bump, and require-click steps.
Featherweight load
Frontend CSS and JS enqueue only when a tour matches the current page. Target under ~50KB gzipped.
Shortcode, block, and API
Start tours from a shortcode, Gutenberg trigger block, or LCProductTour.start(id).
Restart button
Let visitors replay a tour with site-wide restart defaults and per-tour overrides.
Works with any theme
If the markup is in the page — including Elementor output — you can highlight it.
Pro add-on
Elementor Tour Trigger, visual element picker, query/scroll triggers, multi-page resume, and completion analytics.
How it works
From studio to published tour
01
Create a tour
Open Product Tours → Add New and name the walkthrough.
02
Build steps
In Tour Studio, add selectors, copy, and brand tokens. Preview as you go.
03
Choose how it starts
Auto-run for matching pages, or start from a button, shortcode, block, or JS.
04
Publish
Publish the tour. Assets load only on pages that match — everyone else pays nothing.
Built for
Who uses Product Tour
- SaaS and membership sites onboarding new accounts
- WooCommerce stores walking buyers through checkout or dashboards
- Agencies handing clients a branded first-run tour
- Docs and admin screens that need a show-once walkthrough
Requirements
Stack checklist
- WordPress
- 6.0 or newer
- PHP
- 7.4 or newer
- WooCommerce
- Not required
- Elementor
- Optional — Pro adds a Tour Trigger widget
Builders
Shortcodes and API
Drop a start control onto any page, or call the public JS helper. Gutenberg includes a Tour Trigger block.
[lc_product_tour id=""][lc_product_tour_button id="" label="Start tour"]LCProductTour.start(id)Pro add-on
When you need more control
Product Tour by Logicanvas Pro is a separate plugin. Activate it after the free plugin and unlock editor and analytics extras.
- Elementor Tour Trigger widget
- Visual element picker in the editor
- Query and scroll triggers
- Multi-page tours that resume
- Completion analytics
Get started
Install Product Tour
Free WordPress plugin. Upload the release zip, or install from wordpress.org when listed. A Pro add-on is available separately.
- Upload the plugin folder to wp-content/plugins/.
- Activate Product Tour by Logicanvas from the Plugins screen.
- Open Product Tours → Add New and build steps in Tour Studio.
- Follow the Product Tour docs for selectors, brand kit, and the JS API.
Product Tour 1.0.1
Free · GPLv2 or later
Read the docsEmail for release zipNeed a custom onboarding flow or Pro license setup? Talk to Logicanvas.
FAQ
Common questions
Will this slow down my site?
No. When no tour matches the current page, the plugin loads zero frontend CSS or JS.
Can I use my theme’s existing classes and IDs?
Yes. Each step accepts any CSS selector — #header, .btn-primary, nested selectors, or [data-id].
Does it work with Elementor?
The free plugin works with any markup Elementor outputs via CSS selectors. The Pro add-on adds a Tour Trigger widget and visual picker.
Does it require WooCommerce?
No. It runs on any WordPress site. WooCommerce stores can still use it for checkout or account tours.
Where is the documentation?
Setup, selectors, brand kit, and the JS API are documented at docs.logicanvas.io/product-tour-by-logicanvas.
Is the core plugin free?
Yes — GPLv2 or later. Pro is a separate add-on for Elementor, picker, multi-page, and analytics.