Popups are great for getting people to notice your site, promoting deals, and getting leads. You’re in luck if you have a WooCommerce store that uses the WoodMart theme. This theme has built-in support for beautiful, easy-to-set-up, and adaptable promo popups.
This full guide will show you how to make and change popups in your WooCommerce store with the WoodMart theme. We can help you with everything from promoting a seasonal sale to getting more people to visit certain products or growing your email list.
This article builds on the tutorial featured on our YouTube channel, Preet Tech Ideas, by providing additional insights, practical examples, and expert-recommended best practices to enhance your results.
🎬 See the video tutorial on how to add a promo popup to the WoodMart theme.
What You Will Need
Before we begin, please make sure you have:
- A WordPress site that has WooCommerce on it
- The WoodMart theme is active and licensed.
- Access to your WordPress dashboard as an admin
- A little originality for your pop-up content (don’t worry, we’ll help you with that too!)
Step 1: Turn on the Promo Popup Feature
- Open your WordPress Dashboard
- Go to General in Theme Settings.
- Find the Promo Popup by scrolling down.
- To enable it, toggle the switch.
- Click “Save Settings.”
This turns on the WoodMart theme’s built-in popup feature. If you don’t turn this on, your pop-up won’t show up, even if the content is available.
Advice:
By default, just one pop-up block will show at a time. If you want more than one pop-up (with distinct pages and triggers), you might wish to use sophisticated plugins or make your logic.
Step 2: Create the content for the pop-up
HTML Blocks are used by WoodMart to handle material that may be used again, like footers, popups, banners, and more.
- Click on HTML Blocks in the Dashboard.
- Click on Add New
- Name your popup something like “Summer Sale Popup.”
- Make your content with the built-in WordPress editor or WPBakery if you have it.
Your content can have:
- Headline (e.g., “Get 20% Off Today Only!”)
- Subheading
- Product images or banners
- Email subscription form (via shortcode like Mailchimp or Contact Form 7)
- Call-to-action button
HTML Example:
<div class="popup-offer"> <h2>Limited Time Offer!</h2> <p>Subscribe now and get 10% off your first order.</p> [mailchimp_form_shortcode_here] </div>
Publish your HTML block when you’re done.
Step 3: Assign HTML Block to the Promo Popup
Go to Theme Settings > General > Promo Popup and:
- From the selection, pick the HTML block you just made.
- Styles can be customised by adding new classes.
- Set the time between actions, like 5 seconds after the website loads.
- Save the settings
Your pop-up is now online and ready to get people’s attention!
Step 4: Use Theme Settings to Customise Appearance
You may control the design of the pop-up with WoodMart:
- Color or picture in the background
- Padding and space
- Typography
- Colors and effects when you hover over buttons
You can change these settings in the Theme Settings > Styling menu or in the HTML Block editor itself.
Want more complex layouts or animations?
Add responsive and dynamic rows, columns, and elements with WPBakery.
Tip for Responsive Design:
Always check out your pop-up on a mobile device. Check that the writing isn’t too small, the buttons are easy to tap, and nothing gets chopped off.
Step 5: Decide When the Popup Shows Up
You can choose:
- When the page loads, it will automatically display after a latency of 3–5 seconds.
- Triggering manually with a custom button (you need to add a class or script)
- Display just on certain pages (like the homepage or product pages)
You might need extra plugins or custom JavaScript for advanced events like exit-intent, scroll-depth, or cart abandonment.
Step 6: Test and Improve
Before you go live:
- Try out your pop-up in incognito mode to see how it works for a new user.
- Try it on your phone, tablet, and computer.
- Make sure it works with several browsers, such as Chrome, Safari, and Firefox.
Tips for Optimization:
- Test A/B headlines and call-to-action buttons
- Use a sense of urgency, like countdown timers.
- Make the content short and useful.
- Don’t show the pop-up too often, or users will get annoyed.
💡 Is your pop-up not showing up? Read our other article, “WoodMart Popup Not Working?” Quick SEO Fix 2025 for typical problems and step-by-step solutions.
Bonus: Use Popups for More Than Sales
Not all pop-ups are for sales. You can also use them to:
- Make an announcement regarding store updates or events.
- Give away free manuals and eBooks as lead magnets.
- Remind people about their empty carts
- Encourage people to download apps or use social media.
Be imaginative, and always think about what the user wants.
Need some help? Call Preet Web Vision
We’ve helped many of WooCommerce store owners make their websites better, add interesting popups, and boost sales.
- Custom popup design
- Advanced trigger setup
- Conversion tracking & analytics
- Multilingual popups
- Mobile optimization
📞 Phone: +63-9633112000
✉️ Email: hello@preetwebvision.com
🌐 Website: Preet Web Vision
More Tutorials? Subscribe to Our YouTube Channels!
If you phttps://preetwebvision.comrefer learning by watching, check out our channels:
🎥 Preet Tech Ideas (English) – Tutorials on SEO, WordPress, digital marketing
🎥 Preet WebXP (Hindi) – Hindi language guides and walkthroughs for web design and ecommerce
Don’t forget to like and subscribe for updates!
Last Thoughts
Pop-ups can be unpleasant or very useful. The way you use them is what makes them different. You can make popups that help your business without damaging the user experience using the WoodMart theme and some imagination.
Follow best practices, constantly trying new things, and don’t be afraid to ask for help when you need it. We’re here to help you every step of the way.
Thanks for taking the time to read!
Do you have any queries or advice of your own? Leave a comment below or send this post to a friend who is setting up their WooCommerce store.