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

Question

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

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

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

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

如果能提供任何帮助或指示我应该如何实现这一目标，我们将不胜感激。我现在用 JS 添加 类，但这可能不是一个好主意！

Answer 1

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

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

/**
 * 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 );

---

注意： class/classes 也将应用于相关产品，由单个产品页面上的“循环”生成。

要防止这种情况，请使用：

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 );