NoorPDP – Build Custom WooCommerce Product Pages

Description

Live Demo | Documentation

NoorPDP is a WooCommerce product page builder that lets you redesign the single product page visually, in the standard block editor, without touching a theme file:

  • Product Title, Rating, Price, Short Description, Add to Cart, Meta, Gallery, Tabs and Breadcrumbs blocks — each a thin wrapper around WooCommerce’s own woocommerce_template_single_*() functions, so variations, stock handling and reviews keep working exactly as WooCommerce implements them
  • Product Grid and Related Products blocks for latest/related/upsell product listings
  • Container, Heading, Button, Accordion and Tabs layout blocks for arranging everything
  • Product Layouts — full page arrangements built in the standard block editor, so it works on any theme, not just block themes
  • Assign a Layout per product, per product category, or as the site-wide default; unconfigured products keep rendering exactly as vanilla WooCommerce always has
  • An editor Template Library with premade full layouts and drop-in sections (FAQ accordion, trust badges, feature table)

Everything above is free — no license, upsell, or locked feature anywhere in the plugin.

External services

This plugin includes an optional “Cloud Templates” source that can fetch additional premade templates from a remote API. It is disabled by default and only activates if a site or another plugin explicitly defines the NOORPDP_CLOUD_URL constant (or hooks the noorpdp/cloud_api_url filter) with a real endpoint URL — out of the box, this plugin makes no external requests at all.

When enabled, the plugin sends a single GET request to the configured URL (no personal or site-identifying data included beyond standard HTTP headers) to retrieve a JSON list of templates, and caches the response in a transient for 12 hours.

Source Code

The JavaScript in the build/ directory is compiled from the human-readable source in src/. Full source, including the build tooling, is available at https://github.com/noorealamdev/noorpdp. To regenerate the compiled files:

npm install && npm run build

Screenshots

Blocks

This plugin provides 30 blocks.

  • Product Meta Displays the current WooCommerce product's SKU, categories and tags.
  • Tabs Organize content into switchable tabs. Powered by the WordPress Interactivity API with full keyboard support.
  • Feature Cards A row or grid of cards, each with a heading and a line of supporting text — useful for ingredients, benefits, or feature highlights.
  • Product Gallery Carousel A swipeable carousel of the current WooCommerce product's own images, with an optional thumbnail strip.
  • Comparison Table A feature-by-feature comparison table, useful for plans, variants, size guides or specs.
  • Hero A full-width hero section with a heading, subheading, call-to-action button and an optional background image or video.
  • Product Grid Display a responsive grid of WooCommerce products (latest, related, upsells or cross-sells), rendered dynamically so it always stays up to date.
  • Product Reviews A rating summary with a star breakdown and a responsive grid of the current WooCommerce product's reviews, rendered dynamically so it always stays up to date.
  • Product Title Displays the current WooCommerce product's title.
  • Product Category Displays the current WooCommerce product's category as a small label — useful right above the Product Title.
  • Urgency & Countdown A low-stock warning or countdown timer (sale end date or a custom deadline) that nudges shoppers toward buying now.
  • Sticky Add to Cart Bar A bar fixed to the bottom of the screen with the product thumbnail, name, price and a Buy Now button — appears once the visitor scrolls past the main Add to Cart block.
  • Product Specifications Displays the current WooCommerce product's attributes as a specification table, the same data shown in the native Additional Information tab.
  • Icon List A list of short lines, each with a picked icon instead of a bullet — e.g. shipping info, trust points, feature highlights.
  • Review Carousel A curated, swipeable carousel of hand-picked reviews for a chosen product.
  • Product Price Displays the current WooCommerce product's price.
  • FAQ Accordion A collapsible list of frequently asked questions about the product.
  • Product Rating Displays the current WooCommerce product's star rating.
  • Product Tabs Displays the current WooCommerce product's description, additional information and reviews tabs.
  • Advanced Button A customizable call-to-action button with link, colors and typography options.
  • Container A flexible wrapper section for grouping and laying out other blocks.
  • Accordion Collapsible content panels, perfect for FAQs. Powered by the WordPress Interactivity API — no jQuery, minimal footprint.
  • Trust Badges A row of icon + label badges (e.g. Third-Party Tested, Vegan Friendly) in a soft rounded card, divided by vertical lines.
  • Product Breadcrumbs Displays the WooCommerce breadcrumb trail for the current product.
  • Product Short Description Displays the current WooCommerce product's short description (excerpt).
  • Related Products Displays WooCommerce's related products for the current product.
  • Product Add to Cart Displays the WooCommerce add-to-cart form for the current product, including variations, quantity and stock handling.
  • Advanced Heading A heading block with adjustable level, alignment, colors and typography.
  • Tab A single tab panel inside a Tabs block.
  • Accordion Item A single collapsible panel inside an Accordion.

