Woocommerce replace add to cart button with custom button/link - wordpress

I need to replace the Add to Cart button (only on certain categories) with a custom button for "Text a Dealer." The "Text a Dealer" button will trigger a gravity form in a lightbox which allows the user to submit a text message over the Twilio SMS service.
Here is a screenshot
I think I know how to link the button to a form in a lightbox but I do not know how to replace the button.

add_filter( 'woocommerce_loop_add_to_cart_link', 'replace_default_button' );
function replace_default_button(){
return '<button>Text a Dealer</button>';
}
You can replace button code with your desired code.
This will replace the default button code with your custom code.
You also want this customization to be applicable only on certain categories. This can be achieved by addition of some more code. See below.
add_filter( 'woocommerce_loop_add_to_cart_link', 'replace_default_button' );
function replace_default_button(){
//list category slugs where button needs to be changed
$selected_cats = array('cat-one-slug', 'cat-two-slug', 'cat-three-slug');
//get current category object
$current_cat = get_queried_object();
//get category slug from category object
$current_cat_slug = $current_cat->slug;
//check if current category slug is in the selected category list
if( in_array($current_cat_slug, $selected_cats) ){
//replace default button code with custom code
return '<button>Text a Dealer</button>';
}
}
Hope this helps.

$args = array();
if ( $product ) {
$defaults = array(
'quantity' => 1,
'class' => implode(
' ',
array_filter(
array(
'button add-to-cart-loop',
'product_type_' . $product->get_type(),
$product->is_purchasable() && $product->is_in_stock() ? 'add_to_cart_button' : '',
$product->supports( 'ajax_add_to_cart' ) && $product->is_purchasable() && $product->is_in_stock() ? 'ajax_add_to_cart' : '',
)
)
)
);
$args = apply_filters( 'woocommerce_loop_add_to_cart_args', wp_parse_args( $args, $defaults ), $product );
$price = $product->get_price();
echo apply_filters( 'woocommerce_loop_add_to_cart_link',
sprintf( '<a rel="nofollow" data-product_price_'.esc_attr( $product->get_id() ).'="'. $price .'" href="%s" data-quantity="%s" data-product_id="%s" data-product_sku="%s" class="%s"><span>%s</span></a>',
esc_url( $product->add_to_cart_url() ),
esc_attr( isset( $args['quantity'] ) ? $args['quantity'] : 1 ),
esc_attr( $product->get_id() ),
esc_attr( $product->get_sku() ),
esc_attr( isset( $args['class'] ) ? $args['class'] : 'button' ),
esc_html( $product->add_to_cart_text() )
),
$product );
}

Related

How to remove item from cart via ajax edd

I want to remove item from cart via ajax and I'm using Easy Digital Downloads plugin so is there any clue for that.
I already found below code but don't know how to use it as I made customizations to my custom theme by overriding templates.
function edd_ajax_remove_from_cart() {
if ( ! isset( $_POST['nonce'] ) ) {
edd_debug_log( __( 'Missing nonce when removing an item from the cart. Please read the following for more information: https://easydigitaldownloads.com/development/2018/07/05/important-update-to-ajax-requests-in-easy-digital-downloads-2-9-4', 'easy-digital-downloads' ), true );
}
if ( isset( $_POST['cart_item'] ) && isset( $_POST['nonce'] ) ) {
$cart_item = absint( $_POST['cart_item'] );
$nonce = sanitize_text_field( $_POST['nonce'] );
$nonce_verified = wp_verify_nonce( $nonce, 'edd-remove-cart-widget-item' );
if ( false === $nonce_verified ) {
$return = array( 'removed' => 0 );
} else {
edd_remove_from_cart( $cart_item );
$return = array(
'removed' => 1,
'subtotal' => html_entity_decode( edd_currency_filter( edd_format_amount( edd_get_cart_subtotal() ) ), ENT_COMPAT, 'UTF-8' ),
'total' => html_entity_decode( edd_currency_filter( edd_format_amount( edd_get_cart_total() ) ), ENT_COMPAT, 'UTF-8' ),
'cart_quantity' => html_entity_decode( edd_get_cart_quantity() ),
);
if ( edd_use_taxes() ) {
$cart_tax = (float) edd_get_cart_tax();
$return['tax'] = html_entity_decode( edd_currency_filter( edd_format_amount( $cart_tax ) ), ENT_COMPAT, 'UTF-8' );
}
}
$return = apply_filters( 'edd_ajax_remove_from_cart_response', $return );
echo json_encode( $return );
}
edd_die();
}
Here is my Current delete item code inside overrided template inside edd_templates/checkout_cart.php file.
<a class="edd_cart_remove_item_btn" href="<?php echo esc_url( wp_nonce_url( edd_remove_item_url( $key ), 'edd-remove-from-cart-' . sanitize_key( $key ), 'edd_remove_from_cart_nonce' ) ); ?>"></a>
But it refresh cart page when I click on x(delete) in cart but I want to remove item using ajax any help will be appreciated.

