How to Add Confetti to Your WooCommerce Page
Adding Confetti animation to WooCommerce is really easy!
No coding skills required. Simply follow these steps and you're good to go.
First Create the Confetti Animation
Step 0: Create a custom Confetti animation and generate the code to install on your website by visiting ConfettiPage.com.
Step 1: Click the black button that says “Copy Code”.
Step 2: On WooCommerce go to the desired page you want the confetti to be in.
Quick tip: It is recommended to put the confetti animation in the thank you page, to celebrate with your visitor for taking action (signing up, purchase etc).
Then Install the Confetti Code on your Chosen Page
Step 2: In WordPress, go to plugins, click on add new, and search for WordPress code (WPCode)
Step 3: Install and activate it and once it's activated, you’re going to be able to see the plugin.
Step 4: On the left side panel, below “Plugins” click on “Installed Plugins” so you can see the WPCode you activated. Click on code snippets.
Step 5: Once inside, Click "Add New".
Step 6: Click on "Add Your Custom Code" then "Use Snippet"
Step 7: Inside "Create Custom Snippet", under "Code Preview", you need to paste in the actual confetti code.
Step 8: Scroll down a little bit until “Smart Conditional Logic”. Turn on "Enable Logic", and click on "Add New Group".
Step 9: Choose "page URL", and "Contains", then type in "order-received".
Step 10: Scroll back up then give a name to the code. Leave it as "HTML Snippet".
Step 11: Once done, click on "Save Snippet".
Step 12: Activate it then click on "Update".
Step 13: On the left side panel, click “Products”, and "All products" then test it by clicking on "View".
Step 14: Click on "Add to cart".
Step 15: Then, click on "View Cart".
Step 16: Next, click on the "Proceed to checkout" button.
Step 17: Now, place your order.
If you did all the steps above correctly, the Confetti code will work. Congratulations!
Optional: Remove the Watermark
If you are using the free version, you will see the “ConfettiPage.com” branding appear at the bottom left.
If you would like it removed, simply upgrade for a license to use it without the ConfettiPage branding.
Note: Once you pay for a license, you will need to create a new Confetti code as a paying customers which will generate a watermark-free code for you to install.