Documentation / Customisation
Shortcodes
Superfunky shortcodes place application screens and data-driven components inside WordPress content. WordPress validates their attributes and emits safe component markers; the React storefront renders the final interface.
Use the Shortcode block or enter a shortcode in a supported content field:
[hero title="New season" variant="split" image="https://backend.example.com/wp-content/uploads/hero.jpg" primary_cta_label="Shop now" primary_cta_href="/shop"]Rules
- Use the documented attribute names with underscores.
- Attribute names and enum values are case-sensitive.
- Quote values containing spaces, commas, pipes, or URLs.
- Use
trueorfalsefor booleans. - Comma-separated fields accept values such as
sale,new. - Pipe-separated fields accept values such as
First title|Second title. - Dates use
YYYY-MM-DD. - Invalid enum values fall back to the documented default.
- Numbers are clamped to their supported range.
- Invalid dates and URLs are removed.
- Unsupported shortcode markers display a visible warning instead of failing silently.
The WordPress schema is the public contract. Do not rely on an attribute merely because an internal frontend component happens to accept it.
In documentation or instructional content, always put shortcode text inside inline code backticks or a fenced code block. The documentation publisher stores the brackets as HTML entities inside <code> elements so WordPress displays the example instead of executing it. Plain shortcode text outside code formatting is treated as live content.
Application shortcodes
| Shortcode | Attributes and accepted values |
|---|---|
[funkycommerce_cart] | layout: classic or editorial; summary_position: sticky or static |
[funkycommerce_checkout] | mode: physical or digital; coupon_position: inline or top; payment_position: left or right; summary_position: sticky or static; hide_optional_billing_fields, hide_optional_shipping_fields, show_order_notes, show_terms, show_privacy, allow_guest_checkout: boolean |
[funkycommerce_wishlist] | card_variant: default, minimal, editorial, gallery, simple, variation, or expandable |
[funkycommerce_reading_list] | layout: cards or editorial-2col |
[funkycommerce_account] | default_tab: dashboard, orders, downloads, addresses, or community; tabs: a comma-separated subset in the required order |
[funkycommerce_auth] | mode: login, register, forgot-password, or combined; default_mode: login, register, or forgot-password; layout: split, centered, or image-bg |
Short aliases [cart], [checkout], and [account] are registered by the theme. WooCommerce content using [woocommerce_cart], [woocommerce_checkout], and [woocommerce_my_account] is recognised by the storefront too.
[funkycommerce_checkout mode="digital" coupon_position="top" payment_position="right" summary_position="static" hide_optional_shipping_fields="true"]Hero and taxonomy components
| Shortcode | Attributes and accepted values |
|---|---|
[hero] | variant: glow, fullbleed, split, minimal, strip; kicker, title, description, height; heading_level: h1–h6; image: URL; primary_cta_label, primary_cta_href, primary_cta_target, primary_cta_rel and secondary equivalents; shorthand pill, h1, h2, p, bgimg, cta1, cta2; h2 supplies both heading text and an h2 element when h1 is absent; fullwidth: boolean |
[video-hero] | variant: glow, fullbleed, split, minimal, strip; src, poster: video/media URLs; kicker, title, description; primary and secondary CTA fields; align: left, center, right; height; overlay_opacity: 0-90; autoplay, loop, muted: boolean |
[categories] | type: product, post; layout: cards, compact, minimal, editorial, graphical, pills; columns: 2-4; limit: 1-24; offset: 0-1000000; include, title; orderby: name, count, include; order: asc, desc |
[tags] | layout: pills, cards, compact; limit: 1-100; offset: 0-1000000; include, title; orderby: name, count, include; order: asc, desc |
[product-tags] | Product-tag equivalent of [tags], with the same attributes and layouts. |
[authors] | layout: cards, compact; limit: 1-100; offset: 0-1000000; include, title; show_bio: boolean; min_posts: 0-1000000; orderby: name, post-count, include; order: asc, desc |
include accepts comma-separated IDs or slugs where applicable. CTA destinations can be a storefront path beginning with / or an absolute URL.
Sliders, carousels, and grids
| Shortcode | Attributes and accepted values |
|---|---|
[slider] | type: campaign (or cinematic), product, post; layout: 3/3, 2/3, 1/3; card_variant: supported card variant; slides: 1-12; limit: 1-48; offset: 0-1000000; navigation: dots, arrows, both, none; autoplay: 0-60000 ms; loop, fullwidth: boolean; include, category, tag, author, title, subtitle, kicker, description, height; date_from, date_to; min_rating: 0-5; orderby: date, title, rating, include; order: asc, desc; static slide arrays (h1, p, bgimgs, pill, or their campaign aliases) use comma-separated values without square brackets; hero-1, hero-2, and hero-fullwidth-demo are bundled image presets; campaign cta1 and cta2 use `label |
[carousel] | type: product, post; card_variant: supported card variant; columns: 1-6; limit: 1-48; offset: 0-1000000; include, category, tag, author, title, subtitle; date_from, date_to; min_rating: 0-5; autoplay: 0-60000 ms; loop: boolean |
[grid] | type: product, post, community-article; card_variant: supported card variant; layout: standard, compact, editorial, masonry; columns: 1-6; page_size: 1-48; offset: 0-1000000; paginated: boolean; include, category, tag, author, title, subtitle; date_from, date_to; min_rating: 0-5; orderby: date, title, rating, include; order: asc, desc |
[sticky-posts] / [sticky_posts] | layout: grid, carousel, compact-list; card_variant: default, compact, editorial, minimal; columns: 1-4; limit: 1-24; offset: 0-1000000; autoplay: 0-60000 ms; loop: boolean; title, subtitle |
Product card variants are default, minimal, editorial, gallery, simple, variation, and expandable. Post card variants are default, compact, editorial, and minimal.
[slider type="product" title="Top rated" layout="2/3" slides="3" navigation="both" autoplay="5000" card_variant="editorial" orderby="rating"]Reviews and comments
| Shortcode | Attributes and accepted values |
|---|---|
[reviews] | layout: grid-4, grid-3, grid-5, masonry, compact; variant: cards, full, compact; limit: 1-48; offset: 0-1000000; product, title; min_rating, max_rating: 0-5; date_from, date_to |
[comments] | layout: cards, compact; variant: cards, full, compact; limit: 1-48; offset: 0-1000000; post, title; min_rating, max_rating: 0-5; date_from, date_to |
[testimonials] | layout: grid-3, carousel, compact; limit: 1-12; offset: 0-1000000; min_rating: 0-5; date_from, date_to; title |
Only approved source records returned by WordPress or WooCommerce are displayed.
Community components
| Shortcode | Attributes and accepted values |
|---|---|
[community-feed] | layout: masonry, grid-3, grid-4, list, compact; load_mode: manual, infinite; page_size: 1-48; offset: 0-1000000; show_filters: boolean; tags, author, title; date_from, date_to; min_rating: 0-5; min_likes: 0-1000000 |
[community-hero] | layout: gradient, split, image-bg; heading_level: h1–h6; kicker, title, description; image: URL; show_upload: boolean |
[community-marketplace] | layout: grid, compact, carousel; card_variant: any product card variant; columns: 1-6; limit: 1-48; offset: 0-1000000; min_rating: 0-5; title |
[community-tag-picks] | layout: grid-3, grid-4, compact; tags, title; tag_limit, post_limit: 1-12; offset: 0-1000000; min_likes: 0-1000000; date_from, date_to |
[community-members] | layout: grid, compact, list; columns: 1-6; limit: 1-100; offset: 0-1000000; include, title; role: comma-separated exact whitelist of registered WordPress role slugs or labels, or all; show_bio: boolean; legacy members and permission aliases accept the same role list |
Community shortcodes require the corresponding community data and capabilities. A valid shortcode can still show an empty state when no public records match its filters.
role="member" now means the user must actually have the WordPress member role; it does not include customers or administrators. You can whitelist multiple roles:
[community-members role="admin,member,creator,customer,SEO editor,shop manager"]Users without an assigned role are excluded. Registered role slugs such as administrator, shop_manager, and wpseo_editor work as well as their human labels.
In fixed-aspect community layouts (grid-3, grid-4, list, compact), media stays complete and uncropped, aligned to the right so mixed portrait and landscape uploads remain consistent; the masonry layout instead keeps each item's natural aspect ratio. Video attachments in the community feed include their own play/pause and mute controls overlaid on the player, playable inline without leaving the page.
Composite and utility components
| Shortcode | Attributes and accepted values |
|---|---|
[related-sections] | items: up to three comma-separated values from products, posts, community, testimonials, none; product_limit, post_limit, community_limit: 1-12 |
[order-success] | mode: physical, digital; show_native_link, show_support_link: boolean |
[unsubscribe-form] | title, description |
[spotify-radio] | uri: a Spotify share URL, URI, or bare ID; content_type: track, album, playlist, artist, show, or episode (used for bare IDs); height: 152-800 px; theme: auto, dark, or light; title, description |
[spotify-radio uri="https://open.spotify.com/playlist/37i9dQZF1DWWQRwui0ExPn" title="Studio radio" description="Music for browsing."]When the AI Shopping Assistant plugin is active and configured, [chat_assistant] places its lightweight inline chat box in page content. It uses the configured flat assistant icon and deliberately omits the optional 3D launcher.
Publish and test
- Preview the WordPress page and check that the shortcode is not shown as raw text.
- Open the page on the headless storefront.
- Test loading, populated, empty, and error states.
- Check every link and filter.
- Test the smallest supported viewport.
- For account, checkout, upload, or community components, test both anonymous and
authenticated sessions.
Video hero / banner
Use [video-hero] for a cinematic promotional banner with layered text, a kicker pill, and up to two CTA pills. It accepts WordPress-hosted or direct MP4/WebM URLs as well as standard YouTube and Vimeo URLs.
[video-hero variant="fullbleed" src="https://example.com/campaign.mp4" poster="https://example.com/campaign.jpg" kicker="New season" title="Stories made to move" description="Discover the collection." primary_cta_label="Shop now" primary_cta_href="/shop" secondary_cta_label="Our story" secondary_cta_href="/about" overlay_opacity="55" align="left" height="70vh"]The default playback behavior is autoplay="true" loop="true" muted="true". Muted autoplay follows browser policy, playback stays inline on mobile, and the rendered hero includes a play/pause control. Visitors who prefer reduced motion see the poster until they choose to play. Always provide a poster image as a loading, failure, and reduced-motion fallback.
Authors can also insert Video hero/banner from the WordPress block editor's Design category and configure the same options in the block sidebar.
Supported attributes include variant, src, poster, kicker, title, description, primary_cta_label, primary_cta_href, secondary_cta_label, secondary_cta_href, align (left, center, or right), height, overlay_opacity (0–90), autoplay, loop, and muted.
The variant attribute uses the same documented views as the static hero: fullbleed, glow, split, minimal, and strip. Full bleed is the default; split places content beside the moving media, minimal softens video behind an editorial treatment, glow adds an atmospheric brand wash, and strip creates a compact promotional banner.
AI Assistant
Use [chat_assistant] to place the paid AI Shopping Assistant as an inline chat box:
[chat_assistant]The headless storefront loads this component and its API configuration only on pages where the shortcode is present. The plugin continues to own native WordPress rendering. Fixed launcher and header/footer placements are configured separately in the Control Center.