要在前端页面上输出 ACF 创建的 product-category 分类作为导航菜单，可以使用以下方法。我们将使用 WordPress 的 get_terms() 函数获取分类项，然后遍历这些分类项以生成对应的 HTML 结构。

假设希望在 <ul class="sub-menu-container"> 中输出这些分类项，下面是实现这一目标的代码示例：

<?php
// 获取所有 product-category 分类项
$product_categories = get_terms(array(
    'taxonomy' => 'product-category',
    'hide_empty' => false, // 如果希望隐藏没有文章的分类项，可以设置为 true
));
// 检查是否有分类项返回
if (!empty($product_categories) && !is_wp_error($product_categories)) {
    echo '<ul class="sub-menu-container">';
    
    // 遍历每个分类项并输出对应的导航菜单项
    foreach ($product_categories as $category) {
        $category_link = get_term_link($category); // 获取分类项链接
        $category_name = $category->name; // 获取分类项名称
        // 输出 HTML 结构
        echo '<li class="menu-item">';
        echo '<a class="menu-link" href="' . esc_url($category_link) . '"><div>' . esc_html($category_name) . '</div></a>';
        echo '</li>';
    }
    
    echo '</ul>';
} else {
    // 如果没有分类项或出错，可以输出提示信息
    echo '<p>没有找到分类项。</p>';
}
?>

代码说明：

1. get_terms()：我们使用 get_terms() 函数来获取指定的分类法（product-category）中的分类项。参数 hide_empty 设置为 false，以确保显示所有分类项，即使它们没有任何关联的文章。
2. 遍历分类项：通过 foreach 循环遍历每一个分类项。我们使用 get_term_link() 函数获取分类项的链接，并使用 $category->name 获取分类项的名称。
3. 输出 HTML：我们在 <ul class="sub-menu-container"> 中输出 <li> 元素，构建导航菜单的每一项。
4. 错误处理：我们添加了一个简单的错误处理，如果没有找到任何分类项或发生错误，则输出一条提示信息。

将此代码放入 WordPress 模板文件中（例如 header.php 或 template-parts/nav.php），以在前端页面显示 ACF 自定义分类项的导航菜单。