WooCommerce 教程:如何縮短產品標題

WooCommerce 教程:如何縮短產品標題

一個很常見的問題:有時候(主要是聯盟網上商店),WooCommerce 的產品標題太長了。除此之外,您還可能希望保持店面體驗的一致性,並使所有 WooCommerce 產品的標題長度相同。這是您怎麼做的

問題:WooCommerce 產品標題太長 – 我們可以在商店頁面設置字符長度限制

WooCommerce。在商店頁面縮短產品標題

選項 1(CSS):僅將所有 WooCommerce 產品標題限制為一行

// Note: this is simple CSS that can be placed in your custom.css file
// This CSS also adds 3 dots ... at the end of each product title
 .woocommerce ul.products li.product h3 {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

選項 2(PHP):將所有 WooCommerce 產品標題限制為最大字符數

// Note: this is simple PHP that can be placed in your functions.php file
// Note: substr may give you problems, please check Option 3
add_filter( 'the_title', 'shorten_woo_product_title', 10, 2 );
function shorten_woo_product_title( $title, $id ) {
if ( is_shop() && get_post_type( $id ) === 'product' ) {
return substr( $title, 0, 15 ); // change last number to the number of characters you want
} else {
return $title;
}
}

選項 3(PHP):將所有 WooCommerce 產品標題限制為最大字數

謝謝 nicmare 這個片段!

function shorten_woo_product_title( $title, $id ) {
if ( is_shop() && get_post_type( $id ) === 'product' ) {
return wp_trim_words( $title, 4 ); // change last number to the number of WORDS you want
} else {
return $title;
}
}

如何添加此代碼?

1、您可以將 PHP 代碼片段放置在主題或子主題的 functions.php 文件的底部(如果是 CSS 代碼,請添加到子主題的 style.css 文件底部)修改之前建議先備份原始文件,若出現錯誤請先刪除此代碼。

2、WordPress 4.9 後改進了主題編輯器,對於 CSS 代碼也可打開網站前台編輯器的【自定義】,複製代碼添加到自定義 css 中。

此代碼是否可用?

如需幫助或是您有更好的方案想分享?請到薇曉朵 WooCommerce 中文論壇留言告知,我們希望可以幫到更多國內的 WooCommerce 用戶也希望您的參與。

文章沒看懂?代碼不會用?需要幫助您可以去論壇提問自助服務台

作者阿獃

每當你飛起,就是一道彩虹.