Hi everyone,
I want to be able to add these attrributes (data-placement=“top” data-toggle=“tooltip”) to the default WooCommerce add to cart ajax button anchor.
Below is the default woocommerce file and code that I want know how to modify in my child theme -
wp-content\plugins\woocommerce\includes\wc-template-functions.php
if ( ! function_exists( 'woocommerce_template_loop_add_to_cart' ) ) {
/**
* Get the add to cart template for the loop.
*
* @param array $args Arguments.
*/
function woocommerce_template_loop_add_to_cart( $args = array() ) {
global $product;
if ( $product ) {
$defaults = array(
'quantity' => 1,
'class' => implode( ' ', array_filter( array(
'button',
'product_type_' . $product->get_type(),
$product->is_purchasable() && $product->is_in_stock() ? 'add_to_cart_button' : '',
$product->supports( 'ajax_add_to_cart' ) ? 'ajax_add_to_cart' : '',
) ) ),
'attributes' => array(
'data-product_id' => $product->get_id(),
'data-product_sku' => $product->get_sku(),
'aria-label' => $product->add_to_cart_description(),
'rel' => 'nofollow',
),
);
$args = apply_filters( 'woocommerce_loop_add_to_cart_args', wp_parse_args( $args, $defaults ), $product );
if ( isset( $args['attributes']['aria-label'] ) ) {
$args['attributes']['aria-label'] = strip_tags( $args['attributes']['aria-label'] );
}
wc_get_template( 'loop/add-to-cart.php', $args );
}
}
}
Here’s how a modified version of the attributes should look like -
'attributes' => array(
'data-product_id' => $product->get_id(),
'data-product_sku' => $product->get_sku(),
'aria-label' => $product->add_to_cart_description(),
'rel' => 'nofollow',
'data-toggle' => 'tooltip',
'title' => 'add to cart',
'data-placement' => 'bottom'
),
I found the following advice semi useful but I get an error when I try implementing what I want to do with it -
https://stackoverflow.com/questions/37922950/woocommerce-custom-add-to-cart-text-link
The second post recommends -
Step 1 - Remove “add to cart” button from shop
function remove_loop_button(){
remove_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart', 10 );
add_filter( 'woocommerce_is_purchasable', false );
}
add_action('init','remove_loop_button');
Step 2 -Add new button that links to product page for each product
add_action('woocommerce_after_shop_loop_item','replace_add_to_cart');
function replace_add_to_cart() {
global $product;
$link = $product->get_permalink();
echo do_shortcode('<a href="'.$link.'" class="button addtocartbutton">Learn more</a>');
}
With that in mind I tried the following -
function remove_loop_button(){
remove_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart', 10 );
add_filter( 'woocommerce_is_purchasable', false );
}
add_action('init','remove_loop_button');
add_action('woocommerce_after_shop_loop_item','replace_add_to_cart');
function replace_add_to_cart() {
global $product;
if ( $product ) {
$defaults = array(
'quantity' => 1,
'class' => implode( ' ', array_filter( array(
'button',
'product_type_' . $product->get_type(),
$product->is_purchasable() && $product->is_in_stock() ? 'add_to_cart_button' : '',
$product->supports( 'ajax_add_to_cart' ) ? 'ajax_add_to_cart' : '',
) ) ),
'attributes' => array(
'data-product_id' => $product->get_id(),
'data-product_sku' => $product->get_sku(),
'aria-label' => $product->add_to_cart_description(),
'rel' => 'nofollow',
'data-toggle' => 'tooltip',
'title' => 'add to cart',
'data-placement' => 'top'
),
);
$args = apply_filters( 'woocommerce_loop_add_to_cart_args', wp_parse_args( $args, $defaults ), $product );
if ( isset( $args['attributes']['aria-label'] ) ) {
$args['attributes']['aria-label'] = strip_tags( $args['attributes']['aria-label'] );
}
wc_get_template( 'loop/add-to-cart.php', $args );
}
}
This error is then output -
Warning: call_user_func_array() expects parameter 1 to be a valid callback, no array or string given in \wp-includes\class-wp-hook.php on line
Any ideas how to do this right? I just want to add a bootstrap popper tooltip to the button. This is how I want the markup to look with the with data-placement=“top” data-toggle=“tooltip” added -
<a href="/?add-to-cart=45318" data-quantity="1" class="button product_type_simple add_to_cart_button ajax_add_to_cart" data-product_id="45318" data-product_sku="sku-01" aria-label="Add “apple” to your basket" rel="nofollow" title="" tabindex="0" title="add to cart" data-placement="top" data-toggle="tooltip">