Custom add to cart button/link in variable single product pages

Question

In WooCommerce 3.0+, I have created some tabs using js and in each tab contains products from different categories. I have managed to modify add-to-cart link for simple products where ones the addtocart button is clicked it goes to the next tab without refreshing and the product is being added successfully to the cart.

if ( has_term( 'jeans-discount', 'product_cat', $post ) ) {
      echo apply_filters( 'woocommerce_loop_add_to_cart_link',
sprintf( '<a rel="nofollow" data-target="2" href="javascript:void(0); %s" data-quantity="%s" data-product_id="%s" data-product_sku="%s" class="custom %s">%s</a>',
    esc_url( $product->add_to_cart_url() ),
    esc_attr( isset( $quantity ) ? $quantity : 1 ),
    esc_attr( $product->get_id() ),
    esc_attr( $product->get_sku() ),
    esc_attr( isset( $class ) ? $class : 'button' ),
    esc_html( $product->add_to_cart_text() )
    ),
    $product );
    }

However I am not able to modify the addtocart button for variable products in variation-add-to-cart.php template file:

<button type="submit" class="single_add_to_cart_button button alt"><?php echo esc_html( $product->single_add_to_cart_text() ); ?></button>

For simple product the addtocart link shows as href="javascript:void(0); /wordpress/woo-slider/?add-to-cart=73".

Is there a way i can do this for variable products addtocart link as well?

Ok, so I have post an answer for both versions of Woocommerce, but I can't test it for real (as your tab system is something custom). Let me know if it works. Thanks — LoicTheAztec

LoicTheAztec LoicTheAztec · Accepted Answer · 2017-04-10T12:47:52

For WooCommerce version 3.0+ you will override variation-add-to-cart.php template this way:

<?php
/**
 * Single variation cart button
 *
 * @see     https://docs.woocommerce.com/document/template-structure/
 * @author  WooThemes
 * @package WooCommerce/Templates
 * @version 3.0.0
 */
if ( ! defined( 'ABSPATH' ) ) {
    exit;
}

global $product;

?>
<div class="woocommerce-variation-add-to-cart variations_button">
    <?php
        /**
         * @since 3.0.0.
         */
        do_action( 'woocommerce_before_add_to_cart_quantity' );

        woocommerce_quantity_input( array(
            'min_value'   => apply_filters( 'woocommerce_quantity_input_min', $product->get_min_purchase_quantity(), $product ),
            'max_value'   => apply_filters( 'woocommerce_quantity_input_max', $product->get_max_purchase_quantity(), $product ),
            'input_value' => isset( $_POST['quantity'] ) ? wc_stock_amount( $_POST['quantity'] ) : $product->get_min_purchase_quantity(),
        ) );

        /**
         * @since 3.0.0.
         */
        do_action( 'woocommerce_after_add_to_cart_quantity' );

// Set HERE your targeted product category
if ( has_term( 'jeans-discount', 'product_cat', $product->get_id() ) ) {

    ?>
    <button type="submit" data-target="2" class="single_add_to_cart_button button alt" onclick="javascript:void(0);"><?php echo esc_html( $product->single_add_to_cart_text() ); ?></button>

<?php } else { // Other product categories
?>

    <button type="submit" class="single_add_to_cart_button button alt"><?php echo esc_html( $product->single_add_to_cart_text() ); ?></button>

<?php } ?>

    <input type="hidden" name="add-to-cart" value="<?php echo absint( $product->get_id() ); ?>" />
    <input type="hidden" name="product_id" value="<?php echo absint( $product->get_id() ); ?>" />
    <input type="hidden" name="variation_id" class="variation_id" value="0" />
</div>

I can't test it for real (as I don't have a system of tabs enabled), but this is successful working on my test server without error problems.

For WooCommerce 2.6.x you will override variation-add-to-cart.php template this way:

<?php
/**
 * Single variation cart button
 *
 * @see     https://docs.woocommerce.com/document/template-structure/
 * @author  WooThemes
 * @package WooCommerce/Templates
 * @version 2.5.0
 */
if ( ! defined( 'ABSPATH' ) ) {
    exit;
}

global $product;

// Set HERE your targeted product category
if ( has_term( 'jeans-discount', 'product_cat', $product->id ) ) {

?>
<div class="woocommerce-variation-add-to-cart variations_button">
    <?php if ( ! $product->is_sold_individually() ) : ?>
        <?php woocommerce_quantity_input( array( 'input_value' => isset( $_POST['quantity'] ) ? wc_stock_amount( $_POST['quantity'] ) : 1 ) ); ?>
    <?php endif; ?>
    <button type="submit" data-target="2" class="single_add_to_cart_button button alt" onclick="javascript:void(0);"><?php echo esc_html( $product->single_add_to_cart_text() ); ?></button>

<?php } else { // Other product categories
?>

<div class="woocommerce-variation-add-to-cart variations_button">
    <?php if ( ! $product->is_sold_individually() ) : ?>
        <?php woocommerce_quantity_input( array( 'input_value' => isset( $_POST['quantity'] ) ? wc_stock_amount( $_POST['quantity'] ) : 1 ) ); ?>
    <?php endif; ?>
    <button type="submit" class="single_add_to_cart_button button alt"><?php echo esc_html( $product->single_add_to_cart_text() ); ?></button>

<?php } ?>

    <input type="hidden" name="add-to-cart" value="<?php echo absint( $product->id ); ?>" />
    <input type="hidden" name="product_id" value="<?php echo absint( $product->id ); ?>" />
    <input type="hidden" name="variation_id" class="variation_id" value="0" />
</div>

Custom add to cart button/link in variable single product pages

1 Answers