如何在WooCommerce产品列表页添加跳转详情页的「阅读更多」按钮？

方法一：通过代码添加（推荐） #

利用WooCommerce自带的钩子，在产品循环区域末尾插入按钮，这种方式不会因为主题更新丢失代码（建议用Code Snippets这类自定义代码插件，或者子主题的functions.php文件）。

将以下代码添加到你的站点：

add_action( 'woocommerce_after_shop_loop_item', 'add_read_more_button_to_product_list', 20 );
function add_read_more_button_to_product_list() {
    global $product;
    // 获取当前产品的详情页链接
    $product_link = get_permalink( $product->get_id() );
    // 输出「阅读更多」按钮
    echo '<a href="' . esc_url( $product_link ) . '" class="button read-more-button">' . __( '阅读更多', 'woocommerce' ) . '</a>';
}

• 代码说明：woocommerce_after_shop_loop_item是WooCommerce产品列表页中每个产品内容后的钩子，设置优先级20是为了让按钮显示在「加入购物车」按钮之后，不需要调整顺序的话可以用默认优先级10。
• 样式自定义：如果要调整按钮外观，可通过CSS修改.read-more-button类：

.read-more-button {
    margin-top: 10px;
    background-color: #2c3e50;
    color: #fff;
    border-radius: 4px;
    /* 其他样式属性按需添加 */
}

方法二：用页面构建器可视化添加 #

如果你使用Elementor、Beaver Builder这类可视化工具，可直接编辑产品存档模板：

• 打开页面构建器的「主题构建器」，找到「产品存档」模板并进入编辑；
• 在产品循环模块的单个产品内容末尾，添加按钮组件；
• 将按钮链接设置为「动态链接」，选择「产品详情页」选项；
• 保存模板后，前端产品列表页就会自动显示该按钮。

方法三：修改主题模板文件（不推荐） #

如果你的主题有自定义的WooCommerce模板（比如archive-product.php或content-product.php），可直接在产品内容的合适位置插入按钮代码：

<a href="<?php echo esc_url( get_permalink( get_the_ID() ) ); ?>" class="button read-more-button"><?php _e( '阅读更多', 'woocommerce' ); ?></a>

⚠️ 注意：这种方法不推荐，因为主题更新后修改的代码会被覆盖，优先用子主题或方法一的钩子方案。

内容的提问来源于stack exchange，提问作者omid