How to Add Shortcode in WordPress Elementor

Last modified: August 23, 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, the difference between the Shortcode widget and the HTML widget, and 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. Here is where common plugins show their shortcodes:

Contact Form 7: Each form has its shortcode displayed in the form editor. Click a form under Contact > Contact Forms and copy the Error: Contact form not found. shortcode shown at the top.
WPForms: The shortcode is listed next to each form name on the WPForms > All Forms screen.
Gravity Forms: Shows the shortcode in the form editor. It looks like [gravityform id="1" title="true"].
WooCommerce: Shortcodes like [products], [woocommerce_cart], and [woocommerce_checkout] are documented in WooCommerce’s help pages.
Gallery plugins (NextGEN, Envira): The gallery shortcode is shown in the gallery editor after you create a gallery.

Most shortcodes accept parameters that customize the output. For example, [products limit="4" columns="2" category="clothing"] shows 4 products in 2 columns from the clothing category. Check the plugin’s documentation for available parameters — they vary significantly between plugins.

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, add inline styles around the rendered output, or when the Shortcode widget fails to render a specific shortcode correctly.

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 detailed troubleshooting steps below cover each of these scenarios.

Note on Elementor’s live preview: Shortcodes typically look like plain text in the Elementor editor canvas itself. They render correctly in the preview and on the published page. This is expected behavior, not a rendering failure — do not assume a shortcode is broken just because the editor canvas shows the shortcode text instead of the output.

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.

* 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" columns="2"], that tells WordPress to output a block of content or functionality at that location. When the page loads, WordPress replaces the shortcode with the actual HTML generated by the plugin or theme function it maps to.

WordPress has a handful of built-in shortcodes (, , , ), but most shortcodes come from plugins:

Contact forms: Contact Form 7 (Error: Contact form not found.), WPForms ([wpforms id="..."]), Gravity Forms ([gravityform id="..."])
WooCommerce: [products], [woocommerce_cart], [woocommerce_checkout], [woocommerce_my_account]
Gallery plugins: NextGEN Gallery ([ngg src="galleries"]), Envira Gallery ([envira-gallery id="..."])
Table plugins: TablePress ([table id="..."]), wpDataTables ([wpdatatable id="..."])

How to find any shortcode your plugins register: Many plugins list their available shortcodes in their documentation. If you cannot find it, go to Settings > Shortcodes (some plugins add this menu item), or check the plugin’s settings page — most show the shortcode next to each item they create (forms, galleries, tables). You can also install the “Shortcodes Reference” plugin temporarily to see every registered shortcode on your site in one list.

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. The Elementor Shortcode widget does not change this relationship — it calls the same WordPress do_shortcode() function that any other page would use.

When to Use Shortcodes vs. Native Elementor Widgets

Elementor has native widgets for many common tasks: forms (via the Form widget in Elementor Pro), image galleries (Gallery widget), buttons, pricing tables, tabs, accordions, and more. When a native widget exists, use it — it integrates with Elementor’s visual editor, you can style it with the visual controls, and it avoids potential CSS conflicts with shortcode-generated output.

Shortcodes make sense when:

A plugin you are already using generates content via shortcode and does not have a dedicated Elementor widget
You are using Elementor free (not Pro) and need a feature that Elementor Pro’s native widgets would cover, but you have a plugin that handles it via shortcode
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’s output is complex (a full WooCommerce product grid, a multi-step form) and a native widget equivalent would require rebuilding the functionality rather than just embedding it

Third option: plugin-specific Elementor addons

Many popular plugins have free Elementor addons that give you a proper visual widget instead of a shortcode. Before using the Shortcode widget, check whether your plugin has one:

Contact Form 7: “Contact Form 7 — Elementor” adds a dedicated CF7 widget
WooCommerce: The free “Essential Addons for Elementor” plugin includes WooCommerce product grid widgets that give you visual control without shortcodes
Gravity Forms: The Gravity Forms Elementor addon adds a native drag-and-drop form widget

