Case Study: Turning WooCommerce Products into a Visual Landing Page Builder

Landing pages are an important part of many websites, particularly where businesses want to target specific services, audiences, locations or search terms.

The challenge is that these pages often need to combine carefully written SEO content with existing products from elsewhere on the website.

For one of our customers, an event prop rental business using WooCommerce, JUCRA had already developed a shortcode system that allowed selected products to be displayed within bespoke landing pages.

The system worked well visually.

However, maintaining those pages still required knowledge of product IDs, shortcode syntax and page structure.

Rather than accepting this as an ongoing developer task, JUCRA developed a custom WordPress plugin that turned the existing system into a visual landing page product builder.

The Original Requirement

The customer wanted to create a series of targeted landing pages around different types of events and services.

These pages needed two distinct types of content.

The first was conventional page content.

This included:

• Page titles
• Introductory content
• SEO copy
• Internal links
• Calls to action

The second was a curated selection of products already available within the customer’s WooCommerce catalogue.

Rather than automatically displaying an entire product category, individual products needed to be selected and arranged deliberately.

Some sections might contain one featured product.

Others might contain two products.

Others might contain three.

The customer also wanted to divide products into meaningful sections with headings appropriate to the landing page.

This meant that a conventional WooCommerce product category or standard product grid was not flexible enough.

The Original Shortcode System

JUCRA initially developed a custom shortcode specifically for displaying selected WooCommerce products within these landing pages.

A shortcode could receive a list of WooCommerce product IDs and generate the required front-end presentation.

Depending on the number of products supplied, the shortcode could create:

• A single-product layout
• A two-column product layout
• A three-column product layout

The shortcode retrieved the actual WooCommerce product information and generated a consistent presentation containing information such as:

• Product image
• Product title
• Short description
• Rental and installation price
• Link to the full product page

This provided an effective first solution.

Most importantly, it avoided manually duplicating product information inside individual landing pages.

The Maintenance Problem

Although the shortcode system worked well technically and visually, it created a usability problem.

Building or modifying a landing page could involve multiple shortcodes containing different WooCommerce product IDs.

A website administrator wanting to change a product therefore needed to:

• Find the WooCommerce product.
• Identify its internal product ID.
• Locate the correct shortcode within the landing page.
• Replace the appropriate ID.
• Ensure the shortcode syntax remained valid.
• Check that the correct number of products remained within the row.

Reordering products or changing the page structure involved even more manual editing.

None of these tasks were particularly difficult for a WordPress developer.

But that was precisely the problem.

They should not require a WordPress developer.

The visual presentation had already been designed.

The products already existed.

The website administrator simply needed an easier way to describe:

Which products should appear, in which order, and in what layout?

Separating SEO Content from Product Layout

Rather than replacing the normal WordPress page editor, JUCRA deliberately separated the two responsibilities.

The WordPress page remains responsible for the actual landing page.

This means the administrator can continue using the familiar WordPress editing environment for:

• SEO content
• Introductory copy
• Headings
• Images
• Calls to action
• Other normal page content

The product arrangement is managed separately using a custom WordPress post type created specifically for landing page product layouts.

This separation is important.

The customer does not need a completely new page builder.

They already have a page editor.

What they needed was a specialised interface for the part of the page that was difficult to manage.

The Visual Product Layout Builder

JUCRA developed a bespoke WordPress plugin called:

JUCRA Landing Page Products Creator

The plugin adds a dedicated administration area for creating product layouts.

Instead of entering product IDs or constructing shortcodes manually, the administrator works with a visual row-based interface.

A landing page product layout can contain as many rows as required.

Each row contains:

• An optional section title
• A choice of one, two or three columns
• A product selector for each available column

The administrator therefore builds the product area in approximately the same way that they think about the finished page.

There is no requirement to understand the underlying HTML, WooCommerce queries or shortcode logic.

Flexible Product Rows

Each row can be configured independently.

The administrator simply chooses:

1 Column, 2 Columns or 3 Columns

The interface then automatically provides the corresponding number of product positions.

For example:

One column

A single product can be displayed as a larger featured product.

Two columns

Two related products can be presented side-by-side.

Three columns

Three products can be displayed as a conventional product grid.

Rows can be added as required and reordered when the structure of the landing page changes.

This gives the administrator considerable flexibility without exposing them to the complexity of a general-purpose page builder.

Searching WooCommerce Products

One of the most important usability improvements was removing the need to know WooCommerce product IDs.

Each product position includes a product search facility.

The administrator begins typing the product name and matching WooCommerce products are returned.

