Show FAQs on your site

Besides the FAQ page, you can show questions in any post or page. Signocore FAQ has two blocks, a shortcode and a widget, and it can add an FAQ tab to WooCommerce products.

Both blocks are in the Signocore category of the block inserter.

The FAQ Element block

The FAQ Element block holds a single question with its answer, written in the post itself. It is not connected to the questions under FAQ → All Questions.

1. Add the FAQ Element block where you want the question.
2. Type the question in the question field.
3. Write the answer below it. The answer can hold any blocks, such as paragraphs, lists and images.

On your site, the question shows as a heading with the answer below it, always open. Add one block per question.

With Signocore SEO Pro, the FAQ Element blocks in a post or page add FAQPage structured data with their questions to that page. Only blocks placed directly in the content count, not blocks inside a group, columns or another block. The FAQ List block, the shortcode and the widget add no structured data.

The FAQ List block

The FAQ List block shows questions from your FAQ, so an answer you update under FAQ → All Questions changes everywhere it is shown. The editor shows a live preview.

The block settings have two panels:

Leave both Categories and Specific questions empty to show every question: questions without a category first, then every category that has questions, in alphabetical order. The block also supports wide and full width alignment.

The accordion leaves out questions without an answer, and both layouts leave out questions protected by a password. A list of links fills as many columns as fit the space.

The shortcode

[signocore_faq]
[signocore_faq categories="12,15" layout="list" orderby="date"]
[signocore_faq questions="48,51,50" links="0"]

The shortcode shows the same lists as the FAQ List block. Use it in the classic editor, in a widget or in a theme template with do_shortcode().

Without categories and questions, the shortcode shows every question, grouped as in the block. To find an ID, hover over a category under FAQ → Categories or a question under FAQ → All Questions and look at the address of the edit link: the number after tag_ID= is the category ID, and the number after post= is the question ID.

The Recent FAQs widget

Add the Recent FAQs widget under Appearance → Widgets in themes that have widget areas. It lists your newest questions as links to their pages.

Link to a single answer

In an accordion, every question has an anchor made from its slug: #faq- followed by the question's slug. A link such as example.com/pricing/#faq-can-i-change-my-plan opens that answer and scrolls to it. This works for the FAQ List block, the shortcode and the FAQ page in the Accordion layout.

When a visitor opens a question, the address in the browser changes to its anchor, so the visitor can copy the link and share that exact answer. If the same question is shown twice on one page, the second copy gets -2 added to its anchor.

WooCommerce product FAQs

With WooCommerce active, products get an FAQ tab that shows questions as an accordion, with a "Go to question" link below each answer. There are two ways to fill it:

1. Hand-picked questions. On the product edit screen, use the FAQ box in the sidebar to search for and select questions, then update the product. They are shown in alphabetical order.
2. Tag matching. When you pick no questions, the tab shows up to 10 questions whose tags match the product tags, sorted from A to Z. A product tag matches a question tag with the same slug, so a product tagged "shipping" shows the questions tagged "shipping".

The tab appears only when there is at least one published question to show. Turn it off for the whole shop with Product FAQ in the Related Content card under FAQ → Settings.

For developers

Signocore FAQ has no hooks of its own. To change the shortcode's defaults, use the WordPress core filter shortcode_atts_signocore_faq, which runs for every [signocore_faq] shortcode:

add_filter('shortcode_atts_signocore_faq', function (array $out, array $pairs, array $atts): array {
    // Show a list of links unless the shortcode sets a layout itself.
    if (!isset($atts['layout'])) {
        $out['layout'] = 'list';
    }

    return $out;
}, 10, 3);

The stylesheet uses currentColor for lines and tints, so it follows the theme's text color. Set --signocore-faq-accent to color links and hover states; without it they use the text color:

:root {
    --signocore-faq-accent: #0a6c74;
}