如何WooCommerce产品详情页面添加“最近浏览”功能

本教程将指导您如何通过一段简单的代码，在您的WooCommerce产品详情页下方，添加一个“最近浏览过的产品”模块。这个功能可以有效提升用户体验，并增加产品的曝光和交叉销售机会。

视频教程

操作步骤

准备工作

网站备份：在进行任何代码修改前，请务必备份您的网站。
子主题 (Child Theme)：为了确保您的修改在主题更新后不会丢失，强烈建议您安装并激活一个子主题。接下来的所有代码都应该添加到子主题的文件中。

第一步：添加核心功能代码 (PHP)

登录您的WordPress后台。
导航到 外观 (Appearance) > 主题文件编辑器 (Theme File Editor)。
在右上角的“要编辑的主题”下拉菜单中，确保您选择的是您的 子主题 (Child Theme)。
在右侧的“主题文件”列表中，点击打开 functions.php 文件。
将下面完整的PHP代码复制并粘贴到 functions.php 文件的末尾。
最后点击更新文件。

/**
 * =================================================================
 * Part 1: 跟踪并记录用户最近浏览过的产品
 * =================================================================
 */
add_action( 'template_redirect', 'b2w_track_product_view' );
function b2w_track_product_view() {
    // 确保只在单个产品页面执行
    if ( ! is_singular('product') ) {
        return;
    }

    global $post;
    $product_id = $post->ID;

    // 从 Cookie 中获取已有的浏览记录
    $cookie_name = 'woocommerce_recently_viewed';
    $viewed_products = isset($_COOKIE[$cookie_name]) ? (array) explode('|', $_COOKIE[$cookie_name]) : array();

    // 如果当前产品已在记录中，先移除它（为了之后把它放到最前面）
    if ( ( $key = array_search($product_id, $viewed_products) ) !== false ) {
        unset($viewed_products[$key]);
    }

    // 将当前产品ID添加到数组的最前面
    array_unshift($viewed_products, $product_id);

    // 限制记录的产品数量，比如最多12个
    $viewed_products = array_slice($viewed_products, 0, 12);

    // 将更新后的数组存回 Cookie，有效期30天
    $cookie_value = implode('|', $viewed_products);
    $cookie_expire = time() + (60 * 60 * 24 * 30); // 30 days
    wc_setcookie($cookie_name, $cookie_value, $cookie_expire, true);
}


/**
 * =================================================================
 * Part 2: 使用 WooCommerce Shortcode 在页面上显示产品
 * (这是最稳定、兼容性最好的方法)
 * =================================================================
 */
add_action( 'woocommerce_after_single_product_summary', 'b2w_display_recently_viewed_products_shortcode', 15 );
function b2w_display_recently_viewed_products_shortcode() {
    // 从 Cookie 中获取浏览记录
    $viewed_products_ids = ! empty( $_COOKIE['woocommerce_recently_viewed'] ) ? explode( '|', $_COOKIE['woocommerce_recently_viewed'] ) : array();
    $viewed_products_ids = array_filter( array_map( 'absint', $viewed_products_ids ) );
    
    // 排除当前正在查看的产品
    $current_product_id = get_the_ID();
    if ( ( $key = array_search( $current_product_id, $viewed_products_ids ) ) !== false ) {
        unset( $viewed_products_ids[$key] );
    }

    // 如果排除后没有其他产品了，则不显示任何内容
    if ( empty( $viewed_products_ids ) ) {
        return;
    }

    // 将产品ID数组转换为用逗号分隔的字符串
    $ids_string = implode( ',', $viewed_products_ids );

    // --- 您可以在这里自定义 ---
    $title = 'Recently Viewed'; // 模块标题
    $columns = 4;                 // 每行显示的产品数量
    // -----------------------

    // 构建 WooCommerce 内置的 [products] 短代码
    $shortcode_string = '[products ids="' . $ids_string . '" columns="' . $columns . '" orderby="post__in"]';

    // 输出整个模块的HTML结构
    // 'is-width-constrained' 是 Blocksy 主题中用于限制内容宽度的关键类
    echo '<section class="b2w-recently-viewed is-width-constrained">';
    echo '  <h2 class="b2w-title">' . esc_html( $title ) . '</h2>';
    echo    do_shortcode( $shortcode_string ); // WordPress 执行并输出短代码的结果
    echo '</section>';
}

第二步：添加样式代码 (CSS)

这段CSS代码用于美化我们的模块标题，并确保它有合适的边距。

在WordPress后台，导航到 外观 (Appearance) > 自定义 (Customize)。
在自定义菜单中，找到并点击 额外 CSS (Additional CSS)。
将下面的CSS代码复制并粘贴到文本框中。
点击 “发布” (Publish) 保存。

/* --- Recently Viewed Products - Final V7 Fix --- */

.b2w-recently-viewed {
    margin-top: 40px;
    margin-bottom: 40px;
    clear: both;
    width: 100%;
}

.b2w-recently-viewed .b2w-title {
    text-align: center !important;
    margin-bottom: 24px !important;
}

然后到网站多浏览几个产品，查看在产品详情的下方是否出现了Recently View Products。