css - 如何向 WooCommerce 单个产品页面添加类

Question

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

我不太擅长 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 过滤器钩子(Hook)

因此，要在单个产品页面(“产品”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 );