Case study

PaViChi Performance-First WooCommerce Store

PaViChi performance-first WooCommerce homepage for fresh made-to-order food in El Salvador

PaViChi is a small food business in El Salvador offering freshly prepared ceviches, seafood cocktails, loaded potatoes, breaded specialties, pupusas, soups, salads, and other made-to-order dishes.

It is also my own ecommerce project, which gave me responsibility for more than implementation. I could evaluate the website from the perspectives of the developer, content editor, business owner, and customer—and make decisions based on the complete ordering experience rather than treating the work as a collection of isolated tickets.

The redesign replaced a legacy Divi implementation with a lighter WordPress and WooCommerce system designed around performance, maintainability, product discovery, and the way the business actually sells its food.

Replacing the inherited frontend

The previous website no longer met the performance, editing, and navigation standards I wanted for the store. Instead of continuing to layer optimizations over the inherited Divi structure, I rebuilt the public experience with a custom WordPress block theme and a companion plugin.

The theme owns the presentation: responsive layouts, typography, colors, cards, navigation, product surfaces, and the visual identity of the storefront.

The plugin owns the reusable catalog, category, navigation, and dynamic-content behavior that should not disappear if the design changes again. This separation keeps durable functionality outside the theme and gives the project a cleaner path for future growth.

Routine content remains editable through WordPress and WooCommerce. Products, prices, images, descriptions, categories, attributes, variations, and editorial category content can be maintained without modifying templates or application code.

Improving product discovery

A food catalog can become difficult to navigate even when it contains far fewer products than a large retail store. Customers rarely begin with an exact product name. They begin with an appetite: ceviche, seafood cocktails, loaded potatoes, something breaded, pupusas, soup, or a particular combination of ingredients.

The redesigned menu therefore combines search, visible category filters, product imagery, prices, variation cues, and direct paths into each product. Customers can browse the complete menu or narrow it quickly without learning how the WooCommerce catalog is organized internally.

PaViChi WooCommerce menu with product search, category filters, product cards, and variable pricing
PaViChi WooCommerce menu with product search, category filters, product cards, and variable pricing

The homepage introduces popular products first, then provides a visual category directory and a simple explanation of the ordering process. This creates several useful entry points instead of forcing every visitor through one long product archive.

The navigation remains progressively enhanced. Normal server-rendered links continue to work, while eligible menu and category transitions can update without unnecessary full-page reloads. The experience feels faster without sacrificing crawlable content or conventional browser behavior.

Using WooCommerce data more deliberately

The redesign did not require replacing WooCommerce’s existing product model. It required using that model more consistently.

Categories now describe meaningful product families. Attributes identify the choices customers actually make and support variable products where a dish is sold in different sizes or configurations. Products and variations are separated when they represent meaningfully different search intent or purchasing decisions, rather than forcing unrelated options into one ambiguous record.

This improves several parts of the system at once:

  • Customers understand what they are selecting.
  • Product cards can communicate prices and available options more accurately.
  • Search and category filtering produce more useful results.
  • Product URLs and metadata describe individual offerings more clearly.
  • Store administrators continue using familiar WooCommerce controls.
  • The catalog can expand without inventing a separate data structure for every new dish.

The result is a better information architecture built with native WooCommerce concepts rather than a parallel catalog that would be harder to maintain.

Turning categories into useful landing pages

The category pages are more than filtered grids. Each important category has an editorial introduction, relevant image, descriptive heading, supporting copy, breadcrumb context, and direct access to the matching products.

That approach helps customers understand what the category contains while creating stronger semantic pages for searches related to ceviches, seafood cocktails, prepared food, and local ordering in El Salvador.

Internal links connect the homepage, complete menu, category pages, and individual products. SmartCrawl provides editable titles and meta descriptions, while canonical URLs and the permanent redirect from pavichi.com consolidate the project around the established primary domain.

Writing for the actual brand

The redesign also gave PaViChi a clearer voice: direct, friendly, recognizably Salvadoran, and focused on food prepared only after the customer orders it.

Messages such as “¿Qué tenemos hecho? Nada.” are not generic restaurant copy. They communicate an operational difference: ceviches and cocktails are not left waiting in a display case. They are prepared when ordered.

The supporting sections explain the experience in practical language: choose a dish, provide the delivery location, confirm the order and payment, then receive food prepared for that request. The objective is to remove uncertainty between discovering a product and completing an order.

Photography, original illustrations, icons, color, and typography reinforce the same identity across the homepage, menu, categories, product cards, cart, account area, notices, and related-product experiences.

Performance as part of the product

WooCommerce can accumulate substantial frontend weight, especially when combined with a general-purpose page builder and overlapping extensions. Performance work therefore addressed the complete delivery path rather than relying on a single optimization setting.

The redesign reduced inherited frontend overhead, limited resources to those required by the page, optimized media and SVG delivery, improved caching behavior, and preserved server-rendered content alongside progressive navigation.

In a desktop PageSpeed Insights audit recorded on September 10, 2026, the homepage achieved:

  • Performance: 100
  • Accessibility: 100
  • Best Practices: 100
  • SEO: 100
  • First Contentful Paint: 0.4 seconds
  • Largest Contentful Paint: 0.7 seconds
  • Total Blocking Time: 50 milliseconds
  • Cumulative Layout Shift: 0
  • Speed Index: 0.6 seconds

These are lab results from a specific recorded run, not a promise that every device, connection, page, or future audit will produce identical numbers. They nevertheless provide concrete evidence that a WooCommerce storefront can remain visually rich and operationally useful without accepting a slow public experience as inevitable.

A small store with complete ownership

PaViChi is a compact ecommerce project, but it is technically substantial. It combines product modeling, variable products, custom WordPress development, conversion-oriented content, technical SEO, responsive UX, progressive enhancement, accessibility, performance, and day-to-day editorial usability.

Because I own the project, I can continue measuring the consequences of each decision after launch. I am responsible not only for whether the code works, but also for whether products are understandable, content is maintainable, navigation supports real customers, and the platform can grow without recreating the problems the redesign removed.

It is a small but surprisingly spicy WooCommerce build—both technically and literally.

Key contributions

  • Directed the redesign as both product owner and engineer.
  • Replaced the inherited Divi frontend with a custom WordPress block theme.
  • Developed a companion plugin for reusable catalog, category, navigation, and dynamic-content functionality.
  • Customized WooCommerce product cards, variable products, attributes, filters, galleries, tabs, notices, account areas, and related-product experiences.
  • Reorganized categories, products, attributes, and variations around clearer customer choices.
  • Created editorial category landing pages with descriptive content and internal links.
  • Designed the responsive storefront, fixed header, menu, product discovery, ordering guidance, cart, and mobile behavior.
  • Wrote the homepage, category, and product-oriented brand content in a consistent Salvadoran voice.
  • Used original photography, illustrations, and iconography to strengthen the brand identity.
  • Improved resource delivery, caching, SVG handling, semantic structure, accessibility, and technical SEO.
  • Implemented progressive navigation while preserving server-rendered, crawlable pages and standard link behavior.
  • Achieved a recorded desktop PageSpeed Insights result of 100 across Performance, Accessibility, Best Practices, and SEO.
  • Consolidated the acquired pavichi.com domain through a permanent redirect to the primary website.

Technologies

WordPress, WooCommerce, PHP, JavaScript, HTML5, CSS3, custom block themes, custom plugin development, progressive navigation, responsive web design, SmartCrawl, performance optimization, accessibility, and technical SEO.

View the website

https://haycoctelesamor.com/

← Back to all projects

Secret Link