剪切文本并在 woocommerce 类别中添加“阅读更多”按钮

Question

我的 Woocommerce 中有很长的类别描述，我想截断文本并添加“阅读更多”按钮。 我尝试上传一个插件以在类别部分添加编辑器以使用“阅读更多”按钮，但我可以使用该按钮或直接放置标签，前面什么也没有发生。

直接修改文件可能会更容易，但我阻止...你能帮我吗？

Answer 1

您可以使用一些 jQuery 来缩小描述容器的高度，并添加一个“阅读更多”按钮，将容器大小调整回其原始高度。

add_action( 'woocommerce_after_main_content', 'woocommerce_after_main_content', 10 ); 
function woocommerce_after_main_content() {
    if ( !is_product_category() ) return;

    ?>
    <script>
        jQuery( function( $ ) {
            $(document).ready(function() {

                //Get current height of the description container
                let curHeight = $("header .term-description").height();

                //Set heigth of the description container
                $("header .term-description").css({
                    "height": "100px", 
                    "overflow": "hidden",
                });

                //Add 'Read more' button
                $("header .term-description").after( "<button class='read-more' style='margin:15px 0;'>Read more</button>" );

                //Set description container back to its original height
                $( "header .read-more" ).on( "click", function() {
                    $("header .term-description").animate({height: curHeight});
                });
            });
        });
    </script>
    <?php
}

此代码片段应添加到子主题的functions.php中或通过代码片段等插件添加。