Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Display Product Variations in the Shop Loop - With Conditional Apply Filter Logic
<?php
/**
* Custom Loop Add to Cart.
*
* Template with quantity and ajax.
*/
if ( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly.
global $product;
?>
<?php if ( ! $product->is_in_stock() ) : ?>
<a href="<?php echo apply_filters( 'out_of_stock_add_to_cart_url', get_permalink( $product->id ) ); ?>" class="button"><?php echo apply_filters( 'out_of_stock_add_to_cart_text', __( 'Read More', 'woocommerce' ) ); ?></a>
<?php else : ?>
<?php
$link = array(
'url' => '',
'label' => '',
'class' => ''
);
switch ( $product->product_type ) {
case "variable" :
$link['url'] = apply_filters( 'woocommerce_variable_add_to_cart', get_permalink( $product->id ) );
$link['label'] = apply_filters( 'variable_add_to_cart_text', __( 'Select options', 'woocommerce' ) );
break;
case "grouped" :
$link['url'] = apply_filters( 'grouped_add_to_cart_url', get_permalink( $product->id ) );
$link['label'] = apply_filters( 'grouped_add_to_cart_text', __( 'View options', 'woocommerce' ) );
break;
case "external" :
$link['url'] = apply_filters( 'external_add_to_cart_url', get_permalink( $product->id ) );
$link['label'] = apply_filters( 'external_add_to_cart_text', __( 'Read More', 'woocommerce' ) );
break;
default :
if ( $product->is_purchasable() ) {
$link['url'] = apply_filters( 'add_to_cart_url', esc_url( $product->add_to_cart_url() ) );
$link['label'] = apply_filters( 'add_to_cart_text', __( 'Add to cart', 'woocommerce' ) );
$link['class'] = apply_filters( 'add_to_cart_class', 'add_to_cart_button' );
} else {
$link['url'] = apply_filters( 'not_purchasable_url', get_permalink( $product->id ) );
$link['label'] = apply_filters( 'not_purchasable_text', __( 'Read More', 'woocommerce' ) );
}
break;
}
// If there is a simple product.
if ( $product->product_type == 'simple' ) {
?>
<form action="<?php echo esc_url( $product->add_to_cart_url() ); ?>" class="cart" method="post" enctype="multipart/form-data">
<?php
// Displays the quantity box.
woocommerce_quantity_input();
// Display the submit button.
echo sprintf( '<button type="submit" data-product_id="%s" data-product_sku="%s" data-quantity="1" class="%s button product_type_simple">%s</button>', esc_attr( $product->id ), esc_attr( $product->get_sku() ), esc_attr( $link['class'] ), esc_html( $link['label'] ) );
?>
</form>
<?php
} else {
echo apply_filters( 'woocommerce_loop_add_to_cart_link', sprintf('<a href="%s" rel="nofollow" data-product_id="%s" data-product_sku="%s" class="%s button product_type_%s">%s</a>', esc_url( $link['url'] ), esc_attr( $product->id ), esc_attr( $product->get_sku() ), esc_attr( $link['class'] ), esc_attr( $product->product_type ), esc_html( $link['label'] ) ), $product, $link );
}
?>
<?php endif; ?>
@bahiirwa

This comment has been minimized.

Copy link

@bahiirwa bahiirwa commented Oct 29, 2016

This is a life and day time saver. Cheers!

@smirnovvu

This comment has been minimized.

Copy link

@smirnovvu smirnovvu commented Dec 12, 2016

This looks awesome!
Where do i have to put this code? ;)

@puneetdhawan86

This comment has been minimized.

Copy link

@puneetdhawan86 puneetdhawan86 commented Dec 18, 2016

You have to replace the file inside the plugin folder..
@lukecave...Thanks for this, but when I replaced it I found an issue: Select Option button is still there for variable products. Pressing it does nothing. It should not be there at all I guess?

@pprotschka

This comment has been minimized.

Copy link

@pprotschka pprotschka commented Dec 21, 2016

you sir are my hero. saved me countless hours! rock on.

@pprotschka

This comment has been minimized.

Copy link

@pprotschka pprotschka commented Dec 21, 2016

have you ever gotten this to work with ajax add to cart?

@gokhandilek

This comment has been minimized.

Copy link

@gokhandilek gokhandilek commented Jun 5, 2017

Where is this file located?

@MaheshD1988

This comment has been minimized.

Copy link

@MaheshD1988 MaheshD1988 commented Sep 15, 2017

Hi this is best solution but i have question regarding product image , how we can show selected variation image ?

@bahiirwa

This comment has been minimized.

Copy link

@bahiirwa bahiirwa commented Nov 15, 2017

There is a need to update $product->id to $product->get_id() and $product->product_type to $product->get_type() since Woocommerce 3.0.0 update

@neharika23

This comment has been minimized.

Copy link

@neharika23 neharika23 commented Jul 2, 2018

This looks awesome!
but I have one question . After add to cart on variation product it redirects to single page but I would like to stop on the same page and show the message on the header "Product has been added to cart"
Thanks in advance.

@GEORGEPOIYKAIL

This comment has been minimized.

Copy link

@GEORGEPOIYKAIL GEORGEPOIYKAIL commented Nov 8, 2019

its working except the pricing , not displaying price for the selected quantity , could you please help with correct this code..support plsss. I am using wordpress /woocommerce site , i have entered this code through snippets pls support

@dermotgar

This comment has been minimized.

Copy link

@dermotgar dermotgar commented Oct 19, 2020

Did anyone find a solution to the page reloading after the product was added?

@dancinporcupine

This comment has been minimized.

Copy link

@dancinporcupine dancinporcupine commented Nov 9, 2020

Did anyone find a solution to the page reloading after the product was added?

Yes i did, after some research. Add this to your functions.php
// Disable add to cart redirection https://stackoverflow.com/questions/30998060/disable-add-to-cart-redirection/56732418#56732418 add_filter( 'woocommerce_add_to_cart_redirect', 'wp_get_referer' );

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.