Project Overview
A.N.T. Metallofabrica Ltd is a Cyprus-based manufacturer and distributor operating across four product lines: custom stainless steel catering equipment, barbeque grills and outdoor kitchens, furniture, and heaters and fans. The business serves a predominantly B2B clientele — hotels, restaurants, cafes, bakeries, butcheries, pharmaceutical facilities, hospitals, and food and beverage producers — with products ranging from commercial kitchen hoods and refrigeration counters to Kamado grills, upholstered sofas, and outdoor gas heaters. The company both manufactures its own designs and imports from selected international suppliers, and carries a proprietary sub-brand, the Bullheat Collection, covering premium BBQ grills and custom outdoor kitchens. A business of this complexity, serving professional buyers through a relationship and enquiry model rather than direct online transactions, required a product catalogue architecture that could accommodate its breadth without becoming unnavigable.
Business Goals
The client needed a professional digital product catalogue that would allow trade buyers — procurement managers at hotel chains, restaurant groups, and institutional facilities — to browse the full product range, access individual product details, and submit an enquiry without being routed through a conventional ecommerce checkout. This was a deliberate business decision: the products are custom-specified, often manufactured to client requirements, and sold through a quotation and consultation process rather than a fixed-price online transaction. WooCommerce was the appropriate platform for managing this volume of structured product data, but the standard cart and checkout functionality was intentionally removed — the catalogue needed to function as a professional showroom, not a shop. A popup-based product detail interface replaced the standard WooCommerce single product page, keeping the browsing experience fluid and contained without loading separate pages for each item.
Website Strategy
The product hierarchy was the central architectural challenge. The Stainless Steel Equipment category alone contains 22 sub-categories — Hoods and Exhaust Systems, Fans, Tables and Benches, Sinks, Hand Sinks, Racks and Shelving, Cupboards, Trolleys, Refrigerators, Heating Units, Bars, Buffet and Service Lines, and more — each with further nested sub-types extending to four levels of depth in places, such as Air Filters branching into Baffle Type, Mesh Type, and Active Carbon Filters. The Furniture category adds 15 sub-categories covering armchairs, chairs by material type, stools, sofas, tables, sunbeds, day beds, and waiting area furniture. Barbeque Grills and Outdoor Kitchens adds a further 8 sub-categories, and Heaters and Fans a further 2. Navigating this from a top-level Products page without overwhelming visitors required a deeply structured hierarchical navigation panel built into the Products page layout, displayed as an expandable sidebar tree that mirrors the full product taxonomy without requiring visitors to navigate blind through the catalog.
Design & Development Process
The Figma design was converted to WordPress using Elementor for the homepage and informational page sections, with WooCommerce managing the product catalogue architecture. Custom CSS was applied throughout to align the WooCommerce category and product grid rendering with the Figma design’s visual language — overriding default WooCommerce card styling, button treatments, and grid spacing to match the design precisely rather than accepting theme defaults.
The homepage was structured to introduce the four product lines as the primary content, with each category presented as a full-width image section linking through to the relevant category archive. The “Bullheat Collection” sub-brand was given its own homepage feature block, positioning it as a premium range within the broader BBQ Grills category. This homepage-level brand separation was a deliberate design decision to give the sub-brand visibility without fragmenting the main navigation structure.
Technical Implementation
WooCommerce’s cart and checkout functionality was disabled entirely, with the Add to Cart button removed from all product listing and detail views and replaced with an Enquire Now action routing visitors to the contact form. This required custom PHP and CSS work to suppress the standard WooCommerce purchase flow at the template level without disrupting WooCommerce’s product data management and category architecture, which continued to power the catalogue structure correctly.
A custom popup product detail layer was built using Elementor Pro’s popup builder triggered from the product listing grid, displaying product images, description, and the enquiry prompt within an overlay panel rather than loading a separate single product page. For a product catalogue spanning hundreds of items across four-level deep categories, this approach keeps the browsing experience continuous — a buyer comparing multiple sink types or trolley variants can review each product’s details and return to the listing without repeated full page loads, which matters considerably for trade buyers who may be working through a long specification list.
Brevo was integrated as the transactional and marketing email platform, replacing WordPress’s default PHP mail function for all enquiry form notifications and handling the business’s outbound email communications to trade accounts. CRM integration was configured to sync contact and enquiry data automatically from form submissions through to the client’s customer relationship management system, ensuring every product enquiry from the website is captured and assigned in the CRM without manual data entry.
User Experience Improvements
The expandable product hierarchy sidebar on the Products page addresses the core UX challenge of a four-level deep catalogue: giving visitors a visible map of the full product range without requiring them to guess what sub-categories exist or navigate by trial and error. A hotel procurement manager specifying equipment for a commercial kitchen can expand the Stainless Steel Equipment category in the sidebar, locate Tables and Benches or Sinks directly, and reach the relevant sub-category archive in two clicks regardless of where they land in the Products section. The popup product detail layer preserves this context, keeping the visitor in the catalogue browse state rather than pulling them out to a separate product URL with a back button to navigate.
Performance Optimization
Disabling the WooCommerce cart and checkout functionality removed a meaningful volume of session-state and cookie-management scripts that WooCommerce loads by default for transactional stores but that serve no purpose in a catalogue-only implementation. This was a performance benefit as much as a UX decision. Product images across the four-level category tree were served in WebP and AVIF formats — visible in the Stainless Steel Equipment category images — to keep the visually dense product grid pages loading quickly despite the image count each category archive carries.
Mobile Optimization
The four-level expandable product sidebar required specific mobile handling: a full desktop-width accordion panel does not translate directly to a mobile screen without occupying too much vertical space before the product grid is visible. At mobile widths, the sidebar was reconfigured to present as a collapsible panel accessible via a toggle rather than an always-visible column, keeping the product browsing area the primary visible element with the navigation accessible on demand. The popup product detail overlay was tested across touch devices to confirm that the dismiss behavior, image display, and enquiry CTA all function correctly without relying on hover states that have no mobile equivalent.
Conversion Optimization
For a B2B trade business operating on a quotation model, the conversion goal is a qualified product enquiry with enough specification detail for the sales team to respond with an accurate quote. The Enquire Now CTA within the product popup, combined with the contact page’s direct phone and email options, gives trade buyers multiple paths to initiate a conversation regardless of how far through the catalogue they are when they decide to reach out. The CRM integration ensures no enquiry is lost or delayed in reaching the relevant account manager, which is the operational outcome that actually drives follow-up revenue from catalogue visits.
Final Outcome
The completed website gives A.N.T. Metallofabrica a professional, scalable digital product catalogue capable of representing its full manufacturing and distribution range to a trade audience. The WooCommerce catalogue architecture — without cart or checkout — gives the business a structured, manageable product database behind the scenes while presenting a clean enquiry-focused browsing experience to visitors. Brevo and CRM integration ensure every contact point from the website flows into the business’s existing communication and account management workflow without manual intervention.
Conclusion
This WooCommerce catalogue development project for A.N.T. Metallofabrica demonstrates how WooCommerce can be effectively repurposed as a B2B product catalogue platform when the standard transactional checkout is not the right model for the business. The custom popup product detail layer, the four-level navigable product hierarchy, and the Brevo and CRM integration together deliver a professional digital showroom for a manufacturer whose sales process begins with a conversation, not a cart.