How to add target blank attribute to external products of WooCommerce blocks in a post

I'd like to add Products by Tag block to a post. Some are external products, so how can I add target blank to the button to open a new window? As default, all extnernal links are redirected. I also want to change its button text. I use the following code snippet but it doesn't work.
function wp_target_blank( $link ) {
global $product;
if ( $product->is_type( 'external' ) ) {
$link = sprintf( '%s',
esc_url( $product->add_to_cart_url() ),
esc_attr( isset( $quantity ) ? $quantity : 1 ),
esc_attr( isset( $class ) ? $class : 'wp-block-button__link add_to_cart_button' ),
esc_attr( $product->id ),
esc_attr( $product->get_sku() ),
esc_html( $product->add_to_cart_text() ),
esc_html( $product->add_to_cart_text() )
);
}
return $link;
}
Please let me know how to do that. Thanks so much.
The Original Woocommerce Source code:
protected function render_product( $product ) {
$data = (object) array(
'permalink' => esc_url( $product->get_permalink() ),
'image' => $this->get_image_html( $product ),
'title' => $this->get_title_html( $product ),
'rating' => $this->get_rating_html( $product ),
'price' => $this->get_price_html( $product ),
'badge' => $this->get_sale_badge_html( $product ),
'button' => $this->get_button_html( $product ),
);
return apply_filters(
'woocommerce_blocks_product_grid_item_html',
"<li class=\"wc-block-grid__product\">
<a href=\"{$data->permalink}\" class=\"wc-block-grid__product-link\">
{$data->image}
{$data->title}
</a>
{$data->badge}
{$data->price}
{$data->rating}
{$data->button}
</li>",
$data,
$product
);
}
To add target blank to external products:
/**
* #snippet Add target blank to external products
* #author Vinay jain
* #compatible WooCommerce 5
*/
add_filter( 'woocommerce_blocks_product_grid_item_html', 'add_target_blank_to_externl_products', 9999, 3 );
function add_target_blank_to_externl_products( $html, $data, $product ) {
$target = '';
if( $product->is_type( 'external' ) ) {
$target = 'target="_blank"';
}
return "<li class=\"wc-block-grid__product\">
<a {$target} href=\"{$data->permalink}\" class=\"wc-block-grid__product-link\">
{$data->image}
{$data->title} //change button text here
</a>
{$data->badge}
{$data->price}
{$data->rating}
{$data->button}
</li>";
}

WooCommerce: How do I add a product thumbnail image to added to cart message?

I'm using this snippet below to slightly modify Woocommerce's added to cart message. It redirects to the cart page from product pages. I'd like to add the product's thumbnail image to that Woocommerce message notification to show it clearer to the customer what has been added to the cart. Any solutions? I've tried a bunch of different ways, but no success.
function ace_add_to_cart_message_html( $message, $products ) {
$count = 0;
$titles = array();
foreach ( $products as $product_id => $qty ) {
$titles[] = ( $qty > 1 ? absint( $qty ) . ' Ɨ ' : '' ) . sprintf( _x( 'ā€œ%sā€', 'Item name in quotes', 'woocommerce' ), strip_tags( get_the_title( $product_id ) ) );
$count += $qty;
}
$titles = array_filter( $titles );
$added_text = sprintf( _n(
'%s has been added to your cart.', // Singular
'%s are added to your cart.', // Plural
$count, // Number of products added
'woocommerce' // Textdomain
), wc_format_list_of_items( $titles ) );
$message = sprintf( '%s %s', esc_url( wc_get_checkout_url() ), esc_html__( 'Proceed to checkout', 'woocommerce' ), esc_html( $added_text ) );
return $message;
}
You can use wc_add_to_cart_message action hook. try the below code.
function add_product_image_wc_add_to_cart_message_html( $message, $product_id ){
if ( has_post_thumbnail( $product_id ) ):
$image = wp_get_attachment_image_src( get_post_thumbnail_id( $product_id ), 'single-post-thumbnail' );
endif;
$message = sprintf( '<img src="'.$image[0].'" style="height: 50px;width: 50px;float: left;margin-right: 10px;" />%s', $message );
return $message;
}
add_filter( 'wc_add_to_cart_message', 'add_product_image_wc_add_to_cart_message_html', 10, 2 );
Tested and Works

Add to cart button with quentity filed under image woocommerce