If a polished widget addon exists, it is usually worth using over the generic Shortcode widget — you get visual editing and no shortcode syntax to remember.

The main limitation of shortcodes in Elementor: 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 are editing somewhat blind compared to native widgets. This is expected and not a rendering error.

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 updates when you save. If it doesn’t show the output immediately, click Preview Changes (the eye icon at the bottom left) — many shortcodes render correctly in the full preview but not in the live editor canvas.
Click Update to publish the change.

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

If a shortcode does not 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 or div tag:

<p>[your-shortcode]</p>
<!-- or -->
<div class="custom-class">[your-shortcode]</div>

Some plugin shortcodes need this wrapping to trigger proper rendering, particularly form plugins that expect to be inside a standard HTML block context.

Method 3: Reusing a shortcode across multiple pages with a Global Widget

If you need the same shortcode output on many Elementor pages, convert the Shortcode widget into an Elementor Global Widget instead of copy-pasting it everywhere:

Add the Shortcode widget to a page as in Method 1.
Right-click the widget (or use the widget’s three-dot menu) and choose Save as Global.
Give it a name (e.g., “Newsletter Signup Form”) and save.
On any other page, find your saved widget in the Global category in the widget panel and drag it in.

When you update the shortcode parameters in one place, the change applies everywhere the global widget is used. This is only available in Elementor Pro.

Troubleshooting: when a shortcode renders as plain text

If your page shows

Error: Contact form not found.

as visible text instead of a rendered form, work through these checks in order:

Plugin not active: The most common cause. Go to Plugins > Installed Plugins and confirm the plugin that registers your shortcode is active (not just installed). Deactivated plugins stop registering their shortcodes.
Wrong shortcode ID: Copy the shortcode directly from the plugin’s admin screen rather than typing it manually. A single wrong character or wrong ID number causes this. In Contact Form 7, click the form name and copy the shortcode from the top of the editor — do not type it from memory.
Smart/curly quotes: If you copied the shortcode from a PDF, Word document, or a website that uses typographic quotes, WordPress may not recognize the shortcode. Replace any curly quotes with straight quotes. The Elementor shortcode field may also auto-correct quotes.
WooCommerce products showing blank: WooCommerce shortcodes like [products] sometimes render blank on Elementor pages due to a missing loop context. Add the CSS class woocommerce to the section via the widget’s Advanced > CSS Classes field. This gives WooCommerce the styling context it needs to render the product grid correctly.
Elementor asset optimization blocking plugin scripts: If a shortcode relies on its plugin’s CSS or JS file, and Elementor’s asset loading optimization strips that file, the shortcode output may render broken or blank. Go to Elementor > Settings > Performance > Assets Loading Optimization and try disabling it temporarily to test if this is the cause.
Caching: If you just activated the plugin or changed the shortcode and the page still shows old output (or no output), clear your site’s cache. Go to your caching plugin settings (WP Rocket, W3 Total Cache, etc.) and purge all caches, then reload the page in a private browser window.

Where to find your shortcode:

Most plugins that use shortcodes show the shortcode in their admin area. In WPForms you will see it listed next to each form name. In WooCommerce the shortcodes are documented in the plugin’s help pages. In Contact Form 7, the shortcode is shown in the form editor at the top. For plugins where you cannot find the shortcode, check the plugin’s documentation page or search for “[plugin name] shortcode” — every major plugin that uses shortcodes documents them.

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 checks above (plugin active, correct ID, straight quotes, clear cache) resolve it in nearly every case.

If you are regularly using the same shortcode across multiple pages, save it as an Elementor Global Widget (Elementor Pro) so you only maintain it in one place. A change to the global widget updates every page that uses it simultaneously.

For shortcodes in Elementor’s Theme Builder (header, footer, single post, archive templates), the Shortcode widget works exactly the same way — drag it into the template, paste the shortcode, update. This is a useful approach for adding plugin content (a newsletter signup, a WooCommerce mini-cart, a language switcher) to your header template without needing a Pro widget. Elementor popup templates work the same way.

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 view and edit Elementor CSS for that workflow.

Recap: