大数跨境

如何在WooCommerce独立站 “My Account” 页面增加Purchased Products标签页?

如何在WooCommerce独立站 “My Account” 页面增加Purchased Products标签页? 大胡说跨境
2026-05-09
84
导读:很多人把 WooCommerce 的My Account只当成用户中心,但实际上真正成熟的独立站,会把它做成Customer Portal(客户运营中心)因为客户下单后的大部分行为都发生在这里。

  当我们客户登陆后就会进入woocommerec默认的My Account页面,在这个页面里面存储这客户的订单、下载、地址信息、支付方式以及账户详情等信息,如下图所示:

  一、Woocommerce默认页面存在的问题:

  但是对于我们独立站运营来说,尤其是C端,这个默认的界面和内容并不能很好的满足我们的要求。

因为客户通常会:

✅ 重复购买

✅ 查看历史采购

✅ 快速重新下单

✅ 下载产品资料

✅ 查看 SKU

  因此如果我们在这个页面增加Purchased Products标签页这个功能就能明显提升:复购率、客户体验以及下单效率。

  二、如何增加Purchased Products标签页

  1.第一步:新增 Endpoint
/** * Add Purchased Products Tab */
add_action('init', function () {
    add_rewrite_endpoint(        'purchased-products',        EP_ROOT | EP_PAGES    );
});

 2.第二步:增加菜单

add_filter('woocommerce_account_menu_items', function ($items) {
    $logout = $items['customer-logout'];
    unset($items['customer-logout']);
    $items['purchased-products'] = 'Purchased Products';
    $items['customer-logout'] = $logout;
    return $items;
});
3.第三步:输出页面内容
add_action(    'woocommerce_account_purchased-products_endpoint',    'custom_purchased_products_content');
function custom_purchased_products_content() {
    $customer_orders = wc_get_orders(array(        'customer_id' => get_current_user_id(),        'status' => array('wc-completed', 'wc-processing'),        'limit' => -1,    ));
    $products = array();
    foreach ($customer_orders as $order) {
        foreach ($order->get_items() as $item) {
            $product_id = $item->get_product_id();
            if ($product_id) {                $products[$product_id] = $product_id;            }        }    }
    if (empty($products)) {
        echo '<p>No purchased products found.</p>';
        return;    }
    echo '<h3>Purchased Products</h3>';
    echo '<div class="purchased-products-grid">';
    foreach ($products as $product_id) {
        $product = wc_get_product($product_id);
        if (!$product) continue;
        echo '<div class="purchased-product-item">';
        echo '<a href="' . get_permalink($product_id) . '">';
        echo $product->get_image();
        echo '<h4>' . $product->get_name() . '</h4>';
        echo '</a>';
        echo '<p>SKU: ' . $product->get_sku() . '</p>';
        echo '<a class="button" href="?add-to-cart=' . $product_id . '">                Buy Again              </a>';
        echo '</div>';    }
    echo '</div>';}
4.第四步:增加样式(可以根据自己要求修改)
add_action('wp_head', function () {?><style>
.purchased-products-grid{    display:grid;    grid-template-columns:repeat(auto-fill,minmax(220px,1fr));    gap:20px;}
.purchased-product-item{    border:1px solid #eee;    padding:15px;    border-radius:10px;    text-align:center;    background:#fff;}
.purchased-product-item img{    max-width:100%;    height:auto;}
.purchased-product-item .button{    margin-top:10px;    width:100%;}
</style><?php});
5.第五步:刷新 Rewrite Rules(关键步骤)

进入:

Settings → Permalinks

点击:

Save Changes

否则新 endpoint 可能打不开。

三、总结:

  很多人把 WooCommerce 的My Account只当成用户中心,但实际上

真正成熟的独立站,会把它做成Customer Portal(客户运营中心)

因为客户下单后的大部分行为都发生在这里。因此改造这个页面是很有必要的。


【声明】内容源于网络
0
0
大胡说跨境
1234
内容 161
粉丝 0
大胡说跨境 1234
总阅读1.7k
粉丝0
内容161