I want to add add to cart button with quantity filed under image in single product page. i have tried many code but not luck. one code which work but issue is that quantity not adding properly. i add below code my-theme/woocommerce/single-product/product-image.php before do_action( 'woocommerce_product_thumbnails' ); hook.
if ( ! is_shop() && ! is_product_taxonomy() ) {
$quantity_field = woocommerce_quantity_input( array(
'input_name' => 'product_id',
'input_value' => ! empty( $product->cart_item['quantity'] ) ? $product->cart_item['quantity'] : 1,
'max_value' => $product->backorders_allowed() ? '' : $product->get_stock_quantity(),
'min_value' => 0,
), $product, false );
$quantity_field = str_replace( array( '<div class="quantity">', "</div>" ), '', $quantity_field );
echo str_replace( '<input ', '<input style="max-width: 70px" ', $quantity_field );
}
echo apply_filters( 'woocommerce_loop_add_to_cart_link',
sprintf( '<a rel="nofollow" href="%s" data-quantity="%s" data-product_id="%s" data-product_sku="%s" class="%s">%s</a>',
esc_url( $product->add_to_cart_url() ),
esc_attr( isset( $quantity ) ? $quantity : 1 ),
esc_attr( $product->id ),
esc_attr( $product->get_sku() ),
esc_attr( isset( $class ) ? $class : 'button' ),
esc_html( $product->add_to_cart_text() )
),
$product );
Hi add this hook in your function file.
remove_action( 'woocommerce_single_product_summary','woocommerce_template_single_add_to_cart',30 );
add_action( 'woocommerce_product_thumbnails','woocommerce_template_single_add_to_cart',30 );
display as like default WC
http://screencast.com/t/u8giinLfKmzt

Woocommerce replace add to cart url to link to product page

I am using this shortcode to display products [product_category category="extras" orderby="date"].
Variable products show "select options" and single products show "add to cart". I was able to change text of both to say "View Product".
The problem now is that I need to change the url of those that used to say "add to cart", because they don't link to the product page but to "Add to the cart".
I know I can edit the woocommerce template, but I would need this as a function to be added to function.php
I don't need any button involved, just replacing the url.
So again purpose:
Replace/redirect "Add to Cart" url to link to product page (only in loop, obviously not in product page).
Can someone help?
If someone does elect to change the woocommerce file (in child theme of course!).
In file: /loop/add-to-cart.php
Change:
global $product;
echo apply_filters( 'woocommerce_loop_add_to_cart_link',
sprintf( '%s',
esc_url( $product->add_to_cart_url() ),
esc_attr( $product->id ),
esc_attr( $product->get_sku() ),
esc_attr( isset( $quantity ) ? $quantity : 1 ),
$product->is_purchasable() && $product->is_in_stock() ? 'add_to_cart_button' : '',
esc_attr( $product->product_type ),
esc_html( $product->add_to_cart_text() )
),
$product );
To:
global $product;
if ( $product->product_type == "simple" ) {
$simpleURL = get_permalink();
$simpleLabel = "View Product"; // BUTTON LABEL HERE
} else {
$simpleURL = $product->add_to_cart_url();
$simpleLabel = $product->add_to_cart_text();
};
echo apply_filters( 'woocommerce_loop_add_to_cart_link',
sprintf( '%s',
esc_url( $simpleURL ),
esc_attr( $product->id ),
esc_attr( $product->get_sku() ),
esc_attr( isset( $quantity ) ? $quantity : 1 ),
$product->is_purchasable() && $product->is_in_stock() ? 'add_to_cart_button' : '',
esc_attr( $product->product_type ),
esc_html( $simpleLabel )
),
$product );
In the funtions.php of you theme add this code:
/*STEP 1 - REMOVE ADD TO CART BUTTON ON PRODUCT ARCHIVE (SHOP) */
function remove_loop_button(){
remove_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart', 10 );
}
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 '<p style="text-align:center;margin-top:10px;">';
$currentlang = get_bloginfo('language');
//for multilanguage
if($currentlang=="en-GB"){
echo do_shortcode('View Product');
} elseif($currentlang=="fr-FR"){
echo do_shortcode('Voir le produit');
}else {
echo do_shortcode('Ver Producto');
}
echo '</p>';
}
I believe you can disable AJAX add-to-cart functionality in the WooCommerce settings.
If that isn't satisfactory for some reason you can take a look at the loop/add-to-cart.php template. The add to cart link is filterable. If you look at add-to-cart.js you can see that the AJAX add to cart function is triggered for any link with the add_to_cart button class, and only works for buttons with the product_type_simple class.... ie: only for simple products. Depending on your styles, you could either remove the product type class or the add_to_cart_button class from the link. In the example below, I have removed the add_to_cart_button class.
add_filter( 'woocommerce_loop_add_to_cart_link', 'so_26247988_add_to_cart_link', 10, 2 );
function so_26247988_add_to_cart_link( $link, $product ){
$link = sprintf( '%s',
esc_url( $product->add_to_cart_url() ),
esc_attr( $product->id ),
esc_attr( $product->get_sku() ),
esc_attr( isset( $quantity ) ? $quantity : 1 ),
esc_attr( $product->product_type ),
esc_html( $product->add_to_cart_text() )
)
return $link;
}

Resources