Installation

  1. Make sure WooCommerce is installed and active.
  2. Upload the plugin to /wp-content/plugins/noorpdp.
  3. Run npm install && npm run build inside the plugin directory (development installs only).
  4. Activate the plugin through the Plugins screen.
  5. Go to Products Add New Product Layout, build a layout, then assign it to a product from the “Product Page Template” box on the product edit screen.1. Make sure WooCommerce is installed and active.
  6. Upload the plugin to /wp-content/plugins/noorpdp.
  7. Run npm install && npm run build inside the plugin directory (development installs only).
  8. Activate the plugin through the Plugins screen.
  9. Go to Products Add New Product Layout, build a layout, then assign it to a product from the “Product Page Template” box on the product edit screen.

FAQ

Do I need to know how to code?

No. NoorPDP adds blocks to the standard WordPress block editor — you build your product page the same way you’d build any other page, with no PHP or template files to edit.

Will this work with my theme?

Yes. A Layout renders through a template override that keeps every WooCommerce hook (sale badges, “recently viewed”, structured data, etc.) firing in its normal position, so it works with classic and block themes alike — not just block themes.

Does NoorPDP replace WooCommerce’s own product page logic?

No. Every block is a thin wrapper around WooCommerce’s own rendering functions, so variations, stock handling, reviews and add-to-cart behave exactly as WooCommerce implements them — you’re only changing the layout, not the underlying logic.

What happens to my product pages if I deactivate NoorPDP?

They fall back to whatever your theme/WooCommerce would normally show. Nothing is deleted, and your Layouts and assignments are still there if you reactivate the plugin later.

Can I use a different design for one product, a whole category, and everything else?

Yes. NoorPDP checks a per-product choice first, then a per-category default, then your site-wide default — whichever matches first wins.

Where do I find the premade templates?

Open a Product Layout in the block editor and click the “NoorPDP” button in the toolbar to browse the Template Library — full page layouts and drop-in sections like FAQ accordions, trust badges and feature tables.

Reviews

September 28, 2026
I've been using NoorPDP to build the product pages for my small handmade jewellery and fibre adornment shop, and overall I'm very happy with what I've been able to create with it. I'm using Kadence, Gutenberg and WooCommerce, and NoorPDP has given me considerably more control over my product pages without requiring me to move to a heavyweight page builder. Once I got familiar with it, I was able to create product pages that actually feel like part of my brand rather than slightly rearranged standard WooCommerce pages. That's a pretty big win for me. There are a few areas I'd really like to see developed further. The biggest is dynamic custom-field support. Native ACF integration or support for WordPress Block Bindings would make NoorPDP much more powerful for people building reusable product templates. At the very least, reliable shortcode rendering inside layout content would help. I ended up having to work around this for content that really should have been able to come directly from the product. I'd also like to see more flexibility around WooCommerce variations. I was able to get my colourways looking the way I wanted, but some of that required custom CSS, and variation gallery behaviour hasn't been as seamless as I'd hoped. Better native control over variation labels, descriptions and galleries would be very welcome. Overall, NoorPDP has given me the flexibility I wanted without forcing me into a full page-builder ecosystem. My product pages now feel much more like my own site, and the builder itself has been straightforward to work with. There are still some rough edges, particularly around dynamic content and variations, but I'm looking forward to seeing where the plugin goes from here. For a relatively new plugin, it's already become an important part of how I've built my shop. Better dynamic-data support would make it considerably more useful.
Read all 0 reviews

Contributors & Developers

“NoorPDP – Build Custom WooCommerce Product Pages” is open source software. The following people have contributed to this plugin.

Contributors

Changelog

1.0.0

  • Initial release: WooCommerce product blocks, Product Layouts, per-product/category/site-wide template assignment, starter layouts and sections.