How to Add an Animated Number Counter to WordPress (Without Code) 

Want to show off your stats, milestones, or achievements in a more eye-catching way?

With an animated number counter, you can highlight things like total customers, email subscribers, or years in business, and catch your visitors’ attention as the numbers count up in real-time.

In this guide, I’ll show you how to add an animated number counter in WordPress using two tools that don’t require any code.

What Are Animated Number Counters?

An animated number counter is a visual effect where a number counts up (or down) in real time, typically to highlight stats like total customers, projects completed, or years in business.

You’ve probably seen this counter animation on business and agency websites, right alongside trust signals like testimonials and case studies.

Studies on attention and web design consistently show that movement draws the eye. A stat counter that animates into view gets noticed in a way a static number simply does not. That’s the difference between “2,400 customers” sitting on the page and watching it count up live.

Here are a few examples of number animations you can use:

• Show the number of customers you’ve helped
• Highlight how many projects you’ve finished
• Display your total email subscribers
• Celebrate years in business or awards earned

Used well, a WordPress stat block showing your real numbers acts like a quiet signal: “This business knows what it’s doing.”

Which Method Should You Use?

Both methods below add animated counting animations to your site without code. Here’s how to choose:

Method	Best For	Customization
SeedProd Counter block	Building a new page or theme and want full visual control over fonts, colors, spacing, and mobile layout	Full visual control, advanced styling, no code
Counter Number plugin	Keeping your existing theme and just need to drop a simple stat counter in with a shortcode	Basic styling, shortcode-based

1. Add Number Count Animations with SeedProd

For the first method, I’ll show you how to add animated number counters to your WordPress site using SeedProd.

SeedProd is a drag-and-drop website builder for WordPress that lets you design full sites, landing pages, and custom themes without code.

You can add the Counter block to any page, landing page, or custom theme you build with SeedProd.

Full website kits and landing page templates get you to a finished design fast. Plus, you can customize any design visually with WordPress blocks like animated number counters, text animations, call-to-action buttons, responsive galleries, and 1-click customizations.

Step 1. Install and Activate SeedProd

First, go to the SeedProd pricing page and choose your plan. For this guide, I’ll use SeedProd Pro for its drag-and-drop WordPress Theme Builder.

Next, log into your account dashboard and click the Downloads tab. On this screen, click the Download SeedProd Plugin button, and copy your license key.

Now head to your WordPress website and upload the plugin .zip file. If you need help with this step, follow these instructions on installing and activating a WordPress plugin.

After installing and activating the plugin, go to SeedProd’s Settings and enter the license key you copied earlier.

Now click the Verify Key button to save your license details.

Step 2. Create a WordPress Layout

The next step involves creating a new layout in WordPress. You can do this with SeedProd by either building a new WordPress theme from scratch or creating a standalone landing page.

Both use SeedProd’s visual editor to customize your design. And you can use SeedProd’s Counter block on themes and landing pages.

To help you decide, think about what functionality you want your website to have.

The Theme Builder is an excellent choice for creating a complete custom website design from scratch without code.

However, if you want to keep your current WordPress theme and use SeedProd to build individual pages, the Landing Page Builder is your best solution.

Need a walkthrough? Follow one of these guides to get your layout set up, then come back to Step 3 to add the Counter block: How to Create a Custom WordPress Theme or How to Create a WordPress Landing Page.

Note: I’ll use the Theme Builder with the Headphone Shop website kit for this tutorial.

Step 3. Add the SeedProd Counter Block

The next step involves adding the Counter block to your landing page or WordPress theme design. So click Edit Design on the page you want to customize to open it in the visual editor.

Since I’m customizing a WordPress theme, I’ll start by editing the Homepage template:

When you open your design, you’ll see a layout similar to the following screenshot:

It will have blocks and sections on the left and a live preview of your page on the right-hand side.

You can click anywhere on your preview to edit the content and customize any of the template elements.

Adding new elements to your page takes a few seconds. Just drag from the left panel and drop it where you want it.

From the left-hand panel, search for the Counter block and drag it onto your WordPress design.

Once the block is in place, you can click it to see the different customization options.

With the Counter block, you can:

• Add a starting and ending count value
• Enter a number prefix and suffix
• Set the animation duration
• Choose a decimal or space separator
• Add a counter title
• Edit the alignment on mobile and desktop

Plus, clicking the Advanced tab offers even more settings for styling your counter. For instance, you can change the counter and title fonts and colors, add shadow effects, adjust the spacing, and select visibility options for mobile and desktop devices.

