我正试图将Woocommerce中的长产品描述从主摘要下方的选项卡移动到主摘要本身(最好在添加到购物车按钮下方)。
我已经取消了描述选项卡,也删除了简短的描述,并将描述移动到我想要的位置。完整地删除它不是一个问题。但我也希望能够截断它,并将大部分内容隐藏在“阅读更多”链接后面。
在尝试了各种解决方案之后,我发现了两件事之一:
a)我可以添加阅读更多,但必须剥离格式,所以整个描述出来作为一个长段落,而不是被打破。
或
B)如果我不删除格式,“阅读更多”只适用于第一段,其余内容将显示在“阅读更多”链接之后。
这就是我到目前为止所做的-定位描述,在它周围添加一个div类,这样它就可以被JavaScript定位,然后使用现有的解决方案来添加read more本身。
add_action( 'woocommerce_single_product_summary', 'custom_template_single_long_description', 30 );
function custom_template_single_long_description()
{
ob_start();
the_content();
$content= ob_get_clean();
echo '<div class="long-description">' . $content. '</div>';
wc_enqueue_js( '
var num_chars = 100;
var replace_ellipses = " ... ";
var description_content = $(".long-description").html();
if (description_content.length > num_chars) {
var a = description_content.substr(0, num_chars);
var b = description_content.substr(num_chars - description_content.length);
var html = a + "<span class=\'truncated\'>" + replace_ellipses + "<a class=\'read-more\'>Read more</a></span><span class=\'truncated\' style=\'display:none\'>" + b + "</span>";
$(".long-description").html(html);
}
$(".read-more").click(function(e) {
e.preventDefault();
$(".long-description .truncated").toggle();
});
' );
}
字符串
有了这个,前100个字符结束在'阅读更多',但随后的段落后显示阅读更多。我想这一切隐藏,但也为段落休息,以保持扩大。
1条答案
按热度按时间uqdfh47h1#
你能试试这个代码吗?看看它是否有效。
字符串