在 WooCommerce 单个产品页面上添加条件 CSS class 到 "add to cart" 按钮

Question

我想做的是根据条件，将 class 添加到 WooCommerce 单品页面上的添加到购物车按钮。

示例：

添加购物车按钮的实际class

<button type="submit" name="add-to-cart" value="10661" class="single_add_to_cart_button button alt">Pre - Ordenar</button>

如果条件为真我想达到的效果：

<button type="submit" name="add-to-cart" value="10661" class="single_add_to_cart_button button alt preordenar">Pre - Ordenar</button>

这将是一个示例代码。

function addclasses( $classes )
{      
    global $product;
    //we apply condition if it returns true applies the class in the cart.
    if ( self::product_can_be_pre_ordered( $product ) ) {
        $classes[]='preordenar';
        return $classes;
    }
}

到目前为止功能，但我不知道使用什么挂钩将它添加到 WooCommerce，在单个产品页面上。

注意：函数不是很正确和优化。

Answer 1

注意： product_can_be_pre_ordered( $product ) 默认情况下在 WooCommerce 中不可用，因此我在回答中将其替换为 $product->is_featured()。 适应您的需要。

由于单品页面上的添加到购物车按钮基于模板文件，您实际上需要覆盖它们才能回答您的问题

在/templates/single-product/add-to-cart/simple.php模板文件中-（可以通过将其复制到[=61=来覆盖此模板].php.)

替换

<button type="submit" name="add-to-cart" value="<?php echo esc_attr( $product->get_id() ); ?>" class="single_add_to_cart_button button alt"><?php echo esc_html( $product->single_add_to_cart_text() ); ?></button>

有

<?php
if ( $product->is_featured() ) {
    $extra_class = ' my-featured-class';
} else {
    $extra_class = '';
}
?>

<button type="submit" name="add-to-cart" value="<?php echo esc_attr( $product->get_id() ); ?>" class="single_add_to_cart_button button alt <?php echo $extra_class; ?>"><?php echo esc_html( $product->single_add_to_cart_text() ); ?></button>

因为覆盖模板文件是可能的，但最好不要推荐，你总是可以使用变通方法。例如，通过在父 div:

上添加 class
/** * 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 the single product page, so return if ( ! is_product() ) return $classes; // Returns whether or not the product is featured if ( $product->is_featured() ) { // Add new class $classes[] = 'my-featured-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 the single product page, so return if ( ! is_product() ) return $classes; // The related products section, so return if ( $woocommerce_loop['name'] == 'related' ) return $classes; // Returns whether or not the product is featured if ( $product->is_featured() ) { // Add new class $classes[] = 'my-featured-class'; } return $classes; } add_filter( 'woocommerce_post_class', 'filter_woocommerce_post_class', 10, 2 );

然后你可以应用CSS如下：

.my-featured-class .single_add_to_cart_button { background-color: red !important; }

相关：

在 WooCommerce 单个产品页面上添加条件 CSS class 到 "add to cart" 按钮

Add conditional CSS class to "add to cart" button on WooCommerce single product page

wordpress

product

woocommerce

hook-woocommerce