A modern, React-based customer account dashboard for Easy Digital Downloads that provides a comprehensive interface for managing products, licenses, orders, and subscriptions.
This product was coded primarily by AI, so please use at your own risk.
vibe-coded-edd-account.mp4
EDD SL Account is a customer-facing account management plugin that integrates seamlessly with Easy Digital Downloads, Software Licensing, and Recurring. It provides a clean, modern interface built with React and Tailwind CSS, allowing customers to view and manage their digital products, software licenses, order history, and subscription details all in one place.
This plugin requires the following plugins to be installed and activated:
-
Easy Digital Downloads Pro (for invoice functionality)
- Provides the core ecommerce functionality
- Invoice viewing is part of EDD Pro
-
EDD Software Licensing
- Required for license management features
- Enables license key viewing, site activation management, and license upgrades
-
EDD Recurring
- Required for subscription management features
- Enables subscription viewing, cancellation, and renewal date tracking
- View all purchased products
- Download products directly from the dashboard
- View and manage software licenses for each product
- See product versions and purchase dates
- Responsive design with container queries for optimal display
- View all software licenses in one place
- Copy license keys to clipboard
- Manage site activations
- View license status, activation limits, and expiration dates
- Upgrade licenses (if available)
- Deactivate sites from the dashboard
- Complete order history
- View order details and invoices
- Filter by order status
- See order totals and dates
- View active and inactive subscriptions
- See subscription details including renewal dates
- View pricing with discount information (for active subscriptions)
- Cancel subscriptions with confirmation dialog
- Secure cancellation flow with redirect back to dashboard
- Upload the plugin files to the
/wp-content/plugins/edd-sl-accountdirectory, or install the plugin through the WordPress plugins screen directly. - Activate the plugin through the 'Plugins' screen in WordPress.
- Ensure all required plugins (EDD Pro, EDD Software Licensing, EDD Recurring) are installed and activated.
- Use the
[edd_sl_account]shortcode on any page where you want the account dashboard to appear.
Add the account dashboard to any page using the shortcode:
[edd_sl_account]
Change the primary color:
[edd_sl_account primary_color="#2685f0"]
- Products: Customers can view their purchased products, download files, and access license keys
- Licenses: Manage software license activations, view license details, and upgrade licenses
- Orders: View complete order history with links to order details and invoices
- Subscriptions: Manage active subscriptions, view renewal dates, and cancel subscriptions
- Built with React and Tanstack Router
- Uses WordPress Data (Gutenberg data store) for state management
- REST API endpoints for secure data fetching
- Responsive design with Tailwind CSS
- Container queries for adaptive layouts
- Modern UI components using shadcn/ui
- All API endpoints require user authentication
- Nonces are used for all REST API requests
- Subscription cancellation uses secure EDD nonce validation
- User permissions are checked for all data access
- Passes Plugin Check.
- Uses native EDD functionality data-sensitive operations.
- Node.js: Version 18.x or higher
- NPM: Version 9.x or higher
- Composer: Required for PHP dependencies (if applicable)
-
Clone or navigate to the plugin directory:
cd wp-content/plugins/edd-sl-account -
Install NPM dependencies:
npm install
-
Start development mode with watch:
npm run start
This will watch for file changes and automatically rebuild assets.
-
Development build (with watch):
npm run start # or npm run watch -
Production build:
npm run build
This creates optimized, minified assets in
assets/build/.
edd-sl-account/
├── assets/
│ ├── build/ # Compiled assets (generated)
│ └── src/
│ └── js/ # Source JavaScript/React files
│ ├── app/
│ │ ├── components/ # React components
│ │ ├── routes/ # Route components
│ │ ├── lib/ # Utility functions
│ │ └── store/ # State management
│ ├── index.css # Tailwind CSS
│ └── main.jsx # Entry point
├── includes/ # PHP classes and functions
│ ├── API.php # REST API endpoints
│ └── Functions.php # Helper functions
├── package.json # NPM dependencies and scripts
├── webpack.config.js # Webpack configuration
├── tailwind.config.js # Tailwind CSS configuration
├── Gruntfile.js # Grunt tasks (for packaging)
└── edd-sl-account.php # Main plugin file
- Frontend: React 18, Tanstack Router, Tailwind CSS
- Build Tools: Webpack 5, Babel, PostCSS
- State Management: WordPress Data (Gutenberg data store)
- UI Components: Radix UI primitives, shadcn/ui patterns
- Styling: Tailwind CSS with container queries plugin
- Make changes to React components in
assets/src/js/ - Update styles in
assets/src/js/index.css(Tailwind CSS) - The development server will automatically rebuild on file changes
- Test changes in your WordPress environment
- Run production build before committing:
npm run build
To create a distribution zip file:
gruntThis creates edd-sl-account.zip with only the necessary files for distribution.
The plugin uses CSS custom properties for theming. You can customize colors via the shortcode:
primary_color: Sets the primary accent color (default:#2F4C84)- CSS variable:
--edd-sl-primary-color
All components that use the primary color will automatically inherit the custom value.
To see the original context files, please see: /.cursor.
For issues, feature requests, or questions, please contact the plugin developer.
- Initial release
- Products screen with download and license management
- Licenses screen with activation management
- Orders screen with order history
- Subscriptions screen with cancellation flow
- Responsive design with container queries
- REST API integration for secure data fetching