YBO Product Title Normalization

Overview

YBO Product Title Normalization is a lightweight WooCommerce presentation plugin developed by YBO Digital to create consistent product-title heights across product grids, category pages, sliders and other product-listing layouts.

WooCommerce products frequently have titles of different lengths. Some products may require only one line, while others wrap across two, three or more lines. This creates uneven product cards, misaligned prices and buttons, and an inconsistent catalogue layout.

The plugin applies controlled title-height and line-clamping rules to WooCommerce product cards. Separate settings can be used for desktop and mobile displays so that the layout remains consistent across different screen sizes.

YBO Product Title Normalization changes only the visual presentation of product titles. It does not shorten, rewrite or permanently alter product names stored in WooCommerce.

Why This Plugin Exists

Uneven Product Cards

Product-title length can vary considerably across a WooCommerce catalogue.

Where one product has a short title and another has a much longer title, the height of each product card may differ. This can cause:

  • Prices to appear on different horizontal levels
  • Add-to-cart buttons to become misaligned
  • Product rows to look uneven
  • Excessive white space beneath shorter titles
  • Inconsistent spacing on mobile devices
  • Sliders and carousel layouts to change height between products

The plugin reserves a controlled title area so that product cards remain visually aligned.

Desktop and Mobile Require Different Rules

A title that fits comfortably across two lines on a desktop product grid may require additional space on a narrow mobile screen.

Using one fixed rule for every device can therefore create either excessive spacing on desktop or overly aggressive title clipping on mobile.

YBO Product Title Normalization provides separate controls for:

  • Desktop title lines
  • Desktop line height
  • Mobile title lines
  • Mobile line height
  • Mobile breakpoint

This allows the layout to be adapted to the actual design of the website.

Theme and Module Differences

WooCommerce product listings may appear in several places, including:

  • Native WooCommerce shop pages
  • Product-category archives
  • Search results
  • Homepage product sections
  • Divi layouts
  • Landing pages
  • Product sliders
  • Custom theme modules

These layouts do not always use exactly the same CSS selectors.

The plugin supports standard WooCommerce product-loop selectors, optional Woo Product Slider selectors and validated custom selectors for additional themes or modules.

Repeated Manual CSS Maintenance

Without a central plugin, title-height rules are often added manually through:

  • The WordPress Customizer
  • Divi Theme Options
  • Child-theme stylesheets
  • Individual page layouts
  • Slider-specific settings
  • Additional CSS plugins

This can result in duplicated, outdated or conflicting CSS.

YBO Product Title Normalization provides one controlled administration area where the title rules can be reviewed, adjusted, disabled or diagnosed.

How The Plugin Works

Step 1 – Read the Current Configuration

The plugin retrieves the saved desktop, mobile, alignment and compatibility settings.

If title normalization is disabled, no front-end CSS is produced.

Step 2 – Build the Selector List

The plugin starts with the standard WooCommerce product-title selectors.

Depending on the selected settings, it can also include:

  • Woo Product Slider title selectors
  • Theme-specific selectors
  • Module-specific selectors
  • Additional custom product-title selectors

Duplicate selectors are automatically removed.

Custom selectors are validated before being saved. Lines containing CSS declarations, rule braces, at-rules, URLs, comments or other unsafe content are discarded.

Step 3 – Calculate the Required Title Height

The plugin calculates the title area using:

  • The configured number of lines
  • The configured line height
  • The optional rounding buffer
  • Whether equal-height alignment is enabled

For example, a two-line title using a line height of 1.3em receives a calculated title height of approximately 2.6em.

A small pixel buffer can be added to accommodate browser, font and theme rounding differences.

Step 4 – Generate the Desktop Rules

The desktop configuration is applied as the default product-title rule.

Long titles are visually limited to the selected number of lines. Overflowing text is hidden while the full product title remains unchanged in WooCommerce and in the page HTML.

Where equal-height alignment is enabled, shorter titles reserve the same title area as longer titles.

Step 5 – Generate the Mobile Rules

