Noah Shop Builder for WooCommerce

Noah Shop Builder for WooCommerce is a comprehensive WooCommerce page builder designed specifically for the WordPress Gutenberg editor. Build beautiful, conversion-optimized online stores without writing a single line of code.

Key Features

• Gutenberg-Native Blocks – Seamlessly integrates with the WordPress block editor

• Product Display Blocks – Showcase products with customizable title, price, images, and description blocks

• Drag & Drop Interface – Intuitive visual builder for easy customization

• Ready-Made Templates – Pre-designed layouts to get you started quickly

• Shop Templates – Design your single product, shop, archive, cart and empty cart pages, and choose where each template shows

• No Coding Required – Build professional stores without technical knowledge

Single Product Blocks

• Product Title – Shows the product name as a heading, optionally linked to the product.

• Product Price – Shows the product price and updates when a variation is selected.

• Product Image – Product image gallery with WooCommerce zoom, slider and lightbox.

• Product Excerpt – Shows the product’s short description.

• Product Description – Shows the product’s full description.

• Add To Cart – WooCommerce add to cart form for simple, variable, grouped and external products.

• Product Rating – Average star rating with the review count.

• Product Reviews – Product reviews list and the review form.

• Product Tabs – Description, additional information, reviews and tabs added by other plugins.

• Additional Information – Product attributes, weight and dimensions; follows the selected variation.

• Product Meta – SKU, categories and tags as WooCommerce shows them.

• Product SKU – Shows the product SKU; follows the selected variation.

• Product Stock – Stock status with optional custom labels; follows the selected variation.

• Product Categories – The product’s categories as links.

• Product Tags – The product’s tags as links.

• Product Share – Social share links and a copy-link button, without third-party scripts.

• Stock Progress Bar – Shows how much of the stock has sold to create urgency.

• Breadcrumbs – WooCommerce breadcrumbs: Home › Shop › Category › Product.

• Related Products – Products related to the current product by category and tag.

• Upsells – The upsell products set on the current product.

• Store Notices – WooCommerce messages such as “Added to cart”, coupon results and errors.

Shop & Archive Blocks

• Archive Products – Products of the shop, category, tag or search page in grid, list, overlay or flip card layouts.

• Products – Newest, best selling, on sale, featured or top rated products, on any page.

• Archive Title – Title of the shop page, or of the category, tag or search being viewed.

• Archive Description – Description of the category or tag being viewed, or the shop page content.

• Archive Result Count – Shows a count such as “Showing 1–12 of 40 results”.

• Archive Pagination – Page links for product listings that keep the sorting and filters.

• Order By Filter – Lets shoppers sort products by popularity, rating, date or price.

• Products Per Page Filter – Lets shoppers choose how many products a page shows.

• Archive View Mode – Grid and list buttons that switch the product view without reloading.

Cart Blocks

• Cart Table – Cart items with quantities, remove links, the coupon field and the update button.

• Cart Total – Cart totals with shipping, taxes, the shipping calculator and the checkout button.

• Cross-Sell – Cross-sell products for the items in the cart.

• Empty Cart Message – The “Your cart is currently empty.” message for the empty cart page.

• Return To Shop – A button that takes shoppers back to the shop page.

Starter Templates

Start a new template from a ready-made design, then change anything in the block editor.

Single Product

• Single Page – Gallery beside the product details, with tabs and related products below.

• Stock Progress Bar – Large gallery with a buy box that shows how much stock is left, plus upsells.

Shop

• Shop – Shop title and intro above a sortable three-column product grid.

• Shop with Categories – Centered intro and category list, then a four-column product grid.

• Shop Flip – Four-column grid whose cards show the second gallery image on hover.

Product Archive

• Archive – Category title and description above a sortable product grid.

• Category with Sidebar – A category list in a sidebar next to the product grid.

Cart

• Standard Cart – Cart items, totals and cross-sells, with a page heading.

• Cart with Trust Badges – Fast shipping, secure payment and easy returns notes above the cart.

Empty Cart

• Best Sellers – Empty cart message and shop button beside your best-selling products.

• New in Store – A friendly empty cart message, a shop button and the newest products.

How to Use

• Install and activate the plugin

• Ensure WooCommerce is installed and active

• Edit any page or post with the Gutenberg editor

• Search for “Noah” or “Product” in the block inserter

• Add blocks and customize them using the block settings panel

• Publish your page and enjoy your beautiful WooCommerce store

To design a whole store page, go to Noah Shop Builder → Templates, create a template (Single Product, Shop, Archive, Cart or Empty Cart), start from a starter design or a blank page, and choose where it shows.

Requirements

• WordPress 6.9 or higher

• WooCommerce 9.0 or higher (active)

• PHP 7.4 or higher

Support & Documentation

• Documentation – Comprehensive guides and tutorials

• Video Tutorials – Step-by-step video guides

Privacy Policy

Noah Shop Builder for WooCommerce does not collect or store any personal data. It works entirely within your WordPress installation.

Source Code

This plugin uses build tools (npm and webpack via @wordpress/scripts) to compile and minify JavaScript and CSS files for production.

Compiled Files

The compiled/minified files are located in the build/ directory.

Source Files

The uncompiled source code is located in the src/ directory of this plugin. All JavaScript and CSS source files are included in the distributed plugin.

Build Instructions

To build the plugin from source:

1. nvmrc ) and Composer

2. Run composer install --no-dev to generate the PHP autoloader

3. Run npm install to install dependencies

4. Run npm run build to compile the source files

5. Or run npm run start for development mode with hot reloading

Source Repository

com/iqbal-web/shop-companion