如何将类添加到 WooCommerce 单一产品页面

Question

我正在尝试将类添加到 WooCommerce 单一产品页面，特别是产品页面上的“产品”div，但也添加其他元素 - 使用挂钩和过滤器。

我不太擅长 PHP，我更像是一名前端开发人员，但我的任务是设计 WooCommerce 样式以适应自定义 Wordpress 主题。

我之前使用过以下代码通过文件将类添加到 Wordpress 中的 body 元素functions.php。我在 WooCommerce 模板的产品页面上找到了“产品”div，并为此复制了过滤器，但它似乎不起作用。

add_filter( 'wc_product_class','my_product_class' );
function my_product_class( $classes ) {
    $classes[] = 'my-product-class';         
    return $classes; 
}

任何帮助或指示我应该做什么来实现这一目标将非常感激。我现在用 JS 添加类，但这可能不是一个好主意！

Answer 1

wc_get_product_classfrom 的函数includes/wc-template-functions.php包含较新的woocommerce_post_class过滤器钩子

因此，要在单个产品页面（“产品”div）上添加一个/多个类，您可以使用：

/**
 * WooCommerce Post Class filter.
 *
 * @since 3.6.2
 * @param array      $classes Array of CSS classes.
 * @param WC_Product $product Product object.
 */
function filter_woocommerce_post_class( $classes, $product ) {
    // is_product() - Returns true on a single product page
    // NOT single product page, so return
    if ( ! is_product() ) return $classes;
    
    // Add new class
    $classes[] = 'my-product-class';
    
    return $classes;
}
add_filter( 'woocommerce_post_class', 'filter_woocommerce_post_class', 10, 2 );

注意：一个或多个类也将应用于相关产品，由单个产品页面上的“循环”生成。

为了防止这种情况，请使用：

function filter_woocommerce_post_class( $classes, $product ) {
    global $woocommerce_loop;
    
    // is_product() - Returns true on a single product page
    // NOT single product page, so return
    if ( ! is_product() ) return $classes;
    
    // The related products section, so return
    if ( $woocommerce_loop['name'] == 'related' ) return $classes;
    
    // Add new class
    $classes[] = 'my-product-class';
    
    return $classes;
}
add_filter( 'woocommerce_post_class', 'filter_woocommerce_post_class', 10, 2 );