Mastering WooCommerce Order Display: Fixing Product Variation Titles on Invoices

In the vibrant ecosystem of WooCommerce, maintaining clarity and accuracy in order documentation is paramount. A common challenge faced by store owners, as highlighted in the support forum topic "Variations showing up in title on orders," is the improper display of product variation attributes directly within the main product title on order invoices. This issue can lead to cluttered invoices, confusion for both customers and administrators, and a less professional brand image.

The user's specific concern was that their order invoices displayed "Cake title flavor color Sku: xxx Size: xxx" instead of the desired structured format: "Cake title Sku: xxx Flavor: xxx Size: xxx Colors: xxx." Acknowledging this as a "known issue," they sought a definitive solution.

Understanding WooCommerce Order Item Display

By default, when a customer selects a product variation, WooCommerce often appends the chosen variation attributes (like "Flavor" or "Color") directly to the product title in various display contexts, including the cart, checkout, and order summaries. While this can provide immediate context, it can become redundant or problematic when these same attributes are also intended to be displayed as separate item meta-data lines, as desired by the forum user.

The goal is to ensure that the main product title remains clean (e.g., just "Cake title"), while all relevant variation attributes (SKU, Flavor, Size, Colors) are presented clearly as distinct meta-data entries beneath the product name. The "known issue" often stems from this default behavior, compounded by how themes or plugins might render order details.

The Solution Path: Options for Resolution

1. Review Theme and PDF Invoice Plugin Settings

Before diving into custom code, the first and often easiest step is to explore existing settings within your theme and any dedicated WooCommerce PDF invoice plugins you might be using. Many modern themes and invoice plugins offer robust customization options for how product titles and variation attributes are displayed on invoices, packing slips, and order emails.

• Theme Customizer: Check your WordPress Customizer (Appearance > Customize) for WooCommerce-specific settings that might control order display.
• Plugin Settings: If you use a plugin like "WooCommerce PDF Invoices & Packing Slips," "WooCommerce Print Invoice & Delivery Note," or similar, navigate to its settings page. These plugins typically provide granular control over which fields appear, their order, and whether variation attributes are merged into the title or displayed separately. Look for options related to "Product Name Display," "Item Meta," or "Variation Attributes." Adjusting these settings can often resolve the issue without any coding.

2. Implement Custom Code for Direct Control

If theme or plugin settings don't offer the desired level of control, a targeted code snippet can precisely modify how product names appear on orders. The core problem, as described by the user, is that "flavor color" is merged into the product title. We can use a WooCommerce filter to strip these variation attributes from the main product name, allowing them to be displayed as separate meta data if properly configured.

Step-by-Step Instructions for Custom Code Implementation:

1. Access Your Site's Files: You'll need FTP/SFTP access or a file manager via your hosting control panel.
2. Navigate to Your Child Theme: Always implement custom code in a child theme's functions.php file. This ensures your customizations are not lost when your main theme updates. If you don't have a child theme, create one or use a plugin like "Code Snippets" to add the code safely.
3. Add the Code Snippet: Open your child theme's functions.php file and add the following code:

add_filter( 'woocommerce_order_item_name', 'woo_remove_variation_from_order_item_name', 10, 2 );

/**
 * Removes variation attributes from the product name on order items,
 * allowing them to be displayed separately as item meta.
 *
 * @param string          $item_name The original order item name.
 * @param WC_Order_Item_Product $item      The order item object.
 * @return string          The modified order item name.
 */
function woo_remove_variation_from_order_item_name( $item_name, $item ) {
    // Ensure we are dealing with a product item.
    if ( ! is_a( $item, 'WC_Order_Item_Product' ) ) {
        return $item_name;
    }

    $product = $item->get_product();

    // Check if it's a variable product or a variation of one.
    if ( $product && $product->is_type( 'variation' ) ) {
        $parent_product = wc_get_product( $product->get_parent_id() );
        if ( $parent_product ) {
            // Return only the parent product's name, stripping appended variation attributes.
            // WooCommerce will then typically display attributes as separate meta data.
            return $parent_product->get_name();
        }
    }

    // For simple products or if parent not found, return original name.
    return $item_name;
}

4. Save Changes: Save the functions.php file.
5. Test: Place a new test order to verify that the product names on your order invoices, admin order screens, and customer emails now display as desired (e.g., "Cake title" with "Flavor: xxx" and "Colors: xxx" as separate lines below).

3. Ensuring All Variation Attributes Display Correctly as Meta

The code above primarily addresses stripping the variation attributes from the product title. For "Flavor: xxx" and "Colors: xxx" to appear as separate lines (alongside "Sku: xxx" and "Size: xxx"), it relies on WooCommerce's default mechanism for displaying order item meta. When you set up variable products and define attributes as "Used for variations," WooCommerce typically stores these selections as order item meta. If you find that certain attributes are still not showing up as separate lines after implementing the code, ensure:

• The attributes are correctly configured as global attributes or custom product attributes for variations.
• Your theme or PDF invoice plugin is not explicitly hiding or suppressing the display of certain item meta fields.
• For specific custom attributes that aren't showing, you might need additional filters (e.g., woocommerce_order_item_display_meta_key or woocommerce_order_item_display_meta_value) or even template overrides to force their display. However, the provided code resolves the primary issue of attributes being merged into the title.

Best Practices for Customization

• Always Use a Child Theme: As mentioned, this protects your customizations during theme updates.
• Backup Your Site: Before making any code changes, always create a full backup of your WordPress files and database.
• Test in a Staging Environment: Implement and test all code changes on a staging site first, before deploying to your live production environment.
• Understand the Impact: Be aware that filters like woocommerce_order_item_name can affect product name display across various parts of WooCommerce (admin orders, customer emails, PDF invoices, etc.).

Conclusion

The issue of product variations appearing incorrectly in order titles, while a "known issue," is highly solvable. By understanding WooCommerce's default behavior and employing either judicious plugin configuration or targeted code customization, store owners can achieve the clean, detailed order documentation they desire. This not only enhances the professional appearance of your store but also improves clarity for both your team and your valued customers, streamlining order fulfillment and customer service processes.