Couple of weeks in the past I had a buyer who wanted so as to add Woocommerce amount selector in archive/loop pages. Subsequently, right now I’m going to share couple of code snippets you possibly can strive. Listen although that there are themes that override Woocommerce layouts and due to this fact not one of the options could not be just right for you.
The code snippets you’re going to make use of will go to the features.php file of your baby theme or higher sure, use Code Snippets plugin for it. See the video right here under after which it’s going to be simpler to know what’s what.
Yet one more factor: it really works solely with the easy merchandise and isn’t working for the variable merchandise.
Video: Learn how to add Woocommerce Amount Selector in Archive/Loop pages?
Learn how to add Woocommerce Amount Selector in Blocksy theme Archive/Loop pages?
First issues first. I’m going to supply you three totally different code snippets however the one which works greatest for the Blocksy theme is the one right here under.
// Woocommerce amount selector for loop pages
add_filter( 'woocommerce_loop_add_to_cart_link', 'qty_add_to_cart_selector', 10, 2 );
operate qty_add_to_cart_selector( $html, $product ) {
if ( $product && $product->is_type( 'easy' ) && $product->is_purchasable() && $product->is_in_stock() && ! $product->is_sold_individually() ) {
$html = wc_get_template_html( 'single-product/add-to-cart/easy.php' );
}
return $html;
}I’ve to level out although, that It appears higher with the archive web page sort 1 (see underneath Customizer >> Woocommerce >> Product catalog)
That is the tip end result.
Learn how to add Woocommerce Amount Selector in Kadence theme Archive/Loop pages?
Now it will get fascinating since this code snippet right here above form of works with the Kadence theme however after urgent on Add to cart button it is going to redirect you to single product web page.
Because you in all probability received’t like this resolution we have to use one other snippet. So, if you wish to add Woocommerce amount selector in Kadence theme archive/loop pages then use this snippet right here under.
// Woocommerce amount selector for archive pages
add_filter( 'woocommerce_loop_add_to_cart_link', 'qty_add_to_cart_selector', 10, 2 );
operate qty_add_to_cart_selector( $html, $product ) {
if ( $product && $product->is_type( 'easy' ) && $product->is_purchasable() && $product->is_in_stock() && ! $product->is_sold_individually() ) {
// Get the required lessons
$class = implode( ' ', array_filter( array(
'button',
'product_type_' . $product->get_type(),
$product->is_purchasable() && $product->is_in_stock() ? 'add_to_cart_button' : '',
$product->helps( 'ajax_add_to_cart' ) ? 'ajax_add_to_cart' : '',
) ) );
// Embedding the amount discipline to Ajax add to cart button
$html = sprintf( '%s<a rel="nofollow" href="%s" data-quantity="%s" data-product_id="%s" data-product_sku="%s" class="%s">%s</a>',
woocommerce_quantity_input( array(), $product, false ),
esc_url( $product->add_to_cart_url() ),
esc_attr( isset( $amount ) ? $amount : 1 ),
esc_attr( $product->get_id() ),
esc_attr( $product->get_sku() ),
esc_attr( isset( $class ) ? $class : 'button' ),
esc_html( $product->add_to_cart_text() )
);
}
return $html;
}
add_action( 'wp_footer' , 'archives_quantity_fields_script' );
operate archives_quantity_fields_script(){
?>
<script sort='textual content/javascript'>
jQuery(operate($){
// Replace data-quantity
$(doc.physique).on('click on enter', 'enter.qty', operate() {
$(this).guardian().guardian().discover('a.ajax_add_to_cart').attr('data-quantity', $(this).val());
$(".added_to_cart").take away(); // Non-compulsory: Eradicating different earlier "view cart" buttons
}).on('click on', '.add_to_cart_button', operate(){
var button = $(this);
setTimeout(operate(){
button.guardian().discover('.amount > enter.qty').val(1); // reset amount to 1
}, 1000); // After 1 second
});
});
</script>
<?php
}And that is the tip end result which work nicely and has Ajax add to cart choice.
Learn how to add Woocommerce Amount Selector in Astra and Generatepress theme Archive/Loop pages?
As I stated above: themes are totally different and due to this fact snippet that work for one theme received’t work for an additional. Thankfully, if you wish to add Woocommerce amount selector in Astra theme or Generaepress theme archive/loop pages you should utilize the identical snippet I used for Kadence above.
Learn how to add Woocommerce Amount Selector in OceanWP theme Archive/Loop pages?
Sadly not one of the options described above is nor working with the OceanWP theme. Subsequently we have to use one other one. So, copy and paste this snippet.
// Woocommerce amount selector for loop pages
add_filter( 'woocommerce_loop_add_to_cart_link', 'qty_add_to_cart_selector', 10, 2 );
operate qty_add_to_cart_selector( $html, $product ) {
if ( $product && $product->is_type( 'easy' ) && $product->is_purchasable() && $product->is_in_stock() && ! $product->is_sold_individually() ) {
$html = '<kind motion="' . esc_url( $product->add_to_cart_url() ) . '" class="cart" technique="publish" enctype="multipart/form-data">';
$html .= woocommerce_quantity_input( array(), $product, false );
$html .= '<button sort="submit" class="button alt">' . esc_html( $product->add_to_cart_text() ) . '</button>';
$html .= '</kind>';
}
return $html;
}The tip end result appears like this right here under.
There are couople of limitations although:
- Ajax add to cart is just not working
- It is going to add product to the cart and provides after that reveals you the URL on the URL field (for instance https://yoursite.com/store/?add-to-cart=676). Because of this in case you occur to refresh the web page then it is going to add the identical quantity of produts to the cart.
This isn’t occurring with the Blocksy, Astra, Kadence and Generatepress themes and with the snippets proven above.
