Elementor Logo Download Angie
All prompts
Elementor Widgets
Create
WordPress admin snippets
Visual apps
Interactive website snippets

Angie prompt library

All prompts

Ready-to-use prompts for managing your WordPress site with Angie.

Publishing activity overview dashboard widget

Create a Dashboard widget for the main WordPress Dashboard page that shows publishing activity for all content types (pages, posts, Elementor, products…) in a Git-style activity view, based on the attached image. This is site-wide activity, not per specific user.

Site Speed Test dashboard widget

Create a WordPress Dashboard widget that shows a website speed test with a nice score display like Google’s. Include a “Run test now” button, and also run the test automatically once a day. Display the date and time of the last test shown in the widget.

WooCommerce marketing HUD

Create a custom WordPress Dashboard Widget called ‘Marketing Intelligence HUD’.
Concept: A clean, executive-summary style dashboard widget for a wine store that shows where customers are located and how they found the store.
Behavior:

  1. Geography: Display a list of the Top 5 Cities and Top 3 Countries based on total revenue from recent orders.
  2. Traffic Sources: Show a simple breakdown of traffic sources (Organic, Social, Email, etc.) using WooCommerce attribution data.
  3. Data Retrieval: Fetch the last 25 orders to keep performance fast.
  4. Data Display: Use wp_strip_all_tags( wc_price( ... ) ) to show revenue amounts cleanly as plain text without HTML tags.

Controls:

  • Tabs: Simple toggle buttons to switch between “Geography” and “Traffic Sources” views.
  • Export: A button to download the data as a CSV file.

Technical Requirements:

  • Caching: Cache the data for 15 minutes using a WordPress Transient to prevent dashboard slowdowns.
  • Role: Only visible to Administrators.
  • Styling: Modern, spaced-out layout matching the WordPress admin aesthetic.

Performance: Ensure lightweight queries and efficient data processing.

  • WooCommerce
  • 1

Ripple Effect Image Widget

Create a custom Elementor widget named “Ripple Effect Image” with the following requirements:
1. Functionality:

  • Implement a WebGL-based liquid ripple distortion effect on image hover using Three.js.
  • The effect should be driven by mouse movement, creating fluid, water-like ripples that distort the background image.
  • Ensure the effect is smooth and performs well.

2. Content Controls:

  • Image: Media control to upload the background image.
  • Title: Text control for a main heading overlay (centered).
  • Subtitle: Text control for a sub-heading overlay (centered).

3. Settings Controls (Sliders):

  • Ripple Intensity: Control the strength/amplitude of the distortion.
  • Speed: Control the animation speed of the ripples.

4. Style Controls:

  • Dimensions: Width and Height controls for the widget container (responsive).
  • Typography: Standard Elementor typography controls for the Title.
  • Colors: Color control for the Title text.

5. Technical Implementation:
Use Three.js (load from CDN) for the rendering.
Implement proper resizing logic to ensure the image covers the container aspect ratio (like CSS object-fit: cover) without distortion or cutting off.

  • Use standard Elementor widget structure (PHP class, render method, JS handler).
  • Ensure all assets (CSS/JS) are enqueued correctly and only when the widget is used.

  • Elementor
  • 1

Bouncing QR Code Widget

Create a custom Elementor widget called ‘Bouncing QR Code’ for a 404 page.
Concept:

  • A retro-inspired, physics-based animation (like the DVD bouncing logo).
  • The widget is a solid colored box that moves at a constant velocity across the viewport.
  • Inside this box, display a QR Code image centered with some padding.
  • The QR code must be clearly visible on top of the box’s background color (use an <img> tag, not a CSS mask).

Behavior:

  1. Movement: The box moves automatically. When it hits the browser edge (viewport boundary), it bounces off.
  2. Color Cycling: Every time the box hits a wall, its background color changes. Cycle through 5 user-defined colors.
  3. Corner Hit: If it hits a corner perfectly, trigger a visual ‘celebration’ effect (e.g., glow or shadow pulse).
  4. Resizing: Detect window resizing to keep the box inside the visible area.

Controls:

  • Content Tab:
  • QR Code Image upload.
  • Link URL (for the QR code anchor).
  • Style Tab:
  • Color Cycling: 5 color pickers for the bounce sequence.
  • Dimensions: Controls for Box Size and Internal Padding (to frame the QR code).
  • Physics: Sliders for Horizontal and Vertical velocity.

Technical Requirements:

  • Use requestAnimationFrame for smooth performance.
  • Pure JavaScript (no jQuery dependencies if possible, but Elementor handler structure is required).
  • Ensure the widget is responsive and touch-friendly.

  • Elementor

WooCommerce Orders dashboard widget

Create a custom WordPress Dashboard Widget called ‘Order Processing Monitor’.
Concept: A dedicated dashboard widget to monitor order statuses with a focus on identifying “Revenue at Risk” vs Success by calculating totals instead of just order counts.
Behavior:

  1. Time Range: Analyze orders from the last 7 days.
  2. Revenue Totals: Calculate the total dollar amount for:
  3. Completed (Completed + Processing)
  4. Pending Action (Pending + On-Hold)
  5. Revenue at Risk (Failed + Cancelled)
  6. Visuals: Display cards for each status with:
  7. An icon (Checkmark for success, Clock for pending, Warning for risk).
  8. The total revenue amount for that status.
  9. A progress bar showing the percentage of total revenue.
  10. Risk Alert: If “Revenue at Risk” > 0, style the card with a red background/border and bold red text to highlight the financial impact.
  11. Action Button: Include a “View At-Risk Orders” button that links to the order list filtered by failed,cancelled,pending,on-hold.

Technical Requirements:

  • Role: Only visible to users with manage_woocommerce capability.
  • Data Handling: Use wc_get_orders() and get_total() to sum revenue. Use wp_strip_all_tags( wc_price( ... ) ) to display currency values cleanly.
  • Caching: Cache the results for 5 minutes using a WordPress Transient for performance.
  • Styling: Use a modern card-based layout with a clean grid system.

  • WooCommerce

WooCommerce Inventory HUD

Create a custom WordPress Dashboard Widget called ‘Live Inventory HUD’.
Concept: A streamlined inventory monitor for WooCommerce that provides an instant view of stock levels and allows for a one-click live CSV export. It should prioritize “Low Stock” items to help with reordering.
Behavior:
Live Stock Monitoring: Display a table of all products (including variations) with their current stock quantity.
Low Stock Highlighting: Use a conditional check (e.g., if stock < 5) to highlight the row in red so I can see what’s running low immediately.
Instant CSV Export: Include a button that, when clicked, generates and downloads a CSV file containing: Product Name, SKU, Stock Level, and Price.
Real-time Refresh: Include a “Refresh” button that updates the data without refreshing the whole WordPress dashboard page.
Controls (The Widget UI):
Stock Threshold Slider: A simple setting to define what count qualifies as “Low Stock” (default to 5).
Search Bar: A small filter at the top to search the table by Product Name or SKU.
Export Button: A prominent “Export to CSV” button.
Technical Requirements:
Data Sourcing: Use wc_get_products() to pull the inventory data rather than raw SQL for better compatibility.
Hook: Register the widget via wp_add_dashboard_widget.
Export Logic: Use JavaScript (Blob or Data URI) to handle the CSV generation on the fly so it doesn’t strain the server.
Security: Ensure the widget is only visible to shop_manager or administrator roles.

  • WooCommerce

Visual tooltip widget

Create a tooltip widget that has a hover effect. Tooltip Design and Behavior Instructions Design Guidelines – Text: Display a paragraph designed in an elegant Serif font.
Specific Words: Certain words (such as names of places) should be highlighted with a light yellow background (Highlight).
Behavior: When the user hovers with the mouse over the highlighted word, a small image (Thumbnail) should appear.
Frame: The image should appear in a frame with Rounded corners.
Animation: The image should appear via a “Pop-up” or “Scale up” effect.

  • Elementor
  • 13

Inline product table

Create a WooCommerce product management dashboard for the WordPress admin. It should add a new menu page titled ‘Inline Products’ with a store icon. The UI must feature a searchable and sortable table of products with inline editing for prices and a modal window for viewing product descriptions. The design should be modern, using the Inter font and including fade-in animations.

  • WooCommerce
  • 1

Floating chat bubble

Build a floating chat bubble snippet that appears fixed in the bottom left or right corner of the website. When clicked, it opens a chat-style popup with a customizable header, welcome message, and clickable predefined FAQ questions (e.g., “What are your opening hours?”) that display prewritten answers in chat format, with optional typing animation. Include a dedicated WordPress admin settings page to enable/disable the widget, control position and offsets, customize colors and styling, manage and reorder predefined questions and answers, set fallback contact options, enable interaction logging or email/webhook notifications, and add custom CSS.

  • 3

Solar System Explorer widget

Create a Solar System Explorer widget featuring animated orbits for all eight planets, orbiting the Sun. Include smooth animations and allow users to customize each planet’s size, speed, color, and orbital distance directly from the widget settings

  • Elementor
  • 14

Admin Favorites

Create a PHP and JavaScript snippet to build a ‘Dynamic Admin Favorites’ system. It should function as follows:

The Menu: Add a top-level WP Admin menu item labeled ‘Favorites’.

The ‘Add’ Button: Use the admin_enqueue_scripts hook to inject a small ‘Add to Favorites’ button (using a star dashicon) next to the page title (the .wp-heading-inline or h1) on every admin page.

The Logic: When the star is clicked, use AJAX to save the current page’s URL and Title to the current user’s ‘user_meta’.

The Display: The ‘Favorites’ menu should dynamically list all saved pages as sub-menu items.

Management: Include a simple ‘Clear Favorites’ option at the bottom of the list.

Please ensure the code includes the necessary wp_ajax actions and uses get_user_meta to keep the favorites unique to each logged-in user.

  • 5