剪切文本并在woocommerce类别中添加阅读更多按钮 [英] Cut the text and add a read more button in woocommerce categories

问题描述

我在Woocommerce中有非常长的类别描述，我想截断文本并添加一个Read More按钮。
我尝试上载插件以在类别部分添加编辑器，以使用更多信息按钮，但我可以使用该按钮或直接将标签放在前面，而不会发生任何事情。

I have very long category descriptions in my Woocommerce and I would like to truncate the text and add a Read More button. I tried to upload a plugin to add an editor in the category section to use the read more button but I can use the button or put the tag directly nothing happens at the front.

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

It would probably be easier to modify the file directly but I block... can you help me?

谢谢

推荐答案

您可以使用一些jQuery来缩小描述容器的高度，并添加一个阅读更多按钮，以将容器的大小重新设置为原始高度。

You could use some jQuery to shrink the height of the description container and add a 'Read more' button that will resize the container back to its original height.

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中您的孩子主题或通过代码片段等插件。

This code snippet should be added to the functions.php of your child theme or via a plugin like Code Snippets.

这篇关于剪切文本并在woocommerce类别中添加阅读更多按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！