Table of contents
FN Shoppable Blocks is a WordPress plugin that adds three WooCommerce blocks to the WordPress block editor: Shop the Look, Shop the Story, and Collection Switcher.
Before you begin
- Install and activate WooCommerce.
- Create and publish the products you want to feature.
Plugin installation
- In your WordPress admin, go to Plugins > Add Plugin.
- Click Upload Plugin and choose the FN Shoppable Blocks
.zipfile. - Click Install Now, then Activate Plugin.
- Go to Settings > FN Shoppable License and activate your license key.
- Make sure WooCommerce is installed and active before adding FN Shoppable blocks to a page.
The blocks keep working on your site even if a license expires or cannot be checked. An active license is required to receive plugin updates.
Activate your license
After purchase, you can find your license key in your customer account. Open the Downloads tab, then select the purchased FN Shoppable Blocks product to view its license key.
To activate it:
- In your WordPress admin, go to Settings > FN Shoppable License.
- Paste your license key into the license field.
- Click the activation button and wait for WordPress to confirm the license is active.
An active license is required to receive plugin updates. If a license expires, is missing, or cannot be checked, the installed plugin and its existing blocks continue working on your site, but WordPress will not be able to download new FN Shoppable Blocks updates until an active license is connected.
Recommended section layout
For most page layouts, place each FN Shoppable block inside a separate Group block and set the Group to Full width. Apply the section’s background, padding, and margins to the outer Group rather than directly to the FN Shoppable block.
This creates a clear full-width page section while keeping the shoppable block’s content and spacing easier to manage. You can still use the block’s own alignment and spacing controls when a design needs more specific adjustments.
Inserting Shoppable Blocks
Add a block using either of these methods:
- Open the block inserter and look in the FN Shoppable Blocks category.
- Start a new line, type
/, then begin typing the block name—for example,/Shop the Look—and select it from the suggestions. - Use the settings sidebar to configure the selected block. If the sidebar is hidden, select the block and click the Settings icon in the editor toolbar.
Products that are private, password protected, hidden from the catalog, or otherwise unavailable to shoppers are not displayed on the storefront.
Settings shared by every block
These standard WordPress controls are available on Shop the Look, Shop the Story, and Collection Switcher.
| Option | Choices | What it does |
|---|---|---|
| Alignment | None, Wide width, Full width | Controls how wide the block appears. Wide and full alignment must be supported by the active theme. |
| Margin | Theme spacing values or a custom value | Adds space outside the block. Available choices depend on the active theme. |
| Padding | Theme spacing values or a custom value | Adds space inside the block. Available choices depend on the active theme. |
Shop the Look
Shop the Look places clickable product hotspots over a lifestyle image. A shopper can then open a product popup from each hotspot, and add product to cart/see product options.
Set up the block
- Add Shop the Look and choose a lifestyle image.
- Click the image wherever you want to add a hotspot.
- With the hotspot selected, search for and choose a WooCommerce product in the block settings sidebar (you may need to scroll down the sidebar to see the settings).
- Drag the hotspot to reposition it, or enter its horizontal and vertical position in the sidebar.
- Repeat for each product in the image.
A hotspot without a valid, shopper-visible product remains editable but is not shown on the storefront.
Image options
| Option | Choices or range | Default | What it does |
|---|---|---|---|
| Replace image | Any image in the Media Library or a new upload | — | Replaces the lifestyle image while keeping the block’s other settings. |
| Alt text | Text | Taken from the selected image | Describes the image for screen readers and when the image cannot load. Describe the scene rather than repeating nearby text. |
| Image fit | Contain, Cover | Contain | Contain shows the complete image. Cover fills the image area and may crop its edges. |
| Aspect ratio | Original, Wide 16:9, Portrait 4:5, Square 1:1 | Original | Sets the shape of the image area. Original follows the source image’s natural proportions. |
| Minimum height | 0–900 px, in 10 px steps | 0 | Sets a minimum image-area height. Reset to 0 to use no custom minimum. |
| Focal point | Visual position picker | Centre | Chooses the part of the image that stays in view when Image fit is set to Cover. This option is hidden when Contain is selected. |
Hotspot options
| Option | Choices or range | Default | What it does |
|---|---|---|---|
| Button style | Light, Dark | Light | Changes the hotspot marker colour for contrast against the image. |
| Popup style | Product card, Minimal | Product card | Product card includes the product image, name, price, status, and action. Minimal removes the product image for a more compact popup. |
| Hotspot list | Select or Remove | — | Lists every hotspot so it can be selected or removed without clicking it on the image. |
| WooCommerce product | Product search | None | Connects the selected hotspot to a product. |
| Horizontal position | Percentage across the image | Click or drag position | Fine-tunes the hotspot from left to right. The editor keeps markers away from the extreme image edge. |
| Vertical position | Percentage down the image | Click or drag position | Fine-tunes the hotspot from top to bottom. The editor keeps markers away from the extreme image edge. |
| Remove hotspot | — | — | Permanently removes the selected hotspot from the block. |
The popup action follows WooCommerce product rules. Purchasable, in-stock products use their normal add-to-cart action. Unavailable or out-of-stock products link to the product page instead.
Shop the Story
Shop the Story combines editorial text, a lifestyle image, and up to four hand-picked products.
Set up the block
- Add Shop the Story and choose a lifestyle image.
- Replace the starter heading and paragraph with your story. The editorial area accepts Heading, Paragraph, and Buttons blocks.
- Choose up to four products in the Products panel.
- Choose the image position and product display style.
Image options
| Option | Choices | Default | What it does |
|---|---|---|---|
| Replace image | Any image in the Media Library or a new upload | — | Replaces the lifestyle image while preserving the story and selected products. |
| Alt text | Text | Taken from the selected image | Describes the lifestyle image for screen readers and when the image cannot load. |
| Image position | Right, Left | Right | Places the lifestyle image to the right or left of the editorial content and products. |
Product options
| Option | Choices | Default | What it does |
|---|---|---|---|
| Display | Carousel, Grid | Carousel | Shows products in a horizontally navigable carousel or a multi-item grid. |
| Carousel style | Peek, Single product | Peek | Peek reveals part of the next product as a browsing cue. Single product shows one product at a time. Available only when Display is Carousel. |
| Show add to cart button | On, Off | On | Shows or hides each product’s WooCommerce action button. |
| Product image aspect ratio | Original, Square 1:1, Standard 4:3, Portrait 3:4, Classic 3:2, Classic Portrait 2:3, Wide 16:9, Tall 9:16 | Original | Sets a consistent crop for product images. Original preserves each source image’s proportions. |
| Product 1–4 | Product search | None | Selects and orders up to four products. Empty product slots are ignored. |
Product cards show the product image, name, price, availability status when needed, and the optional action button. Products appear in Product 1 to Product 4 order.
Collection Switcher
Collection Switcher creates tabs that let shoppers move between product categories, product tags, and automatic smart collections. The storefront displays the first eight collections in the configured list.
Set up the block
- Add Collection Switcher.
- Use Add collection to search for a product category or tag, or choose a smart collection.
- Edit each tab’s title if needed.
- Use Up and Down to set the tab order, or Remove to delete a tab.
- Configure the product grid in the Product display panel.
Collection options
| Option | Choices | What it does |
|---|---|---|
| Add collection | Product categories, product tags, New Arrivals, Bestsellers, On Sale, Featured, Top Rated | Adds a new shopper-facing tab. A collection can be added only once to the same block. |
| Title | Text | Changes the tab label without renaming the WooCommerce category or tag. |
| Up / Down | — | Moves the collection earlier or later in the tab order. |
| Remove | — | Removes the collection from this block. It does not delete the WooCommerce category, tag, or products. |
| Title alignment | Left, Centre, Right | Aligns the tab labels. This control appears in the block toolbar. The default is Left. |
Smart collections work as follows:
| Smart collection | Products shown |
|---|---|
| New Arrivals | Most recently published products first. |
| Bestsellers | Most popular products first, based on WooCommerce sales data. |
| On Sale | Products currently returned by WooCommerce as on sale. |
| Featured | Products marked as featured in WooCommerce. |
| Top Rated | Highest-rated products first. |
Product display options
| Option | Choices or range | Default | What it does |
|---|---|---|---|
| Products per collection | 1–12 | 8 | Limits the number of products loaded for each tab. |
| Columns | 2–6 | 4 | Sets how many product cards appear in each row on larger screens. When a collection contains more products than the column count, shopper navigation controls are added. |
| Product image aspect ratio | Original, Square 1:1, Standard 4:3, Portrait 3:4, Classic 3:2, Classic Portrait 2:3, Wide 16:9, Tall 9:16 | Original | Sets a consistent crop for product images. Original preserves each source image’s proportions. |
| Show add to cart button | On, Off | On | Shows or hides each product’s WooCommerce action button. |
| Default term order by | Newest, Menu order, Popularity, Rating, Price, Random | Newest | Chooses how category, tag, On Sale, and Featured products are sorted. New Arrivals, Bestsellers, and Top Rated override this setting with the sorting implied by their names. |
| Default term order | Descending, Ascending | Descending | Sets the sort direction for category, tag, On Sale, and Featured products. New Arrivals, Bestsellers, and Top Rated override this setting. |
Responsive behaviour
The blocks adapt their layouts for smaller screens. Column counts and wide/full alignment describe the preferred desktop layout; the plugin reduces or rearranges content where necessary so it remains usable on tablets and phones.
Customising with CSS
FN Shoppable Blocks is designed to inherit the active theme’s styles and typography wherever practical, so the blocks should feel at home in the site’s existing design without additional work. The plugin adds the layout and component styling needed for each shopping experience while allowing the theme to continue shaping familiar elements such as headings, text, and WooCommerce action buttons.
If a design needs further adjustment, FN Shoppable Blocks uses stable, prefixed CSS classes that can be customised with ordinary CSS. Add custom CSS to your theme’s stylesheet or the custom CSS area provided by your theme or site editor.
Customise one section
To change one instance without affecting every block on the site:
- Select the outer Group block recommended in Recommended section layout.
- Open Advanced in the settings sidebar.
- Enter a short class name in Additional CSS class(es), such as
summer-edit. - Begin each custom selector with
.summer-edit.
For example:
.summer-edit .fnsb-collection-switcher__tab {
color: #72513e;
}
Choose a meaningful class name containing only letters, numbers, hyphens, or underscores. Enter the class name without a leading full stop in the editor; use the full stop only when writing the CSS selector.
Stable block selectors
These root selectors target an entire block:
| Block | Selector |
|---|---|
| Shop the Look | .fnsb-shop-the-look |
| Shop the Story | .fnsb-shop-the-story |
| Collection Switcher | .fnsb-collection-switcher |
These selectors target the principal shopper-facing elements. They are intended to remain stable so themes and site-specific CSS can rely on them.
| Element | Shop the Look | Shop the Story | Collection Switcher |
|---|---|---|---|
| Main image | .fnsb-shop-the-look__image | .fnsb-shop-the-story__image | — |
| Product card | .fnsb-shop-the-look__product | .fnsb-shop-the-story__product | .fnsb-collection-switcher__product |
| Product image area | .fnsb-shop-the-look__product-media | .fnsb-shop-the-story__product-media | .fnsb-collection-switcher__product-media |
| Product image | .fnsb-shop-the-look__product-image | .fnsb-shop-the-story__product-image | .fnsb-collection-switcher__product-image |
| Product title | .fnsb-shop-the-look__product-title | .fnsb-shop-the-story__product-title | .fnsb-collection-switcher__product-title |
| Product price | .fnsb-shop-the-look__product-price | .fnsb-shop-the-story__product-price | .fnsb-collection-switcher__product-price |
| Product status | .fnsb-shop-the-look__product-status | .fnsb-shop-the-story__product-status | .fnsb-collection-switcher__product-status |
| Product action | .fnsb-shop-the-look__product-button | .fnsb-shop-the-story__product-button | .fnsb-collection-switcher__product-button |
Additional component selectors:
| Element | Selector |
|---|---|
| Shop the Look hotspot | .fnsb-shop-the-look__hotspot-button |
| Shop the Look popup | .fnsb-shop-the-look__product |
| Shop the Story editorial area | .fnsb-shop-the-story__editorial |
| Shop the Story carousel arrows | .fnsb-shop-the-story__carousel-button |
| Collection tabs container | .fnsb-collection-switcher__tabs |
| Collection tab | .fnsb-collection-switcher__tab |
| Active collection tab | .fnsb-collection-switcher__tab.is-active |
| Collection products container | .fnsb-collection-switcher__products |
| Collection slider arrows | .fnsb-collection-switcher__slider-button |
Common examples
Change product-title typography across all three blocks:
.fnsb-shop-the-look .fnsb-shop-the-look__product-title,
.fnsb-shop-the-story .fnsb-shop-the-story__product-title,
.fnsb-collection-switcher .fnsb-collection-switcher__product-title {
font-family: var(--wp--preset--font-family--heading);
font-size: 1.25rem;
font-weight: 600;
line-height: 1.2;
}
Change product-price styling across all three blocks:
.fnsb-shop-the-look__product-price,
.fnsb-shop-the-story__product-price,
.fnsb-collection-switcher__product-price {
color: #72513e;
font-size: 1rem;
opacity: 1;
}
Give one Shop the Look section a dark popup:
.summer-edit .fnsb-shop-the-look__product,
.summer-edit .fnsb-shop-the-look__product::before {
background: #222;
color: #fff;
}
.summer-edit .fnsb-shop-the-look__product-title a {
color: inherit;
}
Change Collection Switcher tabs and distinguish the active tab:
.summer-edit .fnsb-collection-switcher__tab {
color: #72513e;
font-size: 1.4rem;
opacity: 0.45;
}
.summer-edit .fnsb-collection-switcher__tab.is-active {
color: #2e1d16;
opacity: 1;
}
Change product action buttons in one Shop the Story section:
.summer-edit .fnsb-shop-the-story .fnsb-shop-the-story__product-button.wp-element-button {
border-radius: 0;
background: #2e1d16;
color: #fff;
}
Custom CSS should normally be loaded after the plugin styles. Using a class on the outer Group, as shown above, also scopes the change and gives the custom selector enough specificity without resorting to !important.