修复WooCommerce下载分组代码错误并添加下拉菜单

一、错误原因分析 #

报错是因为woocommerce_customer_get_downloadable_products过滤器仅作用于客户账户的下载列表页面，而「我的订单」「订单报表」页面的下载项未经过该分组处理，导致$download数组中不存在list键，直接调用会触发未定义索引警告。

二、完整修复代码（PHP+CSS） #

1. PHP代码（替换原有代码） #

/**
 * 按产品ID分组可下载文件
 *
 * @param array $downloads
 * @return array
 */
function prefix_group_downloadable_products( array $downloads ) {
    $unique_downloads = [];

    foreach ( $downloads as $download ) {
        $list = [
            'download_url' => $download['download_url'],
            'file_name'    => $download['file']['name']
        ];

        if ( array_key_exists( $download['product_id'], $unique_downloads ) ) {
            $unique_downloads[ $download['product_id'] ]['list'][] = $list;
            continue;
        }

        $data = $download;
        $data['list'] = [ $list ];
        // 获取产品名称作为下拉菜单标题
        $product = wc_get_product( $download['product_id'] );
        $data['product_name'] = $product ? $product->get_name() : __('未知课程', 'woocommerce');
        $unique_downloads[ $download['product_id'] ] = $data;
    }

    return $unique_downloads;
}

add_filter( 'woocommerce_customer_get_downloadable_products', 'prefix_group_downloadable_products' );


/**
 * 渲染分组后的下拉式下载列表
 * 
 * @param array $download
 * @return void
 */ 
function prefix_downloads_column_download_file( array $download ) {
    // 处理未分组的下载项（如订单页面、报表页面）
    if ( ! isset( $download['list'] ) ) {
        if ( isset( $download['download_url'] ) ) {
            echo '<a href="' . esc_url( $download['download_url'] ) . '" class="woocommerce-MyAccount-downloads-file">' . esc_html( $download['file']['name'] ) . '</a>';
        } else {
            _e( '无下载文件', 'woocommerce' );
        }
        return;
    }

    $lists = $download['list'];
    $product_name = isset( $download['product_name'] ) ? $download['product_name'] : __('课程', 'woocommerce');

    if ( empty( $lists ) ) {
        _e( '无下载文件', 'woocommerce' );
        return;
    }

    // 使用HTML5原生details/summary实现下拉菜单（无需JS）
    echo '<details class="wc-downloads-group">';
    echo '<summary class="wc-downloads-group-title">' . esc_html( $product_name ) . ' (' . count( $lists ) . ' ' . _n( '个文件', '个文件', count( $lists ), 'woocommerce' ) . ')</summary>';
    echo '<ol class="wc-downloads-group-list">';

    foreach ( $lists as $list ) {
        echo '<li>';
        echo '<a href="' . esc_url( $list['download_url'] ) . '" class="woocommerce-MyAccount-downloads-file">';
        echo esc_html( $list['file_name'] );
        echo '</a></li>';
    }

    echo '</ol>';
    echo '</details>';
}

add_action( 'woocommerce_account_downloads_column_download-file', 'prefix_downloads_column_download_file' );

2. CSS样式（添加到主题自定义CSS或子主题style.css） #

/* 下载分组下拉菜单样式 */
.wc-downloads-group {
    margin: 12px 0;
    border: 1px solid #e5e5e5;
    border-radius: 6px;
    overflow: hidden;
}

.wc-downloads-group-title {
    padding: 14px 18px;
    background-color: #f7f7f7;
    cursor: pointer;
    font-weight: 600;
    transition: background-color 0.2s ease;
}

.wc-downloads-group-title:hover {
    background-color: #f0f0f0;
}

.wc-downloads-group-list {
    margin: 0;
    padding: 12px 18px;
    background-color: #ffffff;
}

.wc-downloads-group-list li {
    margin: 8px 0;
    padding-bottom: 8px;
    border-bottom: 1px dotted #eee;
}

.wc-downloads-group-list li:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.wc-downloads-group-list a {
    color: #2d7dd2;
    text-decoration: none;
}

.wc-downloads-group-list a:hover {
    text-decoration: underline;
}

三、关键改进点 #

1. 错误修复：增加isset( $download['list'] )判断，对未分组的下载项（订单/报表页面）使用默认输出逻辑，避免警告。
2. 下拉菜单实现：采用HTML5原生<details>/<summary>组件，无需额外JavaScript，兼容性强，点击标题即可展开/折叠对应课程的文件列表。
3. 用户体验优化：下拉标题显示课程名称+文件数量，清晰区分不同课程的下载内容。
4. 样式统一：CSS风格匹配WooCommerce默认界面，保持视觉一致性。

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