产品描述在Woocommerce中阅读更多内容

Question

我需要在Woocommerce商店中的50个单词之后阅读产品说明中的更多按钮。有些代码可以吗？谢谢

Answer 1

据我所知，您需要一个名为“更多”的标签来显示产品说明。

查看以下代码，该代码将添加一个名为more的新选项卡（链接），并在其下显示产品详细信息。

add_filter('woocommerce_product_tabs', 'add_my_tab');

function add_my_tab($tabs){
    $tabs['details_tab'] = array(
        'title'     => 'More',
        'priority'  => 1,
        'callback'  => 'tab_content',
    );
    return $tabs;
}

function tab_content(){
    global $product;
    echo $product->get_description();
}

将代码粘贴到主题的functions.php中

我在这个link中找到了这个代码。您可以在那里查看更多详情。我刚刚根据您的描述修改了该代码。

Answer 2

打开yourwoocommerce / content-single-product.php文件并导入全局变量$ more，然后将其设置为false以获取标记之前的部分：

<div class="collapsed-content">
        <?php
            global $more;
            $temp = $more;
            $more = false;
            $short_description = get_the_content( '' );
            echo $short_description;
            $more = $temp;
        ?>
</div>

可以通过调用the_content（）函数来显示完整的描述文本。在您的简短描述下方创建一个新的<div>，并在那里回复您的完整描述：

<div class="full-content">
    <?php
        $full_description = the_content();
    ?>
</div>

您要做的下一件事是更改此<div>的CSS，因此在我们需要它之前不会显示它：

.full-content {
    display: none;
}

接下来，设置jQuery函数以在单击“Read more ..”链接时切换这些<div>s。

jQuery(function($) {
    $(document).ready(function() {
        $("#readMore, #readLess").click(function(){
            $(".collapsed-content").toggle('slow', 'swing');
            $(".full-content").toggle('slow', 'swing');
            $("#readMore").toggle();// "read more link id"
            return false;
        });
    });
});

因此，默认情况下，只显示< - - MORE - - >标记之前的简短描述。当用户点击链接时，它只是将其替换为完整描述。如果需要，可以添加一些动画。完善。