产品列表的WooCommerce add Read more按钮

基础概念

WooCommerce 是一个流行的开源电子商务平台，用于构建在线商店。它允许商家通过插件和扩展来增强功能。WooCommerce 的产品列表页面通常显示产品的缩略图、标题和简短描述。为了提供更多信息，可以在产品描述中添加一个“Read more”按钮，点击后展开完整的描述。

类型

静态按钮：固定位置的按钮，点击后展开描述。
动态按钮：根据用户的滚动位置或设备类型动态显示按钮。

应用场景

产品详情页：在产品列表页中，用户可以通过点击“Read more”按钮查看详细的产品描述。
博客文章：在博客文章中，用户可以通过点击“Read more”按钮阅读全文。
新闻网站：在新闻列表中，用户可以通过点击“Read more”按钮查看完整的新闻内容。

实现方法

以下是一个简单的示例代码，展示如何在 WooCommerce 产品列表中添加“Read more”按钮：

add_filter( 'woocommerce_get_template_part', 'custom_product_description', 20, 2 );
function custom_product_description( $template, $slug ) {
    if ( 'content-single-product.php' === $slug ) {
        ob_start();
        ?>
        <div class="woocommerce-product-details__short-description">
            <?php the_excerpt(); ?>
        </div>
        <div class="woocommerce-product-details__full-description" style="display:none;">
            <?php the_content(); ?>
        </div>
        <button class="read-more-btn">Read more</button>
        <script>
            jQuery(document).ready(function($) {
                $('.read-more-btn').click(function() {
                    $('.woocommerce-product-details__full-description').slideToggle();
                    $(this).text($(this).text() === 'Read more' ? 'Read less' : 'Read more');
                });
            });
        </script>
        <?php
        return ob_get_clean();
    }
    return $template;
}