求助：优化演员档案页基于分类法的WooCommerce产品展示

方案一：替换短代码为自定义PHP查询+模板输出 #

[products]短代码的样式定制空间有限，直接用PHP查询并自定义HTML结构是更灵活的解决方式，步骤如下：

1. 添加自定义查询函数到主题functions.php
   把这段代码放到主题的functions.php文件（推荐用子主题，避免主题更新丢失代码）：

function get_actor_related_products( $actor_title ) {
    // 通过演员标题匹配pa_actors属性的术语ID
    $term = get_term_by( 'name', $actor_title, 'pa_actors' );
    if ( !$term ) return '<p>暂无关联产品</p>';

    // 构建WooCommerce产品查询参数
    $args = array(
        'post_type' => 'product',
        'posts_per_page' => 8,
        'paged' => get_query_var('paged') ?: 1, // 支持分页
        'tax_query' => array(
            array(
                'taxonomy' => 'pa_actors',
                'field' => 'term_id',
                'terms' => $term->term_id,
            ),
        ),
        'meta_query' => array(
            array(
                'key' => '_visibility',
                'value' => array('catalog', 'visible'),
                'compare' => 'IN',
            ),
        ),
    );

    $products = new WP_Query( $args );

    // 自定义产品输出模板
    if ( $products->have_posts() ) {
        $output = '<div class="actor-related-products grid grid-cols-4 gap-4">';
        while ( $products->have_posts() ) {
            $products->the_post();
            global $product;

            // 按需调整每个产品的HTML结构
            $output .= '<div class="product-card">';
            $output .= '<a href="' . get_permalink() . '" class="product-image">';
            $output .= get_the_post_thumbnail( get_the_ID(), 'woocommerce_thumbnail' );
            $output .= '</a>';
            $output .= '<h3 class="product-title"><a href="' . get_permalink() . '">' . get_the_title() . '</a></h3>';
            $output .= '<div class="product-price">' . $product->get_price_html() . '</div>';
            $output .= '<div class="product-add-to-cart">' . do_shortcode('[add_to_cart id="' . get_the_ID() . '"]') . '</div>';
            $output .= '</div>';
        }
        $output .= '</div>';

        // 添加分页组件
        $output .= '<div class="product-pagination">';
        $output .= paginate_links( array(
            'total' => $products->max_num_pages,
            'current' => get_query_var('paged') ?: 1,
        ) );
        $output .= '</div>';

        wp_reset_postdata();
        return $output;
    } else {
        return '<p>暂无关联产品</p>';
    }
}

2. 在PODS模板中调用函数
   打开你的演员档案PODS模板，替换原短代码为：

<?php echo get_actor_related_products( get_the_title() ); ?>

如果需要在页面编辑器里用短代码调用，可额外添加短代码注册：

add_shortcode( 'actor_related_products', function( $atts ) {
    $atts = shortcode_atts( array(
        'actor_title' => '',
    ), $atts );
    return get_actor_related_products( $atts['actor_title'] );
} );

之后在页面中用[actor_related_products actor_title="{@post_title}"]调用即可。

3. 添加自定义CSS样式
   到主题自定义CSS面板或style.css中添加样式，示例：

.actor-related-products.grid {
    margin: 2rem 0;
}
.product-card {
    border: 1px solid #eee;
    padding: 1rem;
    border-radius: 8px;
    transition: all 0.3s ease;
}
.product-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    transform: translateY(-2px);
}
.product-title {
    font-size: 1rem;
    margin: 0.5rem 0;
}
.product-price {
    color: #e74c3c;
    font-weight: bold;
    margin: 0.5rem 0;
}
.product-pagination {
    margin-top: 2rem;
    text-align: center;
}
.product-pagination a {
    padding: 0.5rem 1rem;
    border: 1px solid #ddd;
    margin: 0 0.2rem;
    border-radius: 4px;
}
.product-pagination .current {
    background: #2c3e50;
    color: white;
    border-color: #2c3e50;
}

方案二：修改WooCommerce产品短代码模板 #

如果不想写大量PHP，可通过覆盖WooCommerce模板修改样式：

• 复制WooCommerce插件目录里的templates/content-product.php到主题目录下的woocommerce/content-product.php
• 修改这个文件的HTML结构和类名，添加自定义样式
• 原[products]短代码会自动使用这个定制后的模板

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