wordpress 产品描述在Woocommerce中阅读更多

ddrv8njm  于 2023-04-20  发布在  WordPress
关注(0)|答案(2)|浏览(194)

我需要在产品描述中阅读更多按钮后50在我的Woocommerce商店的话.这是可能的一些代码?谢谢

piztneat

piztneat1#

据我所知,你需要一个名为'更多'的标签来显示产品说明。
看看下面的代码,它将添加一个新的标签(链接)称为更多,并将显示您的产品详细信息下。

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中找到了这个代码。你可以在那里查看更多细节。我刚刚根据你的描述修改了那个代码。

8oomwypt

8oomwypt2#

打开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>

完整的描述文本可以通过调用_content()函数来显示。在你的简短描述下面创建一个新的<div>,并在那里回显你的完整描述:

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

接下来你要做的是改变这个<div>的CSS,这样它就不会在我们需要它之前显示出来:

.full-content {
    display: none;
}

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

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 - -〉标签之前只显示一个简短的描述。当用户点击链接时,它只是用完整的描述替换它。如果你想添加一些动画。完美。

相关问题