Authoring FAQs

This page covers writing FAQs and exactly how they behave on the product page.

Add FAQs to a product

1. Open the product in the editor.
2. In the Product data panel, open the FAQs tab.
3. Click Add question to add a row. Type the question in the top field and the answer in the textarea below it.
4. Repeat for each question. Use the × button on a row to remove it.
5. Update the product.

Questions appear on the storefront in the order you list them, there is no drag-to-reorder; arrange them by editing the rows. A row is saved only when both the question and answer are filled in. Blank rows (or rows with only one field) are dropped on save, so you can leave a half-typed row and it simply will not persist. If every row is empty, the FAQ meta is removed from the product entirely.

The repeater works without JavaScript: existing rows render server-side and stay editable, and “Add question” clones a hidden template row when JS is available.

HTML allowed in answers

Questions are plain text. Answers accept basic HTML, filtered with wp_kses_post, the same safe subset WordPress allows in post content: links, lists, <strong>/<em>, blockquotes and similar. Scripts and other unsafe markup are stripped, twice: once when you save, and again when the answer is output. On the storefront the answer is also passed through wpautop, so plain line breaks become paragraphs.

What renders, and where

When the product page loads, Answers reads the product’s FAQ items and:

• registers a FAQs product-information tab (priority 25, between Description and Reviews, or your custom tab title),
• renders an accordion inside that tab,
• enqueues the FAQ CSS and JS, but only on single product pages, and only when the product has at least one usable FAQ.

A product with no FAQs gets no tab and loads nothing. Duplicate questions are collapsed: items are de-duplicated by question text (case-insensitive), so the same question listed twice appears once. A maximum of 50 items is rendered per product.

Accordion behaviour

Each FAQ is an <h3> containing a <button> that controls a region panel:

• Clicking the button (or pressing Space/Enter while it is focused, native to <button>) toggles the panel. aria-expanded is kept in sync and the panel uses the hidden attribute when closed.
• Each panel is a role="region" labelled by its button via aria-labelledby, so screen-reader users can navigate to it and hear which question it belongs to.
• The focused button shows a visible focus-visible ring.
• Panels animate open/closed with a height transition; under prefers-reduced-motion they snap instead.

Each question toggles independently, opening one does not close the others. Tab moves between the question buttons in document order; there is no arrow-key roving within the group (these are independent disclosure buttons, not a radio group).

With JavaScript disabled the markup is still valid: the answer text is reachable and the page is not broken, panels are simply collapsed.

Verify it

1. Open a product with FAQs and click the FAQs tab, the accordion should render.
2. Tab to a question and press Enter; it should expand and the button’s aria-expanded should read true.
3. Open a product with no FAQs and confirm there is no FAQs tab and no extra CSS/JS request.

Extending the output (developers)

This release registers no merchant- or developer-facing filters or actions on the FAQ markup, and no shortcode. To customise the accordion you have two supported routes: override the --answers-* CSS custom properties from your theme (Configuration), or restyle the .answers-faq* classes. The markup is rendered inline by the plugin; there is no theme template file to copy.