A responsive media query applies the separate mobile values at or below the configured mobile breakpoint.

The mobile layout can therefore use a different:

  • Number of title lines
  • Line height
  • Calculated title height

Step 6 – Load the CSS Through WordPress

The generated CSS is registered and loaded through the WordPress style system.

The plugin does not directly print unmanaged style tags into the page header.

Administrators can choose whether the CSS should load:

  • On all public pages
  • Only on native WooCommerce pages

Sitewide loading is recommended where products appear on homepages, landing pages, sliders or custom builder layouts.

Step 7 – Provide a Browser Fallback

Modern browsers use multi-line clamping to limit the visible title.

The plugin also generates a height-and-overflow fallback for browsers that do not support the primary line-clamping method.

Administration Dashboard

The plugin is managed from:

YBO Apps → Product Titles

The administration area is divided into three tabs.

Overview

The Overview tab provides an immediate summary of:

  • Desktop title-line configuration
  • Desktop line height
  • Mobile title-line configuration
  • Mobile breakpoint
  • Current operational status
  • Plugin version
  • Safe operating boundaries

It also provides direct links to the settings and product documentation.

Settings

The Settings tab contains the complete title-normalization configuration.

A live preview demonstrates how the current desktop and mobile settings affect a sample product title.

The settings can be changed without editing theme files or writing custom CSS manually.

Diagnostics

The Diagnostics tab provides technical information for identifying theme or module conflicts.

Diagnostics include:

  • Plugin status
  • Plugin version
  • WordPress version
  • PHP version
  • WooCommerce version
  • Active WordPress theme
  • CSS loading scope
  • Number of active selectors
  • Configuration checks
  • Complete active selector list
  • Complete generated CSS

The generated CSS can be copied directly for testing or support investigation.

Configuration Settings

Enable Title Normalization

The complete front-end effect can be enabled or disabled without deactivating the plugin.

When disabled:

  • Saved settings are retained
  • No title-normalization CSS is loaded
  • Product titles continue to display according to the theme’s normal rules

CSS Loading Scope

Administrators can choose between:

All Public Pages

Loads the title rules throughout the public website.

This is recommended where WooCommerce products appear in:

  • Homepage sections
  • Divi modules
  • Product sliders
  • Landing pages
  • Custom product grids

Native WooCommerce Pages Only

Loads the CSS only when WordPress identifies the current page as a native WooCommerce view.

This may reduce unnecessary CSS output but should not be selected where products are displayed on normal pages outside the WooCommerce shop and archive templates.

Desktop Maximum Lines

Controls the number of product-title lines displayed on larger screens.

The setting supports between one and eight lines.

Desktop Line Height

Controls the vertical spacing between desktop title lines.

Values between approximately 1.2em and 1.4em will generally suit most themes, although the correct setting depends on the website’s font and design.

Mobile Maximum Lines

Controls the number of product-title lines displayed at or below the mobile breakpoint.

This value can be configured independently from the desktop setting.

Mobile Line Height

Controls the line spacing used for mobile product titles.

Mobile Breakpoint

Determines the maximum screen width at which the mobile title settings are used.

The default breakpoint is suitable for common mobile layouts but can be adjusted to match the website’s theme or builder breakpoints.

Equal Title-Height Alignment

When enabled, the plugin applies a minimum title height based on the configured number of lines.

This keeps the elements beneath each product title aligned even where some titles contain fewer lines.

When disabled, long titles are still clamped, but shorter titles do not reserve the complete configured title area.

Rounding Buffer

Some fonts, browsers and themes calculate line heights with small fractional differences.

The rounding buffer adds a limited number of pixels to the maximum title height to prevent the last line from being unintentionally clipped.

Theme Override Protection

Some themes use highly specific CSS rules for WooCommerce product titles.

Theme override protection adds !important to the generated title rules so that the plugin settings take precedence.

This setting is enabled by default because product-title styling is frequently overridden by themes and page builders.

It can be disabled where a custom theme requires more selective CSS priority.

