woocommerce how to add images at "has been added to your cart"?
go to your
wordpress\wp-content\plugins\woocommerce\includes\wc-cart-functions.php
find the code
} else {
$message = sprintf( '%s %s', esc_url( wc_get_page_permalink( 'cart' ) ), esc_html__( 'View cart', 'woocommerce' ), esc_html( $added_text ) );
}
replace it with below code
} else {
$product_meta = get_post_meta($product_id);
$img = wp_get_attachment_image(($product_meta['_thumbnail_id'][0]), 'thumbnail');
$message = sprintf( "$img".'%s %s', esc_url( wc_get_page_permalink( 'cart' ) ), esc_html__( 'View cart', 'woocommerce' ), esc_html( $added_text ) );
}
it will look like this http://prntscr.com/f3hpsx
You can do that via wc_add_to_cart_message filter from woocommerce.
add_filter( 'wc_add_to_cart_message', 'adding_image_to_cart_message' );
function adding_image_to_cart_message() {
global $woocommerce;
$return_to = get_permalink(woocommerce_get_page_id('shop'));
$imgpath = 'add your image path here';
$message = sprintf('<img src="%s"/>%s %s', $imgpath , $return_to, __('Continue Shopping', 'woocommerce'), __('has been added to your cart.', 'woocommerce') );
return $message;
}
Add your image path to $imgpath variable.
Related
In this post I was able to see the code that made a custom field with a link work very well.
Display a selected variation custom field in WooCommerce as a pdf linked file
My problem is that I need to have three fields in each variation with different links each downloading a different datasheet.
I've tried this code, but I can't get it to save the custom fields when saving the variation:
// 1. Add custom field input # Product Data > Variations > Single Variation
add_action( 'woocommerce_variation_options_pricing', 'add_custom_field_to_variations', 10, 3 );
function add_custom_field_to_variations( $loop, $variation_data, $variation ) {
woocommerce_wp_text_input( array(
'id' => 'ficha[' . $loop . ']',
'class' => 'short',
'label' => __( 'ficha', 'woocommerce' ),
'value' => get_post_meta( $variation->ID, 'ficha', true )
) );
woocommerce_wp_text_input( array(
'id' => 'diagrama[' . $loop . ']',
'class' => 'short',
'label' => __( 'diagrama', 'woocommerce' ),
'value' => get_post_meta( $variation->ID, 'diagrama', true )
) );
woocommerce_wp_text_input( array(
'id' => 'esquema[' . $loop . ']',
'class' => 'short',
'label' => __( 'esquema', 'woocommerce' ),
'value' => get_post_meta( $variation->ID, 'custom_field', true )
) );
}
// -----------------------------------------
// 2. Save custom field on product variation save
add_action( 'woocommerce_save_product_variation', 'save_custom_field_variations', 10, 2 );
function save_custom_field_variations( $variation_id, $i )
{
$custom_field = $_POST['ficha'][$i];
if ( isset( $custom_field ) ) update_post_meta( $variation_id, 'ficha', esc_attr( $custom_field ) );
}
{
$custom_field = $_POST['diagrama'][$i];
if ( isset( $custom_field ) ) update_post_meta( $variation_id, 'diagrama', esc_attr( $custom_field ) );
}
{
$custom_field = $_POST['custom_field'][$i];
if ( isset( $custom_field ) ) update_post_meta( $variation_id, 'esquema', esc_attr( $custom_field ) );
}
// -----------------------------------------
// 3. Store custom field value into variation data
add_filter( 'woocommerce_available_variation', 'add_custom_field_value_to_variation_data', 10, 3 );
function add_custom_field_value_to_variation_data( $variation_data, $product, $variation ) {
$variation_data['custom_field'] = $variation->get_meta('custom_field');
if( ! empty($variation_data['custom_field']) ) {
$variation_data['custom_field_html'] = '<div class="woocommerce-custom_field"><img src="https://www.tualuce.eu/wp-content/uploads/2022/07/pdfimage-e1657626977128.png" width="50" height="50" alt="pdf_logo.png" title="' . __("External product link", "woocommerce") . '" />' . __(" Ficha tecnica", "woocommerce") . '</div>';
}
if( ! empty($variation_data['custom_field']) ) {
$variation_data['custom_field_html'] = '<div class="woocommerce-custom_field"><img src="https://www.tualuce.eu/wp-content/uploads/2022/07/pdfimage-e1657626977128.png" width="50" height="50" alt="pdf_logo.png" title="' . __("External product link", "woocommerce") . '" />' . __(" Diagrama", "woocommerce") . '</div>';
}
if( ! empty($variation_data['custom_field']) ) {
$variation_data['custom_field_html'] = '<div class="woocommerce-custom_field"><img src="https://www.tualuce.eu/wp-content/uploads/2022/05/visibility-e1653592380924.png" width="50" height="50" alt="pdf_logo.png" title="' . __("External product link", "woocommerce") . '" />' . __(" Esquema", "woocommerce") . '</div>';
}
return $variation_data;
}
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
When click on add to cart button, the Woocommerce shows the message, view cart, I want to edit this message, actually edit all the span, put some icon etc...
Add a filter to your theme/functions.php. The code below just overrides the existing $message. This overwrites $message with an nearly identical one that prepends a "checkout" link to the message.
Make sure you return the $message.
You can of course just modify the existing message, as the entire thing is passed as a string via the first param or $message var.
add_filter ( 'wc_add_to_cart_message', 'wc_add_to_cart_message_filter', 10, 2 );
function wc_add_to_cart_message_filter($message, $product_id = null) {
$titles[] = get_the_title( $product_id );
$titles = array_filter( $titles );
$added_text = sprintf( _n( '%s has been added to your cart.', '%s have been added to your cart.', sizeof( $titles ), 'woocommerce' ), wc_format_list_of_items( $titles ) );
$message = sprintf( '%s %s %s',
esc_html( $added_text ),
esc_url( wc_get_page_permalink( 'checkout' ) ),
esc_html__( 'Checkout', 'woocommerce' ),
esc_url( wc_get_page_permalink( 'cart' ) ),
esc_html__( 'View Cart', 'woocommerce' ));
return $message;
}
Have you tried a filter like the following
function your_add_to_cart_message() {
if ( get_option( 'woocommerce_cart_redirect_after_add' ) == 'yes' ) :
$message = sprintf( '%s%s', __( 'Successfully added to cart.', 'woocommerce' ), esc_url( get_permalink( woocommerce_get_page_id( 'shop' ) ) ), __( 'Continue Shopping', 'woocommerce' ) );
else :
$message = sprintf( '%s%s', __( 'Successfully added to cart.' , 'woocommerce' ), esc_url( get_permalink( woocommerce_get_page_id( 'cart' ) ) ), __( 'View Cart', 'woocommerce' ) );
endif;
return $message;
}
add_filter( 'wc_add_to_cart_message', 'your_add_to_cart_message' );
In reply to the ajax message update, try a translation function like:
function your_woo_ajax_solution( $translation, $text, $domain ) {
if ( $domain == 'woocommerce' ) { // your domain name
if ( $text == 'View Cart' ) { // current text that shows
$translation = 'Basket updated.'; // The text that you would like to show
}
}
return $translation;
}
add_filter( 'gettext', 'your_woo_ajax_solution', 10, 3 );
2017 - 2019 - For Woocommerce 3+ (handling multiple products added to cart)
Replaced by wc_add_to_cart_message_html filter hook, the 2nd function argument has changed to $products (instead of $product_id)…
You can make changes on the code inside this hooked function, like in this thread:
add_filter( 'wc_add_to_cart_message_html', 'custom_add_to_cart_message_html', 10, 2 );
function custom_add_to_cart_message_html( $message, $products ) {
$titles = array();
$count = 0;
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.', '%s have been added to your cart.', $count, 'woocommerce' ), wc_format_list_of_items( $titles ) );
// The custom message is just below
$added_text = sprintf( _n("%s item has %s", "%s items have %s", $count, "woocommerce" ),
$count, __("been added to your basket.", "woocommerce") );
// Output success messages
if ( 'yes' === get_option( 'woocommerce_cart_redirect_after_add' ) ) {
$return_to = apply_filters( 'woocommerce_continue_shopping_redirect', wc_get_raw_referer() ? wp_validate_redirect( wc_get_raw_referer(), false ) : wc_get_page_permalink( 'shop' ) );
$message = sprintf( '%s %s', esc_url( $return_to ), esc_html__( 'Continue shopping', 'woocommerce' ), esc_html( $added_text ) );
} else {
$message = sprintf( '%s %s', esc_url( wc_get_page_permalink( 'cart' ) ), esc_html__( 'View cart', 'woocommerce' ), esc_html( $added_text ) );
}
return $message;
}
Related threads (for Woocommerce 3+):
Hide Added to Cart message in Woocommerce
Customizing add-to-cart messages based on the product IDs in WooCommerce 3
Customize add to cart message in Woocommerce 3
If you look at add-to-cart.js it fires a trigger added_to_cart on adding a product to cart. I hooked into that and did this
jQuery(document.body).on("added_to_cart", function( data ) {
jQuery('button.added').nextAll().remove();
jQuery('button.added').after(' <span style="text-align:center;display:block;" class="cart_updated_ajax"><a href="' + wc_add_to_cart_params.cart_url + '" title="' +
wc_add_to_cart_params.i18n_view_cart + '">Cart Updated</a></span>');
});
Here you can add anything after product is added to cart.
Hope that helps!
In Woocommerce 3.0 "wc_add_to_cart_message" is obsolete and no longer works. So while the answer by #zmonteca was ok, is no longer working on the Woocommerce 3.0
Just replace "wc_add_to_cart_message" with "wc_add_to_cart_message_html" and voile... works.
add_filter ( 'wc_add_to_cart_message', 'wc_add_to_cart_message_filter', 10, 2 );
function wc_add_to_cart_message_filter($message, $product_id = null) {
$titles[] = get_the_title( $product_id );
$titles = array_filter( $titles );
$added_text = sprintf( _n( '%s has been added to your cart.', '%s have been added to your cart.', sizeof( $titles ), 'woocommerce' ), wc_format_list_of_items( $titles ) );
$message = sprintf( '%s %s %s',
esc_html( $added_text ),
esc_url( wc_get_page_permalink( 'checkout' ) ),
esc_html__( 'Checkout', 'woocommerce' ),
esc_url( wc_get_page_permalink( 'cart' ) ),
esc_html__( 'View Cart', 'woocommerce' ));
return $message;}
#Dante is correct, the solutions provided by #BradleyD won't work for ajax_add_to_cart on shop page.
The solution provided by #Abstract is working as expected. I am also using his solution.
Another jQuery approach is to to listen for the the ajaxSuccess event on the document object and do the desired modifications for the clicked button.
Something like that should work:
$(document).ajaxSuccess(function(event, xhr, settings) {
if (settings.url.indexOf('?wc-ajax=add_to_cart') !== -1) {
// You can find the clicked button element under the event.target.activeElement
// Than you can do whatever you want here. Add new html element and text, etc.
}
});
I used the add to cart message hook in Woocommerce to edit the text and remove some classes from certain buttons. It seems this hook is now deprecated in Woocommerce 2.1 and I can't find an alternative.
I want to remove the 'button' class from the 'Continue Shopping' button. This class gets defined in the Woocommerce core which I want to leave unedited for proper future updates.
The line I'm trying to edit is located in woocommerce/includes/wc-cart-functions.php line 94.
$message = sprintf('%s %s', $return_to, __( 'Continue Shopping', 'woocommerce' ), $added_text );
Did anyone find a proper alternative for this hook yet? Thanks in advance!
This worked for me
add_filter( 'wc_add_to_cart_message', 'custom_add_to_cart_message' );
function custom_add_to_cart_message() {
global $woocommerce;
$return_to = get_permalink(woocommerce_get_page_id('shop'));
$message = sprintf('%s %s', $return_to, __('Continue Shopping', 'woocommerce'), __('Product successfully added to your cart.', 'woocommerce') );
return $message;
}
Edited: Thanks for the correction Kaarel Kaspar
Woocommerce 2.3+,
add_filter( 'wc_add_to_cart_message', 'custom_add_to_cart_message' );
function custom_add_to_cart_message( $message ){
global $woocommerce;
$added_text = __( 'Product was successfully added to your Network Kit.', 'woocommerce' );
// Output success messages
if ( get_option( 'woocommerce_cart_redirect_after_add' ) == 'yes' ) :
$return_to = apply_filters( 'woocommerce_continue_shopping_redirect', wp_get_referer() ? wp_get_referer() : home_url() );
$message = sprintf('%s %s', $return_to, __( 'Continue Shopping', 'woocommerce' ), $added_text );
else :
$message = sprintf('%s %s', wc_get_page_permalink( 'cart' ), __( 'View your Network Kit', 'woocommerce' ), $added_text );
endif;
return $message;
}
Although this thread is a bit old, I found the link to my same question about deprecated since version 3.0! from the first link on G search engine, so here is what fixed my errors.
Errors:
Notice: The wc_add_to_cart_message filter is deprecated since version 3.0! Use wc_add_to_cart_message_html instead. in /sitepath.com/wp-includes/functions.php on line 4329
Notice: woocommerce_get_page_id is deprecated since version 3.0! Use wc_get_page_id instead. in /sitepath.com/wp-includes/functions.php on line 4329
As you can see the solution is in the problem (error message).
Use wc_add_to_cart_message_html
Use wc_get_page_id instead
As of 2020 this is the filter required: wc_add_to_cart_message has been deprecated. Here I am simply wrapping the message in span:
//New added to card message text
function filter_wc_add_to_cart_message_html( $message, $products ) {
return "<span>".$message."</span>";
};
add_filter( 'wc_add_to_cart_message_html', 'filter_wc_add_to_cart_message_html', 10, 2 );
this could be a solution. please change if you have better ways or ideas:
the filter-name has changed with the 2.1-version to "wc_add_to_cart_message"
add_filter( 'wc_add_to_cart_message', 'foo' );
function foo() {
$product_id = $_REQUEST[ 'product_id' ];
if ( is_array( $product_id ) ) {
$titles = array();
foreach ( $product_id as $id ) {
$titles[] = get_the_title( $id );
}
$added_text = sprintf( __( 'Added "%s" to your cart.', 'woocommerce' ), join( __( '" and "', 'woocommerce' ), array_filter( array_merge( array( join( '", "', array_slice( $titles, 0, -1 ) ) ), array_slice( $titles, -1 ) ) ) ) );
} else {
$added_text = sprintf( __( '"%s" was successfully added to your cart.', 'woocommerce' ), get_the_title( $product_id ) );
}
// Output success messages
if ( get_option( 'woocommerce_cart_redirect_after_add' ) == 'yes' ) :
$return_to = apply_filters( 'woocommerce_continue_shopping_redirect', wp_get_referer() ? wp_get_referer() : home_url() );
$message = sprintf(
'%s → %s',
$return_to, __( 'Continue Shopping', 'woocommerce' ),
$added_text
);
else :
$message = sprintf(
'%s → %s',
get_permalink( wc_get_page_id( 'cart' ) ),
__( 'View Cart', 'woocommerce' ),
$added_text );
endif;
return $message;
}
hope it helps.
cheers
I need to change the link code that is being used for external products for woo commerce.
This is the code that generates the product image:
<?php
/**
* Single Product Image
*
* #author WooThemes
* #package WooCommerce/Templates
* #version 2.0.3
*/
if ( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly
global $post, $woocommerce;
?>
<div class="images">
<?php
if ( has_post_thumbnail() ) {
$image = get_the_post_thumbnail( $post->ID, apply_filters( 'single_product_large_thumbnail_size', 'shop_single' ) );
$image_title = esc_attr( get_the_title( get_post_thumbnail_id() ) );
$image_link = wp_get_attachment_url( get_post_thumbnail_id() );
$attachment_count = count( get_children( array( 'post_parent' => $post->ID, 'post_mime_type' => 'image', 'post_type' => 'attachment' ) ) );
if ( $attachment_count != 1 ) {
$gallery = '[product-gallery]';
} else {
$gallery = '';
}
echo apply_filters( 'woocommerce_single_product_image_html', sprintf( '%s', $image_link, $image_title, $image ), $post->ID );
} else {
echo apply_filters( 'woocommerce_single_product_image_html', sprintf( '<img src="%s" alt="Placeholder" />', woocommerce_placeholder_img_src() ), $post->ID );
}
?>
<?php do_action( 'woocommerce_product_thumbnails' ); ?>
So I just want to change out the image link to the external link url so if someone clicks on the picture, they will go to the external link instead of a blow up of the image
The code to do so is within the add to cart code, but I don't know how to apply it to the image:
<?php
/**
* Loop Add to Cart
*
* #author WooThemes
* #package WooCommerce/Templates
* #version 1.6.4
*/
if ( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly
global $product;
?>
<?php if ( ! $product->is_in_stock() ) : ?>
<?php echo apply_filters( 'out_of_stock_add_to_cart_text', __( 'Read More', 'woocommerce' ) ); ?>
<?php else : ?>
<?php
$link = array(
'url' => '',
'label' => '',
'class' => ''
);
$handler = apply_filters( 'woocommerce_add_to_cart_handler', $product->product_type, $product );
switch ( $handler ) {
case "variable" :
$link['url'] = apply_filters( 'variable_add_to_cart_url', 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;
}
echo apply_filters( 'woocommerce_loop_add_to_cart_link', sprintf('%s', 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 );
?>
Sorry I'm such a nube, but I can't figure out how to get the link code the same as the 'add to cart' link code, thanks for the help!
Why not copy product-image.php to your theme or template (this will overwrite the Woocommerce default) and then change the following:
echo apply_filters( 'woocommerce_single_product_image_html', sprintf( '%s', $image_link, $image_title, $image ), $post->ID );
Where it says
<a href="%s"
Replace %s with your link, or you can register a custom post field and have a different link for each of your products.
You can ignore the "add to cart" code if this is all you are trying to accomplish. I might have misunderstood - so let me know if it's still unclear.