All CommerceKit modules are compatible with Elementor Pro. Eight modules include dedicated Elementor widgets that you can drag directly into your templates.
The remaining modules attach to standard WooCommerce hooks and work automatically within any Elementor product page template.
Modules with dedicated Elementor widgets
These modules have their own widget in the Elementor editor, found under the CommerceKit widget category:
| Widget name | Module |
|---|---|
| CommerceKit Product Badges | Product Badges |
| CommerceKit Product Countdown | Countdown Timers |
| CommerceKit Checkout Countdown | Countdown Timers |
| CommerceKit Free Shipping Notification | Free Shipping Notification |
| CommerceKit Order Bump | Order Bumps |
| CommerceKit Product Gallery | Product Gallery |
| CommerceKit Size Guide | Size Guide |
| CommerceKit Stock Meter | Stock Meter |
| CommerceKit Wishlist | Wishlist |
Adding a widget to a product template
- Open your product page template in Elementor.
- Click the + icon to add a widget.
- Search for “CommerceKit” or browse to the CommerceKit category in the widget panel.
- Drag the widget into position in your template.
- Save and publish.
The widget will render using your CommerceKit module settings. No additional configuration is needed in Elementor Pro.
Modules that use WooCommerce hooks
The following modules output their content via standard WooCommerce action hooks and will work automatically in Elementor product templates that include the default WooCommerce product content area:
| Module | How it attaches |
|---|---|
| Attribute Swatches | Replaces variation dropdowns in the add-to-cart form |
| Product Badges | Hooks into the product card image on listings pages |
| Sticky Add to Cart Bar | Appends to the product page |
| Ajax Search | JavaScript-powered, attaches to the search input wherever it appears |
These modules do not require a dedicated widget. If your Elementor template uses the standard WooCommerce Product widget or includes the WooCommerce product content area, these modules will render automatically.
If a hook-based module is not appearing, it is likely because your Elementor template uses custom widgets that do not include the WooCommerce hook output. In that case:
- Attribute Swatches — use Elementor’s default WooCommerce Add to Cart widget, which includes the variation form
- Product Badges — use the WooCommerce Product Images widget
- Sticky Add to Cart Bar — the bar renders independently of templates and should appear on all product pages regardless
- Ajax Search — the module attaches to any standard search input; if using a custom search widget, check that it outputs a standard
<input type="search">element
Order Bumps with Elementor checkout
If you are using Elementor Pro to build a custom checkout page, enable Shortcode mode in CommerceKit → Order Bumps settings and place the [commercekit_orderbump] shortcode in your Elementor template where you want the bump to appear.
Wishlist shortcode alternative
If you need to place the Wishlist button in a specific location within an Elementor product template that the widget does not cover, you can use the shortcode [commercekit_wishlist] in an Elementor Shortcode widget.
Notes:
- CommerceKit widgets appear in Elementor’s widget panel only when the relevant module is enabled in CommerceKit settings.
- Widgets render a live preview in the Elementor editor where possible.
- All widgets belong to the CommerceKit category in the widget panel, making them easy to find.
