Documentation

Noorifa Theme Handbook

Everything you need to launch a complete, conversion-focused WooCommerce store with Noorifa — from installing the theme to building product pages that sell. No coding required.

Noorifa is a WooCommerce theme built around one goal: turning visitors into buyers. It pairs a lightweight, mobile-first design with the free Noorifa Core plugin, which adds a set of Gutenberg blocks for building rich product and landing pages visually. This handbook walks you through the whole journey in order — you can follow it top to bottom for a brand-new store, or jump to any section from the menu.

Requirements

Noorifa runs on any standard WordPress host. Make sure your site meets these minimums:

If you're not sure about your PHP version, ask your host or check WP Admin → Tools → Site Health → Info → Server.

Installing the theme

1. In WordPress, go to Appearance → Themes → Add New → Upload Theme.
2. Choose the noorifa.zip file you received and click Install Now.
3. Click Activate.

Required plugins

Right after you activate the theme, a notice appears at the top of your dashboard asking you to install two plugins. Both install in one click:

1. Click Install & Activate Noorifa Core in the notice.
2. Click Install & Activate WooCommerce.
3. The notice disappears once both are active — you're ready to build.

WooCommerce setup

The first time WooCommerce activates, it runs a short setup wizard. You can also configure everything later under WooCommerce → Settings. The essentials:

• Store address & currency — WooCommerce → Settings → General.
• Payments — WooCommerce → Settings → Payments. Enable the methods you need. For markets that use it, enable Cash on delivery; add card/wallet gateways via their plugins.
• Shipping — WooCommerce → Settings → Shipping. Create a shipping zone for each region you deliver to and add a rate (Flat rate or Free shipping). Without a zone that matches the customer's address, checkout shows "no shipping methods available."
• Store pages — WooCommerce creates Shop, Cart, Checkout and My Account automatically. Noorifa styles all of them out of the box.

Adding products

1. Go to Products → Add New.
2. Enter a name and description, set a Regular price (and optional Sale price).
3. Set a Product image and add more shots to the Product gallery — Noorifa shows them in a synced gallery with zoom and lightbox.
4. Assign a Category (used in the breadcrumb and shop filters).
5. Click Publish.

Your product immediately gets a polished Noorifa product page — gallery, price, rating, quantity, add-to-cart and a sticky buy bar on scroll. You can leave it as-is, or design a completely custom product page with blocks (see Product pages).

Menus & navigation

Create menus under Appearance → Menus. Noorifa registers these locations:

Assign each menu to its location in the Menu settings box, or from the Manage Locations tab.

Building the homepage

By default WordPress shows your latest posts. To use a designed page as your homepage:

1. Create a page: Pages → Add New (e.g. "Home"). Build it with blocks, then Publish.
2. Go to Settings → Reading.
3. Set Your homepage displays → A static page, and choose your page under Homepage.

Theme settings overview

All theme options live under the Noorifa menu in your dashboard sidebar. Settings are grouped into sections down the left of the panel; change what you need and click Save Settings. Changes apply to the whole site immediately — you never edit code for any of this.

Colors & typography

Make the theme yours in two sections:

• Colors — set your Primary color (buttons, links, accents), Secondary color, and Body background. Every element that uses the brand color updates at once.
• Typography — pick fonts for body text, headings and the menu from the built-in Google Fonts list, and set the base font size. Leave a font blank to use the theme default.

Header & footer builder

Noorifa includes visual builders for both the header and footer, so you arrange elements by dragging — no menus of checkboxes.

Header builder

Under Noorifa → Header, the header has three zones: Left, Center and Right. Drag elements between zones to arrange them:

• Logo (set your logo under Appearance → Customize → Site Identity or the branding area), Navigation, Search, Account, Cart, a free HTML slot, and a Button.
• Configure the sticky behavior, mobile menu, and an optional WhatsApp number for the mobile menu.

Footer builder

Under Noorifa → Footer, build the footer from columns: an info card (logo, description, social links), the two footer nav menus, a newsletter block, plus the bottom bar with copyright and payment icons. Reorder and show/hide each part.

Shop, blog & the rest

• Shop — choose how many product columns per row and products per page, and tune the product-card title/price typography.
• Topbar — enable the announcement bar, set its message and colors.
• Page Header — the banner with the page title and breadcrumbs shown on pages, archives and the shop. Toggle breadcrumbs and alignment here.
• Buttons — pick a global button style preset (shape, fill, hover).
• Cart & Checkout — customize the order-received (thank-you) page hero.
• Floating Button — turn on a site-wide floating WhatsApp/chat button and set the number and message.
• Popups — add one or more popups (a heading, image, body text and button, or your own HTML), each with its own trigger (immediate, after a delay, on scroll, on exit-intent, or on click), frequency cap (once per session/day/ever), and targeting (all pages, just the homepage, specific pages, shop, cart or checkout).
• Privacy — turn on the cookie consent banner and set its message, button label, policy link and position. Off by default; enable it if your site needs GDPR-style consent.

Noorifa Core blocks

With Noorifa Core active, open any page or post and click the + inserter — you'll find a Noorifa category (its block icons are tinted gold so they're easy to spot). These blocks let you build rich pages visually.

Content & layout

Marketing & conversion

Single-product blocks

These pull live data from a product and are used when designing a custom product page: Product Title Price Rating Gallery Short Description Meta Specifications Tabs Reviews Breadcrumbs Sticky Add to Cart Add to Cart Related Products Product Grid Product Category.

Block visibility & animation

