WooCommerce Shortcode & Block

Add the quiz to any WordPress page with the shortcode or the Gutenberg block.

ShopperQuiz embeds on WordPress via a shortcode or a Gutenberg block. Both achieve the same result — the quiz widget renders on any page or post you choose. Pick whichever method matches how you build pages on your site.

Installing the ShopperQuiz plugin

The ShopperQuiz shortcode and Gutenberg block both require the ShopperQuiz WordPress plugin to be installed and active on your site. The plugin is what loads the quiz widget on your storefront — without it, neither the shortcode nor the block will render anything.

The plugin is available on the WordPress Plugin Directory — you can install it directly from your WordPress admin without downloading any files.

Requirements:

• WordPress 5.8 or higher
• PHP 7.4 or higher
• WooCommerce 6.0 or higher

To install:

1. In your WordPress admin, go to Plugins → Add New Plugin
2. Search for ShopperQuiz
3. Click Install Now, then Activate Plugin

Alternatively, you can download it directly from wordpress.org/plugins/shopperquiz.

The ShopperQuiz plugin is now active. The shortcode and Gutenberg block are both available immediately — no additional configuration needed in WordPress.

Why the quiz needs its own page

The ShopperQuiz widget is a complete standalone experience — it includes a welcome screen, all your questions, and a results screen with product recommendations and cart buttons. When placed on a page, it takes over the full content area and covers everything on that page.

Placing it on an existing page like your homepage, a product page, or a category page means the quiz will cover all the content on that page. A dedicated page — something like /quiz or /hair-discovery-quiz — gives the widget the space it's designed for and gives shoppers a clean, focused experience with nothing underneath.

A dedicated page also gives you a shareable link you can promote anywhere: email campaigns, social media, a homepage banner, or a product page button.

Step 1 — Get your Quiz ID

Open your quiz in the Quiz Builder and click Quiz Settings at the top of the left panel. Your Quiz ID is shown at the top — click Copy to copy it to your clipboard. It's also visible in the URL while you're on the Quiz Builder page.

Step 2 — Create a page for your quiz

In your WordPress admin, go to Pages → Add New. Give the page a title like "Hair Discovery Quiz" or "Find Your Products". You'll add the quiz embed in the next step — you don't need to add any other content.

Option A — Shortcode

In the WordPress page editor, add a Shortcode block and paste the following:

[shopperquiz id="YOUR_QUIZ_ID"]

Replace YOUR_QUIZ_ID with the ID you copied. Publish the page — the quiz will render wherever the shortcode is placed.

The shortcode also works in most page builders that support shortcodes — Elementor, Divi, Beaver Builder, and others. Paste it into a shortcode widget or text element and the quiz will render there.

Option B — Gutenberg block

If you use the WordPress block editor, click the + button to add a new block, search for ShopperQuiz, and select it. In the block settings panel on the right, paste your Quiz ID. Publish the page and the quiz will be live.

Linking to the quiz

Once embedded, the quiz page is a regular WordPress page with its own URL. You can link to it from anywhere on your site — a button on your homepage, a banner, a product page, an email, or your site navigation. There's no requirement to add it to your navigation menu — it's just another page link you can place wherever makes sense for your store.

To add it to your WordPress navigation menu go to Appearance → Menus, find your main menu, add the quiz page, and save.

What happens when a shopper exits the quiz

When a shopper clicks the close button inside the quiz widget, they are taken back to the previous page they were on before arriving at the quiz. If they came directly from an external link such as an email or social media post, closing the quiz takes them to the page before that in their browser history — typically your homepage or wherever they were before clicking the link.

Keeping the quiz up to date

Once the shortcode or block is placed, you don't need to touch the page again. Any changes you make to the quiz content, questions, or styling in your ShopperQuiz dashboard appear on the storefront automatically. The shortcode and block only store the Quiz ID — everything else is loaded live from ShopperQuiz.

The quiz isn't showing

• Is the quiz Live? Only quizzes with the status Live load on your site. Draft and Paused quizzes don't appear.
• Is the plugin active? Check Plugins in WordPress: the ShopperQuiz plugin must be installed and activated.
• Is the shortcode exact? It must be [shopperquiz id="YOUR_QUIZ_ID"] with your real Quiz ID from Quiz Settings.
• "Quiz unavailable — monthly limit"? Your store reached its plan's monthly response limit. See Plans & Pricing.