Skip to main content

Service Packages Grid

GridServicePackages Services 4 options

Two-group pricing grid (retainers and builds) fed by the Services post type.

Published · by Christopher Alberto

Live demo

Open full screen

At a glance

Component
GridServicePackages
Category
Services
Used as
Page block — “Grid: Service Packages”
Options
4 editable fields
Built with
PHP, Twig, SCSS
Platform
WordPress · Flynt theme · Timber/Twig · ACF Pro

About this component

The pricing grid from the Services page: packages are grouped into Maintenance Retainers and Custom Builds, each card showing price, billing and highlights and linking to its landing page.

Highlights

  • Prices live once on each Service post, so the grid, landing pages and contact dropdown never disagree.
  • Featured packages are highlighted; each group has its own accent colour.

Options

Editors add this as Grid: Service Packages in a page's components. Every field it exposes:

Option Field Type Details
Number num text
Heading heading text Default: Services
Intro intro textarea
Show "View all services" link showArchiveLink true false Default: on

Under the hood

Components/GridServicePackages/

  • _style.scss Styles (SCSS) 195 lines
  • functions.php Fields & data (PHP) 53 lines
  • index.twig Markup (Twig) 55 lines

Share this component
Christopher Alberto

Built by

Christopher Alberto · Senior WordPress Engineer

Senior WordPress engineer with a decade-plus of builds across New Zealand, Australia, the UK, the US, Canada and Germany — FlyntWP, Roots/Sage, WooCommerce and custom platforms, built for speed and maintainability.

LinkedIn GitHub

Related components