How to Add Shortcode in WordPress Elementor

Last modified: June 22, 2026

Elementor

Elementor has a dedicated Shortcode widget that makes it straightforward to add any WordPress shortcode to a page, post, or template. You can use it with shortcodes from contact form plugins, WooCommerce, gallery plugins, or any custom shortcode your theme or plugins register. This guide covers the full setup plus what to do when a shortcode shows as plain text instead of rendering correctly.

What You Need Before You Start

You do not need Elementor Pro to use the Shortcode widget. It is included in the free version of Elementor. What you do need is the plugin that registers the shortcode you want to use. That plugin must be installed and active before you drop the shortcode into Elementor; otherwise Elementor renders it as plain text instead of the intended output.

Find your shortcode in the plugin’s documentation or settings page. Most contact form plugins (Contact Form 7, WPForms, Gravity Forms) show the shortcode directly in the form editor. WooCommerce shortcodes such as [products], [woocommerce_cart], and [woocommerce_checkout] are listed in WooCommerce’s documentation. Custom shortcodes from your theme are typically in the theme’s knowledge base. If you need to add a formatted list to your page without a shortcode, you can use the Icon List widget to add bullet points in Elementor directly from the drag-and-drop panel.

Shortcode Widget vs HTML Widget

Elementor gives you two options for inserting shortcode output:

Shortcode widget: drag it in, paste your shortcode, done. The widget processes it through WordPress’s standard do_shortcode() function and renders the output directly. This handles 95% of shortcode use cases.
HTML widget: lets you combine a shortcode with raw HTML markup. Use this when you need to wrap the shortcode output inside a <div> with a custom class or add inline styles around the rendered output.

If your shortcode shows as plain text instead of the expected output, the issue is almost always one of three things: the plugin that registers it is not active, you copied the shortcode with a curly (smart) quote instead of a straight quote, or the shortcode is loading CSS or JavaScript that Elementor’s asset optimization is blocking. The steps below cover each of these scenarios.

* This button will show the rest of the post and open up an offer from a vendor

What is a Shortcode?

A shortcode is a small piece of code wrapped in square brackets, like

Error: Contact form not found.

or [products limit="4"], that tells WordPress to output a block of content or functionality at that location.

WordPress has a handful of built-in shortcodes (gallery, audio, caption, embed), but the most common use case is with plugins. Many popular plugins use shortcodes as their primary way to display content on your site:

Contact Form 7 / WPForms – paste the form shortcode wherever you want the form to appear
WooCommerce – [products], [cart], [checkout] display shop elements
Gallery plugins – insert a photo gallery into any page
Pricing table plugins – display tables created in the plugin admin

The shortcode itself is just a reference. The actual HTML is generated by the plugin or theme function it maps to. If you deactivate the plugin, the shortcode stops working and shows as plain text.

When to Use Shortcodes vs. Native Elementor Widgets

Elementor has native widgets for many common tasks: forms (via the Form widget in Pro), image galleries, buttons, and pricing tables. When a native widget exists, use it. It integrates with Elementor’s visual editor and avoids potential conflicts.

Shortcodes make sense when:

A plugin you’re already using generates content via shortcode and you need it on a specific Elementor page
You need the same element on many pages and want to update it centrally through the plugin’s admin screen rather than editing each page individually
The plugin doesn’t offer a dedicated Elementor widget and a shortcode is the only way to embed its output

The main limitation is that shortcodes look like plain text in the Elementor editor canvas until the page is previewed or published. Elementor’s live preview renders them correctly once you save and refresh, but you’re editing somewhat blind compared to native widgets.

If a plugin offers both a shortcode and a dedicated Elementor widget, always choose the widget. Widgets get the full visual editing experience; shortcodes are a workaround for plugins that haven’t built widget support yet.

How to Add a Shortcode in Elementor

Method 1: Elementor Shortcode Widget (most common)

Open the page or post you want to edit with the Elementor editor.
Click the + button to add a new section or widget area, or find an existing spot where you want the shortcode output.
In the Elementor widget panel on the left, search for Shortcode and drag the widget into place.
In the widget settings, paste your shortcode into the Enter your shortcode field. For example: Error: Contact form not found..
The preview panel on the right should update to show the rendered output. If it doesn’t update immediately, click the refresh icon or switch to Preview mode.
Click Update to publish the change.

Method 2: HTML Widget (for shortcodes that need wrapping markup)

If a shortcode doesn’t render correctly with the Shortcode widget, try the HTML widget instead. Drag it into place, and in the HTML field enter the shortcode wrapped in a paragraph tag: <p>[your-shortcode]</p>. Some plugin shortcodes need this to trigger proper rendering.

Where to find your shortcode

Most plugins that use shortcodes show the shortcode in their admin area. In WPForms you’ll see it listed next to each form name. In WooCommerce the shortcodes are documented in the plugin’s help pages. You can also check the plugin’s documentation for the exact syntax, since many shortcodes accept optional parameters like [products limit="4" columns="2"].

Troubleshooting

If the shortcode renders as plain text (shows

Error: Contact form not found.

on the live page instead of the form), the plugin that registers that shortcode is either not active, the ID is wrong, or the shortcode has a typo. Double-check that the plugin is installed and activated, and copy the shortcode directly from the plugin’s admin screen rather than typing it manually.

WooCommerce shortcodes like [products] sometimes render as blank on Elementor pages due to a missing loop context. If this happens, wrap it in a Shortcode widget and add class="woocommerce" to the section via the Advanced tab’s CSS classes field. This gives WooCommerce the styling context it needs.

Final Word: How to Add Shortcode in WordPress Elementor

The Elementor Shortcode widget handles the vast majority of plugin shortcodes without any fuss. Drag it in, paste, done. The only time you need to go further is when a shortcode renders as plain text, in which case the HTML widget or a quick check of the plugin’s status usually resolves it.

If you’re regularly using the same shortcode across multiple pages, consider building it into an Elementor template or global widget so you only need to maintain it in one place.

For cases where you need to add raw HTML, custom CSS, or JavaScript rather than a shortcode, the Elementor HTML widget handles that separately. See our guide on how to add code in Elementor for that workflow.

Recap: