Elementor product customizer: build custom product pages

If your WooCommerce store runs on Elementor, you've probably built a product page, dropped in a shortcode for your product customizer, and then clicked Preview five times to check whether the parameters worked. It's slow, and it breaks the whole point of a visual page builder. Chamevo's Elementor product customizer integration fixes that: every Chamevo shortcode now shows up as its own Elementor widget, so you drag the product customizer onto the page and configure it in the panel instead of typing strings.

This guide covers what the Elementor product customizer integration does, which widgets you get, how to build a custom product page step by step, and the layout choices that matter once real shoppers (mostly on phones) start designing products. It's written for e-commerce merchants who sell personalized apparel, drinkware, signs, or print products on WooCommerce and want the page to look as good as the rest of their Elementor site.

Why an Elementor product customizer makes sense for WooCommerce stores

WordPress is the default platform for a huge share of online stores, and Elementor is how many of those stores get built. According to W3Techs, WordPress runs 40.2% of all websites as of September 2026. Elementor sits on 12.7% of all websites, and WooCommerce on 8.0%, which W3Techs also counts as 47.7% of the e-commerce systems it tracks.

The plugin directory tells the same story. The Elementor listing on WordPress.org shows more than 10 million active installations, and WooCommerce shows more than 7 million. If you sell on WooCommerce, there's a good chance your theme, header, and product templates already live in Elementor.

That's exactly where a product customizer used to feel bolted on. Your hero section, trust badges, and size guide were all visual blocks you could move around. The customizer was a line of shortcode text inside a text widget. You couldn't see it until you previewed, and changing its placement meant editing code-like syntax. For a store owner juggling orders, that friction adds up every time you launch a new product.

Putting the customizer into Elementor's own widget panel closes that gap. The product customizer becomes one more block in your layout, next to the product title, images, and price, and you manage it the same way you manage everything else on the page.

How the Elementor product customizer works in practice

Before this update, adding Chamevo to an Elementor page looked like this:

• Find the right shortcode in the documentation
• Copy the syntax by hand
• Paste it into a text widget
• Preview the page to check whether the parameters worked

Now you drag the Chamevo widget from the Elementor panel, adjust its settings visually, and you're done. The shortcode still exists, and it still works in any page builder, but Elementor users no longer have to touch it.

Why you see placeholders in the editor

Here's the one thing that surprises people: most Chamevo widgets appear as placeholder elements in Elementor's editor instead of rendering the full interface. That's deliberate. A product customizer with real-time previews, image uploads, and 3D visualization is resource-heavy, and loading all of it inside the editor would slow page building to a crawl.

You'll see the working customizer when you preview or publish the page. Think of how a video embed shows a thumbnail in the editor and plays the full video on the live site. Same idea.

Styling the widgets to match your theme

Each widget includes Elementor's native styling controls plus Chamevo's own styling options. That gives you detailed control over colors, spacing, button styles, and layout, including the number of columns used to arrange items in a grid or list. The result is an Elementor product customizer that looks like part of your store, not a third-party box dropped into the middle of it.

Chamevo doesn't need any other plugins to run with Elementor. You can still extend your store with additional plugins if you want to, for example a forms plugin, which the Gravity Forms widget below connects to.

The Chamevo widgets available in Elementor

These are the Elementor product customizer widgets you can drag into any layout. You can use the main customizer widget on its own, or split the interface across your page with the supporting widgets.

• Chamevo widget: the main product customizer, which displays the full Chamevo interface for personalizing a product.
• Chamevo form widget: a customizable form for collecting shopper input related to the product configuration.
• Chamevo module widget: renders individual Chamevo modules so you can place them independently in the page layout.
• Chamevo action widget: action buttons such as Save Design and other product-related actions.
• Chamevo main bar widget: the main toolbar and navigation bar of the customizer interface.
• Chamevo share widget: lets shoppers share their customized designs on social media or other channels.
• Chamevo color selection widget: a color picker for choosing and customizing product colors.
• Chamevo saved products widget: a list or gallery of designs a shopper has saved earlier.
• Chamevo bulk add form widget: adds multiple product variations or configurations in one go through a form.
• Chamevo 3D preview widget: an interactive 3D visualization of the customized product.
• Chamevo Gravity Forms widget: connects Gravity Forms to the product customizer for more advanced form handling.
• Cart widget: lets shoppers add their customized product straight to the cart from the product page.

Splitting the interface is where Elementor gets interesting. You could put the 3D preview widget in a wide left column, stack the color selection and action widgets in a narrow right column, and place the cart widget right under the price. On a team jersey page, the bulk add form widget can sit below the design area so a coach orders 15 names and numbers in one pass. If you're new to 3D, our WooCommerce 3D product customizer setup guide walks through preparing the product first.

How to build a custom product page with the Elementor product customizer

Here's the workflow we recommend for a first product. It assumes WooCommerce, Elementor, and the Chamevo plugin are already installed.

1. Set up the product in Chamevo first. Create the product template with its views (front, back, sleeve), then define where shoppers can add text, upload images, or pick colors. Set print areas, bleed zones, and resolution requirements here, because this is what controls your production output.
2. Pick your page or template in Elementor. For a single landing page, edit a regular page. To change how WooCommerce product pages look across the store, you'll need Elementor Pro, which lets you visually edit and override the default WooCommerce product templates. Elementor documents this in its WooCommerce builder pages.
3. Start from a template or a blank canvas. A prebuilt layout is faster. A blank page gives you full control. Either way, keep the product title, featured image, price, and category visible near the top.
4. Drag in the Chamevo widget. Find it in the Elementor panel, drop it where the customizer should appear, and configure it in the panel. Expect a placeholder in the editor.
5. Add the supporting widgets you need. The 3D preview widget for drinkware or phone cases, a color selection widget for apparel, the cart widget near the price, and the action widget if shoppers should be able to save designs.
6. Style everything to match your theme. Use Elementor's controls and Chamevo's styling options for colors, spacing, buttons, and columns.
7. Preview, then test on a real phone. The live preview is where the customizer actually renders, so check it at full size and on mobile before you publish.
8. Place one test order and open the file. Design something, check out, and look at the print-ready file your production team would receive. That's the only test that proves the whole flow works.

Step eight gets skipped more than any other. A page can look perfect and still send your printer a file with the design sitting outside the safe area. Our guide to print-ready file export for WooCommerce explains what to check in that first file.

When to use the shortcode instead

The shortcode isn't going away. It's still the right choice if part of your site runs on another builder, or if a developer wants to place the customizer inside a custom template. Chamevo's shortcode works with Elementor, WPBakery, Divi, Beaver Builder, and the Gutenberg block editor, and you can show the customizer inline, in a modal, or as a full page. The WordPress product customizer page covers those display modes and the standalone setup without WooCommerce.

Design choices that make custom product pages convert

A drag-and-drop Elementor product customizer makes the page easier to build. It doesn't make it sell. These are the layout decisions that matter most once real shoppers show up.

Design for the phone first

Across Chamevo stores, 70% to 80% of shoppers arrive on a phone. Build the mobile layout first in Elementor's responsive mode, then scale up. Keep the customizer high on the page, give the design area the full screen width, and move long product descriptions below it. If shoppers have to scroll past three paragraphs to reach the customizer, many won't.

Put the preview where eyes land

The preview is what sells a personalized product. It's the moment a shopper sees their kid's name on the mug. Give it the most space on desktop and the first screen on mobile. For products where depth matters, such as tumblers, phone cases, or signs, the 3D preview widget earns its place. Chamevo stores report up to 30% higher conversion rates from 3D product previews, according to our WooCommerce integration page.

Keep options, price, and the cart button together

Shoppers want to see what their choices cost as they make them. Place the color selection widget, the price, and the cart widget in one column so nobody has to hunt for the button after finishing a design. If you charge extra for back prints or premium materials, dynamic pricing rules update the price in real time based on those choices.

Use social proof, but don't bury the customizer

Reviews and ratings next to the options build trust, and Elementor makes them easy to add. Just keep them below or beside the customizer, not above it. The same goes for countdown timers or quick-view elements: helpful for a sale, distracting if they push the design area off the first screen. For more layout pitfalls, see seven customizable product mistakes that cost sales.

Measure, then adjust

After launch, watch where shoppers drop off. If people start designs but don't add to cart, move the cart widget closer to the preview. If mobile bounce is high, simplify the first screen. Our best practices for selling customizable products cover the metrics worth tracking.

Frequently asked questions

Does Chamevo work with Elementor?

Yes. Every Chamevo shortcode is available as a dedicated Elementor widget, so the Elementor product customizer works like any other block. Drag the main customizer, 3D preview, color selection, action buttons, and cart widget into any layout. The shortcode also still works if you prefer it.

Do I need Elementor Pro to use the Chamevo widgets?

You can place Chamevo widgets on Elementor pages you build. To visually edit and override the default WooCommerce product templates across your whole store, you need Elementor Pro and its WooCommerce builder.

Why does the customizer look like a placeholder in the Elementor editor?

That's intentional. The full product customizer is resource-heavy, so most widgets show a placeholder in the editor to keep page building fast. The complete interface loads when you preview or publish the page.

Can I use Chamevo with Elementor on WordPress without WooCommerce?

Yes. Chamevo also works as a standalone WordPress plugin. You embed the customizer on any page or post, and orders and files are managed through Chamevo's dashboard, webhooks, or REST API.

Does the Elementor layout change my print-ready files?

No. The page layout only controls what shoppers see. Print-ready files come from each product's print areas, bleed zones, resolution requirements, and print profile, and Chamevo exports them as PDF, PNG, JPEG, or SVG.

How much does Chamevo cost for a WooCommerce store?

WooCommerce plans start at $29 a month for 50 orders on Starter. Growth costs $89 a month for 250 orders and adds 3D visualization. Every plan includes unlimited products, no transaction fees, and a 14-day free trial.

Build your first custom product page with Elementor

An Elementor product customizer turns the most important block on your product page into something you can see, move, and style like everything else on your site. Here's what to take away:

• Chamevo's shortcodes are now Elementor widgets, so you build custom product pages by drag and drop.
• Twelve widgets let you split the interface, from the main customizer and 3D preview to color selection, saved designs, and the cart.
• Placeholders in the editor are normal. Test in preview and on a real phone.
• Your layout never touches production. Print areas, bleed zones, and print profiles decide what the printer receives.
• Place one test order before launch and check the file.

If you're moving over from the old plugin, our Fancy Product Designer to Chamevo transition guide covers the migration. Ready to build? Add Chamevo to WooCommerce and start your 14-day free trial, then drag the customizer into your first Elementor page today.