Overview
↑ Back to topCheckout Confetti adds a delightful confetti animation to your WooCommerce thank you page, celebrating successful orders with your customers. The plugin offers extensive customization options including color presets, animation physics, emoji support, and conditional triggers.
Installation
↑ Back to topTo start using a product from WooCommerce.com, you can use the “Add to store” functionality on the order confirmation page or the My subscriptions section in your account.
- Navigate to My subscriptions.
- Find the Add to store button next to the product you’re planning to install.
- Follow the instructions on the screen, and the product will be automatically added to your store.
Alternative options and more information at:
Managing WooCommerce.com subscriptions.
Requirements
↑ Back to top- WordPress 6.2 or higher
- WooCommerce 9.0 or higher
- PHP 7.4 or higher
Settings
↑ Back to topAccess settings at WooCommerce > Settings > Advanced > Checkout Confetti.
General Settings
↑ Back to top| Setting | Description | Default |
|---|---|---|
| Enable Confetti | Master toggle to enable/disable confetti on thank you page | Enabled |
| Trigger | When to start the confetti animation | Page Load |
| Start Delay | Delay in seconds before confetti starts (0-10) | 0 |
| Duration | How long confetti falls in seconds (1-30) | 1 |
| Recycle | Keep confetti pieces falling continuously | Disabled |
Conditions
↑ Back to topControl when confetti appears based on order criteria:
| Setting | Description | Default |
|---|---|---|
| Minimum Order Amount | Only show confetti for orders above this amount | Disabled |
| Amount Threshold | The minimum order value required | $50 |
| Customer Type | Show for all customers, new customers only, or returning customers only | All |
Appearance
↑ Back to topCustomize how the confetti looks:
| Setting | Description | Default |
|---|---|---|
| Number of Pieces | How many confetti pieces to display (50-500) | 200 |
| Color Preset | Choose from 15 pre-made color schemes | Default (Rainbow) |
| Custom Colors | Define your own colors when using custom preset | 8 colors |
| Opacity | Transparency of confetti pieces (0-100%) | 100% |
| Shape | Confetti shape: mixed, squares, or circles | Mixed |
| Piece Size Min | Minimum size of confetti pieces (1-20px) | 5px |
| Piece Size Max | Maximum size of confetti pieces (5-50px) | 15px |
Color Presets
- Default – Classic rainbow colors
- Party – Vibrant celebration colors
- Elegant – Gold, silver, and black
- Ocean – Blues and teals
- Sunset – Warm oranges and reds
- Forest – Greens and earth tones
- Candy – Pinks and pastels
- Neon – Bright fluorescent colors
- Autumn – Fall foliage colors
- Winter – Blues, whites, and silvers
- Spring – Fresh pastels
- Summer – Bright, sunny colors
- Valentine – Reds and pinks
- Halloween – Orange and black
- Christmas – Red, green, and gold
Emoji Mode
↑ Back to topReplace confetti shapes with emojis:
| Setting | Description | Default |
|---|---|---|
| Use Emojis | Enable emoji mode instead of shapes | Disabled |
| Emoji Preset | Choose from pre-made emoji sets | Celebration |
| Custom Emojis | Define your own emojis | Various |
| Emoji Size | Size of emojis in pixels (12-48px) | 24px |
Emoji Presets
- Celebration – Party emojis
- Hearts – Heart emojis
- Stars – Star emojis
- Nature – Nature emojis
- Food – Food emojis
- Custom – Define your own
Animation Physics
↑ Back to topFine-tune the confetti animation behavior:
| Setting | Description | Default |
|---|---|---|
| Gravity | How fast confetti falls (0.01-1) | 0.1 |
| Wind | Horizontal wind force (-1 to 1) | 0 |
| Friction | Air resistance (0.9-1) | 0.99 |
| Initial Velocity X | Horizontal spread speed (0-50) | 15 |
| Initial Velocity Y | Vertical launch speed (0-50) | 20 |
| Origin | Where confetti starts: center, left, right, or full width | Center |
| Tween Duration | Animation smoothness in frames (10-500) | 100 |
Advanced Settings
↑ Back to top| Setting | Description | Default |
|---|---|---|
| Debug Mode | Log confetti events to browser console | Disabled |
How It Works
↑ Back to top- When a customer completes an order, they are redirected to the thank you page
- The plugin checks if confetti is enabled and if conditions are met
- If conditions pass, confetti animates according to your settings
- The animation runs for the specified duration
Troubleshooting
↑ Back to topConfetti not showing
↑ Back to top- Verify confetti is enabled in settings
- Check if conditions (minimum amount, customer type) are blocking display
- Enable debug mode to see console logs
- Ensure no JavaScript errors on the page
- Check for theme or plugin conflicts
Confetti appears on wrong pages
↑ Back to topThe confetti only appears on the WooCommerce order received (thank you) page. If you see it elsewhere, please contact support.
Performance issues
↑ Back to top- Reduce the number of pieces
- Disable recycle mode
- Reduce duration
- Simplify colors (use fewer custom colors)
Frequently Asked Questions
↑ Back to topCan I preview the confetti without placing an order?
↑ Back to topEnable debug mode and visit any order received page. You can also use the live preview in the settings panel.
Does this work with WooCommerce Blocks checkout?
↑ Back to topYes, Checkout Confetti is fully compatible with both the classic checkout and the new WooCommerce Blocks checkout.
Can I use my brand colors?
↑ Back to topYes! Select the “Custom” color preset and define up to 8 custom colors using the color picker.
Does this affect page load speed?
↑ Back to topThe confetti animation is loaded only on the thank you page and uses optimized JavaScript. Impact on page speed is minimal.
Can I show confetti only for high-value orders?
↑ Back to topYes, enable the “Minimum Order Amount” condition and set your threshold value.