Once a product is selected, the system stores its internal WooCommerce product ID.

This distinction is important.

The administrator works with:

Product names and images

while the application works with:

WooCommerce product IDs

The underlying relationship therefore remains reliable even if the product name is subsequently changed.

It also significantly reduces the possibility of administrators selecting the wrong product because of an incorrectly copied numerical ID.

Creating Product Sections

During testing we identified another important part of the original landing page design.

Products were not simply displayed as one continuous grid.

They were grouped into editorial sections with headings such as:

A WARM WELCOME

and:

BEAUTIFUL BEGINNINGS

The product builder was therefore extended so that each row can optionally introduce a new section.

When a section title is supplied, the plugin generates the corresponding styled heading before the product row.

When the field is left empty, the row simply continues beneath the previous section.

This means a section can contain one row or several rows without requiring additional shortcodes or page-builder elements.

Using Existing WooCommerce Data

The plugin does not create copies of WooCommerce products.

This was an important architectural decision.

The landing page layout stores only the relationship between the layout and the selected product.

The actual product information continues to come directly from WooCommerce.

In simplified terms:

Landing Page → Product Layout → Product ID → WooCommerce Product

This means that if the customer later changes:

• Product title
• Product image
• Short description
• Price
• Product URL

the landing page automatically uses the current WooCommerce information.

There is no second copy of the product information to maintain.

WooCommerce remains the single source of truth for product data.

One Shortcode Per Landing Page

Although the administration interface is now visual, the final connection to the WordPress page remains intentionally simple.

Each product layout has its own ID.

The landing page therefore requires only a single shortcode referencing that layout.

Conceptually:

WordPress Landing Page → One Shortcode → Complete Product Layout

The shortcode loads the corresponding layout, processes each row in order, retrieves the selected WooCommerce products and generates the complete product section.

The administrator no longer needs to manage separate shortcodes for every product row.

If the layout changes, the shortcode on the WordPress page does not need to change.

Preserving the Existing Front-End Design

A key part of this project was recognising what did not need to be rebuilt.

The original product shortcode already produced a front-end design that worked well.

Rather than redesigning the product presentation, JUCRA reused the existing rendering structure within the new plugin.

The new system therefore changed the administration experience without unnecessarily changing the visitor experience.

This included retaining:

• The established product image presentation
• Existing typography
• Product descriptions
• Pricing presentation
• Learn More buttons
• One, two and three-column layouts
• Responsive behaviour
• Section heading styling

This is an important principle in bespoke development.

A new administration system does not automatically require a new front-end system.

If part of an application already works well, it can often be reused.

The New Publishing Workflow

The previous workflow looked approximately like this:

Create page → Write SEO content → Find products → Find product IDs → Construct individual shortcodes → Arrange shortcodes → Add section headings → Preview page → Correct IDs or layout → Publish

The new workflow is:

Create page → Write SEO content → Create product layout → Search and select products → Choose columns → Add section headings → Insert one shortcode → Publish

Future changes are even simpler.

For example, replacing a product no longer requires editing the actual landing page.

The administrator opens the corresponding product layout, searches for the replacement product, selects it and updates the layout.

The landing page then reflects the change automatically.

The Result

The finished solution provides the customer with a purpose-built landing page product management system inside WordPress.

It allows a non-technical administrator to:

• Create structured product sections.
• Search the existing WooCommerce catalogue.
• Select products visually.
• Choose one, two or three-column layouts.
• Add editorial section headings.
• Reorder product rows.
• Replace products without editing shortcode IDs.
• Maintain landing pages without routine developer intervention.

At the same time, WooCommerce continues to manage the actual products and WordPress continues to manage the actual page content.

The plugin does not attempt to replace either system.

It connects them.

The result is a much faster publishing workflow and considerably less opportunity for accidental errors.

More importantly, the customer now has control over a task that previously depended on a developer.

Lessons Learned

This project demonstrates several useful principles.

• A technically functional system is not necessarily an efficient system for the people who maintain it.
• Shortcodes are extremely useful, but complex shortcode configurations should not always be exposed directly to website administrators.
• Purpose-built administration interfaces can be simpler than general-purpose page builders.
• Existing WooCommerce products should normally remain the single source of truth rather than being duplicated into landing pages.
• Separating page content from product layout makes both easier to maintain.
• Autocomplete product search is considerably more user-friendly than requiring administrators to locate internal product IDs.
• Bespoke WordPress plugins can automate very specific business workflows without changing the rest of the website.
• Existing front-end components can often be reused while completely redesigning the administration workflow behind them.

JUCRA Recommendations