Every Noorifa block has two shared controls in the block sidebar:

• Visibility — hide a block on mobile, tablet or desktop. Great for showing a compact version on phones and a richer one on desktop.
• Animation — reveal the block on scroll with fade-in, slide-up or zoom-in, with adjustable duration and delay. Animations respect a visitor's "reduce motion" preference automatically.

Product pages & custom layouts

Every product gets Noorifa's polished default product page automatically — gallery, price, rating, quantity, add-to-cart, tabs and related products. When you want a bespoke, high-converting page instead — with your own sections, videos, benefits and buy box — you build a Product Layout and assign it to products. There are three parts: create the layout, assign it so it displays, and optionally set per-product display options.

Step 1 — Create a product layout

1. Go to Noorifa → Product Layouts → Add New Product Layout.
2. Give it a name (e.g. "Supplement Landing"). This is just a label for you — customers never see it.
3. Design the page in the block editor. Start from a ready-made design using the Noorifa template library (open it from the editor toolbar), or build from scratch.
4. Add single-product blocks — Product Title, Gallery, Price, Rating, Add to Cart, Short Description, Specifications, Tabs, Reviews, Sticky Add to Cart, Related Products — alongside content blocks like Hero, Feature Cards, Video Testimonials, Trust Badges and Urgency. The product blocks automatically show the details of whichever product the layout is applied to, so you design once and it works for every product that uses it.
5. Click Publish.

Step 2 — Display it on the single product page

A layout only appears once you assign it. You can assign at three levels. Noorifa checks them in order and uses the first match, so a more specific choice always wins over a broader one:

If none is set, the product simply uses the standard theme/WooCommerce product page. On a single product you can also pick "— Default (theme/WooCommerce) —" to force that product back to the default, even when a category or site-wide layout exists.

Step 3 — Per-product display options (distraction-free)

Separate from which layout a product uses, each product has a Page Layout box (provided by the theme) that controls the page chrome — ideal for paid-traffic landing pages:

• Hide the site header and/or footer on that product, so there's no navigation pulling attention away from the offer.
• Set a custom body background color (and opacity) just for that product.

Combine a custom Product Layout (Step 1–2) with the header and footer hidden here to get a fully self-contained sales page.

A/B testing two layouts

Instead of guessing which layout converts better, let real traffic decide. A product can run two Product Layouts as a live split test — visitors are split 50/50 and remembered for 30 days, so the same visitor always sees the same version.

1. Edit the product, and in the Product Page Template box check "Run this as an A/B split test instead".
2. Pick a published layout for Layout A and a different one for Layout B, then update the product. The single-layout dropdown is replaced by a read-only summary while the test is running — you can't change layouts mid-test, only end it.
3. Go to Noorifa → Split Tests to watch results: impressions, add-to-cart rate and purchase rate for each variant, side by side, with a confidence indicator once there's enough traffic to say which is ahead.
4. When you're satisfied, click Declare winner next to the better-performing variant. That layout becomes the product's normal layout, and the test moves to the page's "Past tests" list.

Landing pages & cash on delivery

To build a single-product landing page that takes orders on the page itself:

1. Create a page (or a custom product layout) and add your selling sections — Hero, benefits (Feature Cards), Video Testimonials, Trust Badges, Urgency.
2. Add the Inline Checkout block and pick the product(s) it sells.
3. The visitor enters name, address and phone and orders directly — no cart, no separate checkout. Ideal for cash-on-delivery.

Custom CSS / JS

Need a small tweak? Go to Noorifa → Custom CSS / JS and paste your own CSS or JavaScript. The theme wraps and loads them for you — CSS in the head, JS in the footer. This survives theme updates, unlike editing theme files directly.

Performance & SEO

Noorifa is built to be light and fast on mobile out of the box. Two settings sections help you go further:

• Performance — optional switches such as disabling XML-RPC and removing version query strings from assets. Turn these on unless a specific plugin needs them.
• SEO — set a site-wide title format and a fallback meta description so every page (including shop archives) has sensible search snippets. Works alongside dedicated SEO plugins if you use one.
• Integrations — paste your Google Analytics 4 and Facebook Pixel snippets to start tracking. Nothing loads until you add them.

Import / export settings

Under Noorifa → Import / Export you can export all your theme settings to a file and import them into another site — handy for moving from a staging site to production, or reusing a configuration across stores.

Updating the theme & plugin

• Theme — update it the same way you installed it (upload the new zip), or via your update channel if provided.
• Noorifa Core — when a theme update ships a newer plugin, the dashboard shows a one-click Update Noorifa Core notice. WooCommerce updates normally from Plugins.

Troubleshooting

The "required plugins" notice won't go away

It stays until both Noorifa Core and WooCommerce are active. Click each button in the notice, or install them from Plugins → Add New.

Blocks are missing from the inserter

Make sure Noorifa Core is active (Plugins). The Noorifa block category appears only when it's running.

"No shipping methods available" at checkout

Add a shipping zone that covers the customer's country with at least one rate — see WooCommerce setup.

My homepage shows blog posts

Set a static homepage under Settings → Reading — see Building the homepage.

A change I made in a theme file disappeared

Theme files are overwritten on update. Move the change to Noorifa → Custom CSS / JS or a child theme.

Support

Still stuck? When you contact support, include your WordPress version, PHP version, active theme & plugin versions (from Tools → Site Health → Info), and a description of what you expected versus what happened — it gets you a faster answer.

Noorifa Theme Handbook · Smart marketing, successful business. Built for WooCommerce.