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

What I want to do is depending on a conditional, add a class to the add to cart button on the WooCommerce single product page.

Example:

The actual class of the add cart button

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

What I want to achieve if the condition is true:

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

This would be an example code.

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

So far the function but I don't know what hook to use to add it to WooCommerce, on the single product page.

NOTE: The function is not quite correct and optimized.

CodePudding user response：

Note: product_can_be_pre_ordered( $product ) is not available in WooCommerce by default, so I replaced it with $product->is_featured() in my answer. Adapt to your needs.

Since the add to cart button on the single product page is based on template files, you actually need to overwrite them to answer your question

In the /templates/single-product/add-to-cart/simple.php template file - (This template can be overridden by copying it to yourtheme/woocommerce/single-product/add-to-cart/simple.php.)

Replace

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

With

<?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() ); ?>" ><?php echo esc_html( $product->single_add_to_cart_text() ); ?></button>

Because overwriting template files is possible, but it is preferably not recommended, you can always use a workaround. For example by adding a class on a parent 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 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 );

Note: the class/classes will also be applied to the related products, generated by a "loop" on the single product page.

To prevent this, use:

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

Then you can apply the CSS as follows:

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