Wrap product name with <span> and selectable "class" in checkout-review-order-table and email-order-items

[gerdneuman]

Is your feature request related to a problem? Please describe.

All our product names are set in UPPERCASE using CSS with text-transform: uppercase;. This works great except for the overview table on the checkout page, see

https://github.com/woocommerce/woocommerce/blob/54edb576d54bb4d4c163cf9d318d64699c1e93d4/templates/checkout/review-order.php#L38

and also not for the order items table in mails

see

https://github.com/woocommerce/woocommerce/blob/54edb576d54bb4d4c163cf9d318d64699c1e93d4/templates/emails/email-order-items.php#L50

The quantity is wrapped in a strong with class="product-quantity". However, the product name itself is not and hence it is not possible to select the product name here with CSS.

Describe the solution you'd like

Please simply wrap the product name with a CSS class, e.g. `The product name. Then it would be easy to make this uppercase with some little custom CSS like

.wc-cart-product-name {
  text-transform: uppercase;
}

Describe alternatives you've considered

I had a look into the filter like woocommerce_cart_item_name, e.g.:

// Display product name as uppercase, CSS is not possible
// Too dangerous, because sometimes the $product_name can come as a link as sprintf( '<a href="%s">%s</a>' ...)
function fr_uppercase_product_name_in_cart( $product_name, $cart_item, $cart_item_key ) {
    return strtoupper( $product_name );
}
add_filter( 'woocommerce_cart_item_name' , 'fr_uppercase_product_name_in_cart', 10, 3 );

However, this seems dangerous because sometimes the $product_name parameter is not a simple string but some HTML markup, e.g. at

https://github.com/woocommerce/woocommerce/blob/54edb576d54bb4d4c163cf9d318d64699c1e93d4/templates/cart/cart.php#L82

Same holds true for the filter named woocommerce_order_item_name as used in emails at

https://github.com/woocommerce/woocommerce/blob/54edb576d54bb4d4c163cf9d318d64699c1e93d4/templates/emails/email-order-items.php#L50

but also as HTML markup at

https://github.com/woocommerce/woocommerce/blob/54edb576d54bb4d4c163cf9d318d64699c1e93d4/templates/order/order-details-item.php#L33

and

https://github.com/woocommerce/woocommerce/blob/54edb576d54bb4d4c163cf9d318d64699c1e93d4/templates/checkout/form-pay.php#L43

The second alternative of overriding the template files just for this seems a problematic regaring future upgrades.

Additional context

Initially, we asked about this in this WooCommerce Germanized forum thread which lead to the conclusion that nothing can be done here by the Germanized plugin unless the CSS name is added in WooCommerce itself.

https://wordpress.org/support/topic/eine-css-klasse-um-produktname-auf-kasse-seite/

Translated version: https://translate.google.com/translate?hl=&sl=de&tl=en&u=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Feine-css-klasse-um-produktname-auf-kasse-seite%2F

[masteradhoc]

@gerdneuman please check my drafted PR: https://github.com/woocommerce/woocommerce/pull/29585/files fixes your first wish - at least if i understood correctly ;)

[gerdneuman]

Hi @masteradhoc , yeah, this looks good for the checkout/review-order template part. Thanks.