Woo Product Slider Support

Optional selectors can be enabled for product-title elements produced by Woo Product Slider.

This setting should be enabled only where the supported slider is installed and its titles require normalization.

Custom Title Selectors

Administrators can enter additional CSS selectors for product-title elements created by other themes, sliders or modules.

One selector should be entered per line.

The plugin uses a deliberately restrictive selector validator. Unsafe or malformed entries are discarded when the settings are saved.

Custom selectors should identify only the product-title element. They should not contain CSS properties or complete CSS rules.

Delete Data During Uninstall

Administrators can choose whether the saved plugin settings should be removed when the plugin is deleted through WordPress.

When this setting is disabled, configuration data is retained so that the plugin can be reinstalled without losing its previous settings.

Live Preview

The Settings tab includes separate desktop and mobile product-card previews.

The preview responds to changes made to:

  • Maximum title lines
  • Line height
  • Equal-height alignment
  • Rounding buffer

The preview is intended as a configuration guide. Final testing should still be performed on the actual website because themes, fonts, product-card widths and module styles may differ from the administration preview.

User Permissions

By default, access to the plugin administration area is restricted to WordPress administrators with the manage_options capability.

Administrators can:

  • View the operational status
  • Change desktop and mobile rules
  • Enable or disable title normalization
  • Configure supported selectors
  • Review diagnostics
  • Copy the generated CSS
  • Reset the plugin to its recommended defaults
  • Control uninstall-data retention

The shared YBO Apps capability can be modified through the standard YBO capability filter where a website requires a different access policy.

YBO Apps Integration

YBO Product Title Normalization is integrated into the shared WordPress administration menu:

YBO Apps → Product Titles

The shared YBO Apps Overview displays the plugin alongside other YBO-developed WordPress applications installed on the website.

The YBO Apps card includes:

  • Plugin name
  • Short description
  • Installed version
  • Active or inactive status
  • Direct access to the plugin dashboard
  • Direct access to the product documentation

This avoids creating multiple unrelated top-level WordPress menu items for individual YBO plugins.

Performance and Safety Considerations

YBO Product Title Normalization is deliberately lightweight.

The plugin:

  • Does not edit WooCommerce products
  • Does not rewrite product titles
  • Does not modify product database records
  • Does not alter product SKUs, prices or descriptions
  • Does not replace WooCommerce templates
  • Does not make external API requests
  • Does not send tracking or analytics data
  • Does not run background queues
  • Does not add front-end JavaScript
  • Does not perform database searches on product listings

The front-end output consists only of the generated CSS required for the configured selectors.

Administration styles and scripts are loaded only on the plugin’s own YBO Apps screens.

Recommended Use

Before enabling the plugin on a production website:

  1. Review the website for existing title-height CSS in Divi, the Customizer, the child theme or another plugin.
  2. Remove or disable duplicate rules where possible.
  3. Configure the desktop title lines and line height.
  4. Configure the mobile title lines and breakpoint.
  5. Test the shop and product-category pages.
  6. Test any homepage product sections or sliders.
  7. Check product cards containing unusually long titles.
  8. Confirm that prices and buttons remain aligned.
  9. Use the Diagnostics tab where a theme rule overrides the generated CSS.
  10. Test custom selectors on a staging website before applying them to production.

Sitewide CSS loading should remain enabled where products are displayed outside native WooCommerce pages.

Requirements

The plugin requires:

  • WordPress 6.2 or later
  • PHP 7.4 or later
  • WooCommerce

The plugin includes native support for standard WooCommerce product-loop title selectors.

Optional compatibility is provided for:

  • Woo Product Slider
  • Theme-specific product grids
  • Page-builder product modules
  • Custom product-card layouts

Additional layouts can be supported through validated custom selectors or through the available developer selector filter.

When WooCommerce is not active, the plugin retains its settings but does not load front-end title CSS.

Support

YBO Product Title Normalization is a custom-developed WooCommerce presentation plugin by YBO Digital.

Support requests:
support@ybo.digital