Skip to main content

WooCommerce Shortcode & 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.

Download the plugin from shopper-quiz.com/woocommerce. We are working on making it available directly from the WordPress plugin directory so you'll be able to search for and install it from within your WordPress admin without downloading a file.

Requirements:

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

To install:

  1. Download the .zip file from shopper-quiz.com/woocommerce
  2. In your WordPress admin, go to Plugins → Add New Plugin
  3. Click Upload Plugin at the top of the page
  4. Choose the .zip file you downloaded and click Install Now
  5. Once installed, click Activate Plugin

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.

Was this page helpful?