Add overflow and title tag to Woocommerce cart item

Question

I need to add

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

as well as a title tag with the product name (a title="") to the Woocommerce product names in the cart table on the cart page. If I add the css to

.product-name a

it will not wokr and the product thumbnail is not displayed any longer. How can I add the css as well as adding the title tag to the links?

Answer 1

That CSS, which you probably took from my " WooCommerce: How to Shorten Product Titles " tutorial, won't work on the Cart page as you're inside a table. It would simply expand the table column to the length of the item name, which is not ideal.

In this case you need PHP, and by using the same reference, you could test the following customization:

add_filter( 'woocommerce_cart_item_name', 'bbloomer_shorten_cart_item_title', 9999, 3 );
 
function bbloomer_shorten_cart_item_title( $name, $cart_item, $cart_item_key ) {
    
    // GET PRODUCT
    $_product = apply_filters( 'woocommerce_cart_item_product', $cart_item['data'], $cart_item, $cart_item_key );
    
    // GET PERMALINK
    $product_permalink = apply_filters( 'woocommerce_cart_item_permalink', $_product->is_visible() ? $_product->get_permalink( $cart_item ) : '', $cart_item, $cart_item_key );
    
    // ADD TITLE, LIMIT TO 15 CHARS AND ADD ELLIPSIS
    return sprintf( '<a href="%s" title="%s">%s</a>', esc_url( $product_permalink ), $_product->get_name(), substr( $_product->get_name(), 0, 15 ) . '...' );
    
}