User Guide
Building product pages with NoorPDP
Everything you need to design and assign WooCommerce single-product pages — from your first layout to going live.
What is NoorPDP
NoorPDP lets you design your WooCommerce product pages visually, using the same block editor you already use for posts and pages — instead of being stuck with whatever layout your theme happens to ship. A "Layout" is just a normal page you build with blocks: drag in a Product Title, a Gallery, a Price, an Add to Cart button, a Reviews section, and anything else you want (a Hero banner, an FAQ accordion, trust badges) around them, in whatever order and design you like.
Once a Layout is built, you assign it to one product, a whole category, or your entire store — and every visitor sees your design instead of the theme's default product page.
Nothing about your theme's header, footer, or sidebar changes — a Layout only replaces the middle of the product page. Anything else your theme or other plugins add around the product (announcement bars, sidebars, structured data) keeps working exactly as before.
Installation
NoorPDP requires WooCommerce to be installed and active — it won't do anything (and will show a notice) without it.
- Install & activate NoorPDP like any other WordPress plugin (Plugins → Add New, or upload the zip).
- Make sure WooCommerce is active. If it isn't, you'll see an admin notice explaining that NoorPDP needs it.
- Look for the new "NoorPDP" menu in your WordPress admin sidebar — this is your Dashboard for settings and layouts.
Your first product layout
The fastest way to get a feel for NoorPDP is to start from a premade template rather than a blank page — see Using the template library. To start from scratch instead:
- Go to NoorPDP → Add New Layout. This opens the ordinary WordPress block editor, just like editing a page.
- Give it a title (for your own reference — visitors never see a Layout's title, only its content).
- Add blocks. Start with the WooCommerce data blocks you need (Product Title, Gallery, Price, Add to Cart) and build outward from there — see Product blocks and Content & layout blocks.
- Publish the Layout. Publishing alone doesn't put it live on any product yet — a Layout only does something once it's assigned. See Assigning layouts.
Use the "Preview" link on the Layouts list to see exactly how a Layout will look on a real product page before assigning it anywhere — this works even while the Layout is still a draft.
The Layout editor
A Layout is edited in the same block editor as any WordPress page, with one addition: a "NoorPDP" button in the toolbar that opens the template library modal (see Using the template library), plus "Export as JSON" and "Import JSON" buttons next to it for sharing or reusing a layout as a template file.
Every WooCommerce data block (Product Title, Price, Gallery, and so on) shows a simple placeholder while you're editing — icon and label only — because its real content only exists on an actual product. What you see in the editor is the block's position; what a visitor sees is that block filled in with the real product's data.
Product blocks
These blocks pull live data from whichever product the page belongs to — you place them once in a Layout, and they automatically show the right title, price, images, and so on for every product that Layout is assigned to.
Product Title
The product's title.
Product Price
Regular/sale price, formatted the way WooCommerce always does.
Product Category
A small label showing the product's category — usually placed above the title.
Product Rating
The product's star rating.
Product Breadcrumbs
The WooCommerce breadcrumb trail.
Product Gallery Carousel
A swipeable image carousel, with an optional thumbnail strip you can toggle on/off.
Product Short Description
The product's short description/excerpt.
Product Add to Cart
The live quantity/variations/stock form — this is the button that actually adds the product to the cart.
Product Meta
SKU, categories, and tags.
Product Specifications
A spec table from the product's attributes — the same data as the classic "Additional Information" tab.
Product Tabs
The classic Description / Additional Information / Reviews tab set, all in one block.
Product Reviews
A rating summary plus a full grid of the product's reviews, with a "Load more" button. Choose a boxed max-width or full width.
Review Carousel
A curated carousel where you pick exactly which reviews to feature — search for a product, then check the specific reviews you want shown.
Related Products
WooCommerce's own "related products," with configurable count and columns.
Product Grid
A grid of products — latest, related, upsells, or cross-sells — with toggles for image/price/add-to-cart and full control over columns and count.
Sticky Add to Cart Bar
A bar that slides in at the bottom of the screen (with an optional badge like "Free shipping today") once a visitor scrolls past the main Add to Cart block.
Content & layout blocks
These are general-purpose design blocks — not tied to product data — for building the rest of the page around your product blocks: hero banners, trust signals, FAQs, comparisons, and structure.
Hero
Full-width banner with a heading, subheading, call-to-action button, and an image or video background with a color overlay.
Advanced Heading
A heading with a selectable level (H1–H6) and full styling control.
Advanced Button
A styleable call-to-action button/link, usable on its own or inside a Hero.
Container
A flexible wrapper for grouping and laying out other blocks.
Icon List
A list of short lines each with your own chosen icon instead of a bullet — great for shipping/trust info.
Trust Badges
A row of icon + label badges (e.g. "Vegan Friendly", "GMP Certified") in a soft card.
Feature Cards
A row or grid of editable cards (heading + text) — for ingredients, benefits, or feature highlights. Configurable columns, background, corner radius, and padding.
Comparison Table
A titled feature-comparison table, prefilled with a starter 3-column layout you edit directly.
Tabs
Organizes content into switchable tabs — add as many tabs as you like, each holding any other blocks.
Accordion
Collapsible FAQ-style panels — choose whether one panel can be open at a time, or several at once.
FAQ Accordion
A ready-made "Frequently Asked Questions" section — a titled Accordion prefilled with example shipping/returns questions, ready to edit.
Visibility & animation
Every NoorPDP block gets two extra Inspector panels automatically, no matter which block you're editing:
Visibility
Three toggles — "Hide on desktop", "Hide on tablet", "Hide on mobile" — for showing or hiding any block per device size.
Animation
An entrance animation (Fade in / Slide up / Zoom in) that plays once the block scrolls into view, with your own duration and delay in milliseconds.
Both live in the block's own Inspector panel (the sidebar that opens when a block is selected), below its normal settings.
Templates
Using the template library
Click the "NoorPDP" button in the Layout editor's toolbar to open the template library — a searchable, categorized gallery of ready-made designs.
- Full Layouts are complete product-page designs, ready to use as-is or as a starting point.
- Sections are smaller, individual pieces (a hero banner, an FAQ block, a trust-badges row) you insert alongside whatever you've already built.
Search or filter by category to narrow things down. Clicking a Full Layout card replaces your current content (you'll be asked to confirm if the Layout already has real content in it); clicking a Section card adds it alongside what's already there. Every template in the library is free to use.
Saving your own template
The "Export as JSON" toolbar button saves whatever you've currently built as a downloadable .json file — useful for backing up a design, sharing it with someone else, or reusing it on another site. Give it a title, choose whether it's a Full Layout or a Section, and optionally a category; the file downloads straight to your computer, no server round-trip involved.
Use "Import JSON" to bring a previously exported file back in — pick the file, and it's applied exactly like picking a template from the library (with the same replace-content confirmation for a Full Layout).
Assigning layouts
Per-product, per-category, site-wide
Building a Layout doesn't change anything on its own — it only takes effect once assigned. NoorPDP checks these in order for every product page, and uses the first match it finds:
- A single product's own choice. On the Product edit screen, the "Product Page Template" box (in the sidebar) lets you pick a Layout just for that one product.
- The product's category default. On a Product Category's edit screen, "Default Product Page Template" applies a Layout to every product in that category that hasn't chosen its own.
- Your site-wide default, set once on the NoorPDP Dashboard, covering every product that doesn't match anything more specific.
- Nothing set anywhere? The product page looks exactly like it would without NoorPDP installed.
This lets you set one site-wide default for most products, override it for a specific category (say, all your "Supplements" get a longer, FAQ-heavy layout), and still hand-pick something completely different for one flagship product — all three can coexist.
Reference
Blocks reference
| Block | Type |
|---|---|
| Product Title | Product data |
| Product Price | Product data |
| Product Category | Product data |
| Product Rating | Product data |
| Product Breadcrumbs | Product data |
| Product Gallery Carousel | Product data |
| Product Short Description | Product data |
| Product Add to Cart | Product data |
| Product Meta | Product data |
| Product Specifications | Product data |
| Product Tabs | Product data |
| Product Reviews | Product data |
| Review Carousel | Product data |
| Related Products | Product data |
| Product Grid | Product data |
| Sticky Add to Cart Bar | Product data |
| Hero | Content |
| Advanced Heading | Content |
| Advanced Button | Content |
| Container | Content |
| Icon List | Content |
| Trust Badges | Content |
| Feature Cards | Content |
| Comparison Table | Content |
| Tabs | Content |
| Accordion | Content |
| FAQ Accordion | Content |
Frequently asked questions
Do I need to know how to code?
No — everything is built with the same block editor you already use for pages and posts. Every block has plain-language settings in its Inspector panel.
Will this work with my theme?
Yes. A Layout only replaces the middle of the product page — your theme's header, footer, and sidebar stay exactly as they are, and anything else hooked into WooCommerce's normal product-page structure keeps working.
Can I use different layouts for different products?
Yes — assign a Layout per product, per category, or set one site-wide default, and mix all three as needed. See Per-product, per-category, site-wide.
Can I export a layout and use it on another site?
Yes — use "Export as JSON" to download it, then "Import JSON" on the other site to bring it back in. See Saving your own template.
Troubleshooting
NoorPDP isn't doing anything
Confirm WooCommerce is installed and active — NoorPDP deliberately does nothing at all until it is, and shows an admin notice if it's missing.
My layout isn't showing on the product page
Make sure the Layout is actually assigned somewhere — building and publishing it isn't enough on its own. Check the product's own "Product Page Template" box first, then its category's default, then the site-wide default; see Assigning layouts for the exact order NoorPDP checks.
A product block shows nothing / looks empty
Product blocks only render real data on an actual product page — in the Layout editor itself they show a plain placeholder by design. Use the "Preview" link on the Layouts list to see it with real data.