向 Woocommerce 購物車項目添加溢出和標題標簽

Question

我需要添加

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

以及帶有產品名稱 (a title="") 的標題標簽到購物車頁面上購物車表格中的 Woocommerce 產品名稱。 如果我將 css 添加到

.product-name a

它不會工作，並且不再顯示產品縮略圖。 如何添加 css 以及將標題標簽添加到鏈接？

Answer 1

您可能從我的“ WooCommerce：如何縮短產品標題”教程中獲取的那個 CSS 將無法在購物車頁面上使用，因為您在表格中。 它只會將表格列擴展到項目名稱的長度，這並不理想。

在這種情況下，您需要 PHP，並且通過使用相同的參考，您可以測試以下自定義：

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 ) . '...' );
    
}