How to Match the Tracking Widget to Your WooCommerce Theme

You spent weeks picking the right theme, Astra, Flatsome, Storefront, Divi, whatever made your store look how you wanted. Then you add a tracking plugin and the tracking widget shows up looking like it belongs on a different website: mismatched fonts, clashing colours, a layout that breaks on mobile.

That mismatch is not inevitable. It happens when a plugin renders its own hardcoded markup instead of working through the display points your theme already controls.

Advanced Shipment Tracking Pro (AST PRO), our WooCommerce shipment tracking plugin, is built on native WooCommerce hooks plus a built-in tracking widget customiser, so tracking details render inside whatever theme your store runs, without theme-specific add-ons or custom CSS. This guide explains how that works and how to match the tracking display to your brand.

Why the tracking widget works across WooCommerce themes

1. It uses native WooCommerce hooks, not theme overrides
AST PRO hooks into standard WooCommerce display points, the order details page and the My Account orders table. Any theme built to WooCommerce standards respects those same hooks, so tracking info appears in the right place automatically rather than depending on per-theme code.

2. It inherits your theme’s typography and colours
The tracking widget pulls font and base styling from your active theme by default, so the shipment status, provider name, and tracking link read as a native part of your store instead of a bolted-on plugin.

3. It includes a built-in tracking widget customiser
AST PRO ships with a customiser so you can adjust status colours, labels, and layout without touching code, and preview changes live before publishing. For most stores the defaults already fit; the customiser is there when you want closer control.

4. It is mobile-responsive by default
The tracking display adapts to the breakpoints your theme already defines, so a customer checking an order on a phone sees a clean, readable widget rather than a squashed table.

5. It works inside your theme’s email styling
Shipment and tracking emails use the standard WooCommerce email templates your theme and email settings already control, so the “your order has shipped” message matches the rest of your store’s communication.

6. It does not fight page builders
Because AST PRO renders through WooCommerce template logic rather than injecting its own layout, it coexists with page builders like Elementor, Divi, and the native Gutenberg editor instead of competing with them for control of the page.

How the tracking widget fits common WooCommerce themes

Because AST PRO renders through standard WooCommerce hooks rather than theme-specific code, it displays correctly in any theme that follows WooCommerce template standards. That includes the most widely used themes:

Theme	Why it works
Storefront	WooCommerce’s own theme, full native hook support
Astra	Follows WooCommerce template standards
Flatsome	Renders through standard order and account hooks
Divi	Displays within Divi Builder layouts via WooCommerce hooks
OceanWP	Responsive across the theme’s breakpoints
Kadence	Inherits header and body typography
Blocksy	Compatible with block-based layouts

If your theme is built to WooCommerce standards (nearly all actively maintained ones are), AST PRO’s tracking display will render correctly in it, whether or not it appears in this list.

How to match the tracking display to your theme

Inheriting your theme’s fonts gets you most of the way. The customiser is what closes the last gap — accent colours, the tracker style, and the wording on the button. It is easy to miss because it does not sit where you would expect.

Where the customiser lives

Go to WooCommerce > Shipment Tracking > Settings, find the Order Statuses & Notifications panel, and click the gear icon next to the order status you want to style. That opens the customiser with a live preview and three panels down the left: Tracking Widget, Email Content and Display Options.

Because the widget renders in both the order emails and the customer’s My Account page, styling it once covers both.

Tracking Widget — the visual settings

Setting	What it changes
Tracker type	Progress bar, icons, or a single icon — the biggest visual decision, and the one that decides whether the widget reads as minimal or as a full status timeline
Background and border colours	Match your theme’s surface and accent
Border radius	Square it off or round it to match your theme’s cards
Tracking header text	Rename “Tracking Information”, or hide the header entirely
Additional text after header	A line of your own beneath the heading
Display shipment status section	Show or hide the “Shipped on…” status line
Hide shipping provider image	Drop the carrier logo — useful if you white-label your carriers

The tracking button

The button has its own settings: the label (default “Track Order”), size (normal or large), background and font colour, and corner radius. If your theme uses square buttons and a single brand colour, matching those four values is usually the difference between a widget that looks native and one that looks bolted on.

Content and display options

The Email Content panel controls the subject, heading, body message and the heading above the shipped items, and accepts placeholders so the copy stays personal: {customer_first_name}, {order_number}, {tracking_number}, {shipping_provider}, {shipping_date} and {shipping_method}, among others.

Display Options decides what data appears at all — product images, item prices, shipping address, billing address. Turning off prices and billing address is a common choice for stores that want the shipping email to read as a dispatch note rather than a second invoice.

Save from the button at the top left of the customiser. If you also style the surrounding email template, see how to customise your WooCommerce shipment email — and if you use Kadence, customising WooCommerce emails with Kadence Email Designer covers the template layer that sits underneath this widget.

Frequently asked questions about tracking widget compatibility

Does AST PRO work with any WooCommerce theme?
Yes, in practice, because AST PRO renders through standard WooCommerce hooks rather than theme-specific code. Any theme built to WooCommerce template standards, which includes essentially all actively maintained ones, displays the tracking widget correctly. Themes that heavily override WooCommerce templates in non-standard ways are the rare exception worth testing.

Will the tracking widget match my theme’s fonts and colours?
By default it inherits your active theme’s typography and base styling, so it looks native without any setup. If you want an exact brand match, the built-in customiser lets you set status colours, labels, and layout with a live preview, so you can align it to your theme’s accent colour and spacing.

Do I need custom CSS to make tracking look right?
Usually not. The widget inherits theme styling out of the box and the customiser handles most brand adjustments without code. Custom CSS is only needed for unusual layouts or very specific design requirements, not for standard theme compatibility.

Does AST PRO work with page builders like Elementor and Divi?
Yes. AST PRO renders through WooCommerce template logic rather than injecting its own layout, so it coexists with Elementor, Divi, and Gutenberg instead of competing with them. Tracking appears at the standard WooCommerce display points regardless of how you build the surrounding pages.

Is the tracking display mobile-responsive?
Yes. The widget adapts to the responsive breakpoints your theme already defines, so it stays clean and readable on phones and tablets. This matters because a large share of customers check order tracking on mobile, and a squashed tracking table is a common weakness in less carefully built plugins.

Conclusion

A tracking plugin should look like it was always part of your store. Because AST PRO works through native WooCommerce hooks and ships a built-in customiser, the tracking display matches your theme on day one, across desktop and mobile, without custom CSS or theme-specific add-ons.