Introduction

I recently completed an F&B supplier website development project for Fosserca. Fosserca operates as a trusted supplier and wholesale distributor of raw food and beverage ingredients for restaurants, cafés, hotels, and commercial kitchens across Indonesia. As the lead WordPress developer, I took full charge of constructing their digital catalog platform. My primary goal was to create a fast, scalable web application that showcases bulk ingredients and streamlines B2B wholesale inquiries.

Project Overview

Fosserca required a modern corporate web platform to showcase their extensive inventory of raw food ingredients. Their previous communication channels made it difficult for commercial kitchens and hotel buyers to browse wholesale product specifications easily. Therefore, I was tasked with building an interactive digital catalog from the ground up. I designed the site to build supplier trust, organize bulk product categories, and drive direct quote requests from hospitality managers.

My Role

As the WordPress developer on this project, I managed the entire development lifecycle from data architecture to final deployment. I collaborated with stakeholders to organize complex food ingredient categories into clean, visual layouts. Using Elementor alongside Crocoblock dynamic tools, I constructed flexible listing templates. Furthermore, I authored custom CSS and JavaScript to enhance user interactions and guarantee responsive behavior across all viewports.

Design & Development Process

My development workflow prioritized loading speed, clean site architecture, and seamless B2B user experience.

First, I established the WordPress core environment and mapped out the product catalog taxonomy. To manage multi-category food ingredients efficiently, I implemented Crocoblock JetEngine to create Custom Post Types, custom fields, and dynamic listing grids.

Second, I assembled the visual interface using Elementor. Because default page builder modules lacked advanced interactive controls, I wrote custom CSS and JavaScript. This custom code refined product card layouts, hover effects, and interactive filtering menus.

Third, I focused heavily on mobile responsiveness. Kitchen managers and procurement officers frequently research suppliers using mobile devices. I adjusted breakpoints and optimized scripts to ensure instant page loading and effortless navigation on all screens. Finally, I tested the catalog filtering system before site launch.

Key Features

• Dynamic Wholesale Catalog: I built structured listing grids using Crocoblock to showcase raw food and beverage ingredients.
• Interactive Category Filters: I wrote custom JavaScript and configured search filters so buyers can sort products by category and application.
• Mobile-First Responsive Design: I ensured all pages adapt smoothly across smart devices, tablets, and desktop displays.
• Tailored UI Styling: I authored custom CSS to polish product cards, specification badges, and call-to-action buttons.
• Direct B2B Quote System: I integrated prominent inquiry buttons to connect bulk buyers directly with sales teams.
• Scalable Backend Setup: I structured custom post types so internal staff can update wholesale inventory effortlessly.

Challenges

Executing an F&B supplier website development project involves managing extensive wholesale product variations without cluttering the user interface. Displaying packaging sizes, ingredient origins, and bulk order specs clearly on small mobile screens presented a distinct technical challenge.

I solved this by building dynamic listing templates in Crocoblock JetEngine combined with custom CSS flexbox rules and lightweight JS handlers. This setup allowed specification details to collapse cleanly on smaller viewports. As a result, product data remains clear on mobile screens while maintaining a clean grid on desktop monitors.

Technologies Used

• WordPress: Core content management system powering the wholesale supplier platform.
• Elementor: Page builder utilized for layout structure and visual section design.
• Crocoblock (JetEngine): Dynamic plugin suite used to build Custom Post Types and filtering grids.
• Custom CSS & JS: Authored to refine interactive elements, filter logic, and responsive breakpoints.

Project Outcome

The completed platform provides Fosserca with a professional digital catalog in the food and beverage distribution market. Through my targeted development work, commercial kitchens and hotel managers can now browse ingredients and request bulk quotes effortlessly. The dynamic Crocoblock setup simplified content administration for their internal team, while my custom scripts delivered a polished user experience.