Skip to content
TP Webmaster

Supplements • E-commerce

Cronocaps Hair

We built an e-commerce store with a conversion-oriented home page, integrated with the full commercial structure of WooCommerce.

Cronocaps Hair sells a hair vitamin in capsule form. Selling directly to the end consumer, the brand needed more than a page to present the product. It needed a digital operation of its own, able to bring together positioning, content, offers, payments, customer service and order tracking.

The project was built as a complete e-commerce store, with a commercial landing page, shop, cart, checkout, customer area, blog and institutional pages.

The Cronocaps Hair website on desktop and mobile

The challenge

Buying a supplement involves questions, comparing options and a need for trust before deciding.

The site had to explain what the product proposes, present the different treatments and answer the main objections without making the experience tiring.

It also had to stand on a structure of its own, with a consistent visual identity and integrated commercial features, rather than relying on a generic page or an external checkout disconnected from the brand.

The solution

We built an e-commerce store with a conversion-oriented home page, integrated with the full commercial structure of WooCommerce.

The experience guides visitors from the product introduction to choosing a treatment. The commercial benefits, the kits, the reviews and the most common questions appear in a sequence designed to remove objections along the way.

The site isn't just a landing page. The project includes a complete shop, cart, checkout, customer area, product pages, blog, contact and commercial policies.

A theme built to measure

The interface was implemented in a custom WordPress theme, developed specifically for Cronocaps Hair.

The theme combines PHP, compiled Tailwind CSS and vanilla JavaScript. The visual structure doesn't depend on a page builder and was coded to match the design approved for the brand.

That gave us tighter control over:

  • Page structure
  • Responsiveness
  • Visual hierarchy
  • Commercial components
  • Interactions
  • WooCommerce integration
  • Number of files loaded
  • Behavior across different screens

The WordPress admin still handles products, orders, customers and content, while the visual layer stays custom.

Cart and checkout

The purchase happens entirely within the site.

In the cart, customers can review products, change quantities, apply coupons and check the totals before moving to payment.

The checkout was integrated with Mercado Pago and adapted to the Cronocaps Hair visual identity.

The integration offers payment methods such as:

  • Credit card
  • Pix
  • Mercado Pago balance
  • Payment methods linked to the customer's account

Sensitive financial data is processed by Mercado Pago's infrastructure, while WooCommerce receives and manages the information needed to update the order.

Customer area and orders

The project also has an authenticated area for buyers.

Through it, customers can reach information about their account and the orders they've placed.

The structure supports:

  • Order history
  • Purchase status
  • Saved addresses
  • Account details
  • Password recovery
  • Payment information
  • Details of each order

The tracking link takes customers to their orders area, centralizing where they look up purchases made on the site.

Meta integration

The store was connected to Meta's advertising ecosystem through Facebook for WooCommerce.

The integration tracks important events along the commercial journey, such as:

  • Page views
  • Product views
  • Add to cart
  • Checkout started
  • Purchase

That information can be used to analyze campaigns, build audiences and improve how sales generated by ads are measured.

Blog and content strategy

Alongside the commercial structure, we created a blog for content on hair, skin, nails, beauty and wellbeing.

Articles can be published and updated from the WordPress admin. Each piece gets its own page, category, date, image and structure ready for indexing.

The blog widens what the site does, letting the brand also attract visitors through informational searches instead of depending solely on paid ads.

Technical SEO

The project has a structure prepared for search engines.

It includes features such as:

  • Titles and descriptions
  • Friendly URLs
  • Canonical URLs
  • Open Graph
  • Metadata for social networks
  • XML sitemap
  • Breadcrumbs
  • Structured data
  • Product markup
  • Offer markup
  • Review markup
  • Individual pages for each kit
  • A dedicated structure for blog articles

The home page uses product and offer structured data, helping search engines understand the relationship between the brand, the product, the kits and their prices.

Customer service

The site offers several ways to reach the brand.

Visitors can use the floating WhatsApp button or open the contact page, which has a form with fields for name, email, phone and message.

We also created pages for frequently asked questions, privacy policy, terms of use, and exchanges and returns.

A responsive experience

The interface was developed to work on phones, tablets and desktops.

Elements such as the menu, treatment cards, reviews, videos, comparison blocks, cart and checkout rearrange themselves according to screen size.

Carousels are enabled mainly where they help mobile navigation. On larger screens, certain components switch to grids, making better use of the space available.

The project also accounts for:

  • Touch navigation
  • Visible focus states
  • Alternative text
  • Controls identified by accessibility attributes
  • The user's reduced-motion preference
  • Lazy loading of images
  • Controlled video playback

Performance and infrastructure

The theme was developed with its own CSS and JavaScript files, loading only the components the experience needs.

The infrastructure runs on PHP and LiteSpeed. Caching public pages cuts the processing required on repeat visits.

We also applied:

  • Compiled Tailwind CSS
  • Framework-free JavaScript on the frontend
  • Deferred script loading
  • Lazy loading
  • Images in modern formats
  • Page caching
  • Controlled link prefetching
  • Files separated by responsibility
  • Responsive layout

What was delivered

The result is a digital operation of its own for Cronocaps Hair, bringing presentation, content and sales together in a single environment.

The brand now has a conversion-oriented landing page, an e-commerce store, integrated checkout, a customer area, order tracking, coupons, reviews, customer service and a blog.

For the team, products, orders, stock, customers, offers and content can all be managed from the admin panel.

For the consumer, the whole journey happens inside one consistent experience, from the first contact with the brand to checking the order after the purchase.

Technologies used

  • WordPress
  • WooCommerce
  • Custom-built WordPress theme
  • PHP
  • Tailwind CSS
  • HTML5
  • CSS3
  • JavaScript
  • Swiper.js
  • Lucide Icons
  • Mercado Pago
  • Meta Pixel Facebook for WooCommerce
  • LiteSpeed
  • Responsive layout

Keep reading

More case studies.

Next step

Want a project like this one?

Tell us what you need to build. We answer with a direction, not a generic quote.

No cost and no commitment.