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

Question

我正在尝试将类添加到WooCommerce单产品页面，特别是产品页面上的“product”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

函数wc\u get\u product\u classfrom包括/wc模板函数。php包含较新的woocommerce\u post\u类过滤器挂钩

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