The best thing is it doesn’t require custom CSS, HTML, jQuery, or Javascript to get your counter looking exactly how you want. Point and click to style your number counter, and your stylesheet updates automatically.

Continue customizing your page until you’re happy with how everything looks. Then click the Save button in the top-right corner to save your customizations.

Step 4. Publish Your Animated Number Counters

After adding your animated number counters to your custom page and saving your changes, you’re ready to make it live for your website visitors.

If you’re creating a standalone landing page, click the down arrow on the Save button and select Publish. But if you’re using the Theme Builder, there’s one more step.

Exit the page builder by clicking the X icon, then from the theme builder dashboard, turn the Enable SeedProd Theme toggle to the “Yes” position.

That’s it! You can now preview your design to see your number counter animation in action:

The best place for a counting animation is just below your hero section or alongside a testimonials block, where social proof is most likely to tip a visitor into taking action.

A counter showing “2,400 customers served” next to a call-to-action button consistently outperforms that same CTA without it. Your numbers are already doing the work on your business, they just need to show up on the page.

2. Add Number Count Animations Using Counter Number

If you’d rather add a counter without a full website builder, there is another way to add number count animations to your site without writing code.

In that case, you can use a free WordPress number counter plugin like the Counter Number plugin from WPShopMart. It lets you add fully responsive counters to your website to display number statistics on posts, pages, and sidebar areas.

This method doesn’t include as many customization options as the previous one, but it’s an easy way to add a simple animated number counter to your website with a shortcode.

To get started, download, install, and activate the Counter Number plugin to your WordPress site.

Then go to Counter Numbers » All Counters from your WordPress admin area, and click the Add New Counter button.

On the next screen, you’ll see a simple drag-and-drop counter builder. So enter a title for your counter, then scroll down to the Add Counter Number section.

There are already 3 counters set up by default. Delete 2 of them by clicking the trashcan icon, then edit the remaining counter.

In the counter settings, you can add a title, select a counter icon, and enter a number value.

Then, on the right-hand side, you can change the following:

• Icon color and size
• Counter title color and size
• Counter number color, and size
• Font weights
• Font family

You can also hide the counter icon if you prefer. When you’re happy with how your counter looks, copy the shortcode, then click Publish.

Now you’re ready to add your counter to a post or page, so create or edit a WordPress page or post. Then, find the section of the page you want, and paste your shortcode directly into a new paragraph block.

Finally, click Update or Publish. When you preview your page, the number counter will automatically count up.

FAQs About WordPress Animated Number Counters

What plan do I need to use the Counter block in SeedProd?

The Counter block is a PRO block, available on SeedProd’s Plus, Pro, and Elite plans. The free version of SeedProd does not include the Counter block.

If you’re on the free plan and want animated stat counters, the Counter Number plugin (Method 2 above) is a solid free alternative.

Can I add an animated counter to any WordPress page or only landing pages?

With SeedProd, you can add the Counter block to any page type, including full WordPress theme templates, landing pages, coming soon pages, and custom 404 pages.

With the Counter Number plugin, you can add your counter to any post, page, or widget area using the shortcode it generates.

How do I make the number counter only animate when it scrolls into view?

SeedProd’s Counter block animates automatically when the block enters the viewport. There’s no extra setting to toggle. As soon as the section scrolls into view, the counting animation starts.

If your counter fires before it’s visible, it’s usually a caching plugin clearing the viewport trigger. Try clearing your site cache after publishing.

Does the animated counter work on mobile devices?

Yes. SeedProd’s Counter block is fully responsive. You can also set separate alignment options for mobile and desktop directly in the Counter block settings panel.

The Counter Number plugin is also described as fully responsive, though it offers fewer device-specific controls than SeedProd.

Can I use SeedProd’s Counter block without building a full theme?

Yes. The Counter block works on standalone SeedProd landing pages, so you don’t need to use the Theme Builder at all.

Create a new landing page in SeedProd, drag the Counter block onto the canvas, and publish. Your existing WordPress theme stays in place everywhere else on your site.

Your stats deserve more than a static number on the page. With either method above, you can have a working animated counter live in under 10 minutes.

Ready to create custom number counters without code?

You might also enjoy reading the following WordPress tutorials:

• How to Add Business Hours to WordPress
• How to Dim a Background Image Without CSS
• How to Add Twitter Widgets to Your WordPress Site
• How to Add Text Animations in WordPress
• Best WordPress Plugins for Business Websites

Thanks for reading! We’d love to hear your thoughts, so please feel free to join the conversation on YouTube, X and Facebook for more helpful advice and content to grow your business.