I would like to display SKU on cart (Under product column ) and checkout page.
I searched SO, but all answers are for old versions of WooCommerce and non of them is for 3.x.
How can I show SKU on cart and checkout pages in Woocommerce 3?
2021 Update
You can do it with a custom unction hooked in woocommerce_cart_item_name action hook, this way:
// Display the sku below cart item name
add_filter( 'woocommerce_cart_item_name', 'display_sku_after_item_name', 5, 3 );
function display_sku_after_item_name( $item_name, $cart_item, $cart_item_key ) {
$product = $cart_item['data']; // The WC_Product Object
if( is_cart() && $product->get_sku() ) {
$item_name .= '<br><span class="item-sku">'. $product->get_sku() . '</span>';
}
return $item_name;
}
// Display the sku below under cart item name in checkout
add_filter( 'woocommerce_checkout_cart_item_quantity', 'display_sku_after_item_qty', 5, 3 );
function display_sku_after_item_qty( $item_quantity, $cart_item, $cart_item_key ) {
$product = $cart_item['data']; // The WC_Product Object
if( $product->get_sku() ) {
$item_quantity .= '<br><span class="item-sku">'. $product->get_sku() . '</span>';
}
return $item_quantity;
}
Code goes in function.php file of your active child theme (or theme) or also in any plugin file.
This code is tested and works on WooCommerce 3+. You will get:
And
Related similar: How to Show SKU with product title in Order received page and Email order
You'll need to do some template overrides.
Cart
Copy plugins/woocommerce/templates/cart/cart.php into your theme file at my_theme/woocommerce/cart/cart.php if it isn't already there. Then add the following at approx line #85
// Meta data
// (this is already in cart.php; look for it for where to place the next snippet)
echo WC()->cart->get_item_data( $cart_item );
// Add SKU below product name
if ( !empty($_product->get_sku()) ) { ?>
<div class="sku">
<small><?php echo "SKU: ". $_product->get_sku(); ?></small>
</div>
<?php }
Checkout
Copy plugins/woocommerce/templates/checkout/review-order.php into your theme file at my_theme/woocommerce/checkout/review-order.php if it isn't already there. Then add the following at approx line #43
<?php
// (this is already in review-order.php; look for it for where to place the next snippet)
echo WC()->cart->get_item_data( $cart_item ); ?>
<?php
// Add SKU below product name
if ( !empty($_product->get_sku()) ) { ?>
<div class="sku">
<small><?php echo "SKU: ". $_product->get_sku(); ?></small>
</div>
<?php } ?>
You can do it with this way:
/**
* #snippet Show SKU # WooCommerce Cart
* #author Khalid Almallahi
*/
add_action( 'woocommerce_after_cart_item_name', 'abukotsh_sku_below_cart_item_name', 11, 2 );
function abukotsh_sku_below_cart_item_name( $cart_item, $cart_item_key ) {
$_product = apply_filters( 'woocommerce_cart_item_product', $cart_item['data'], $cart_item, $cart_item_key );
$sku = $_product->get_sku();
if ( ! $sku ) return;
echo '<p><small>SKU: ' . $sku . '</small></p>';
}
Related
Here is what I have and it works great for 1 shipping class, but want to have separate messages for different shipping classes:
// Display a custom text under cart item name in cart page
add_filter( 'woocommerce_cart_item_name', 'custom_text_cart_item_name', 10, 3 );
function custom_text_cart_item_name( $item_name, $cart_item, $cart_item_key ) {
// Here below define your shipping class slug
$shipping_class = '5-gallon';
if( is_cart() && $cart_item['data']->get_shipping_class() === $shipping_class ) {
$item_name .= '<br /><div class="item-shipping-class">' . __("Please call confirm shipping rates", "woocommerce") . '</div>';
}
return $item_name; }
For multiple shipping classes with different messages you can use the following:
// Display a custom text under cart item name in cart page
add_filter( 'woocommerce_cart_item_name', 'custom_text_cart_item_name', 10, 3 );
function custom_text_cart_item_name( $item_name, $cart_item, $cart_item_key ) {
// Only on cart page
if( ! is_cart() )
return $item_name;
// Here below define your shipping classes slugs (one by line)
$shipping_class_1 = '5-gallon';
$shipping_class_2 = '10-gallon';
$shipping_class = $cart_item['data']->get_shipping_class();
// First shipping class
if( $shipping_class === $shipping_class_1 ) {
$item_name .= '<br /><div class="item-shipping-class">' . __("Please call confirm shipping rates", "woocommerce") . '</div>';
}
// 2nd shipping class
elseif( $shipping_class === $shipping_class_2 ) {
$item_name .= '<br /><div class="item-shipping-class">' . __("Some different message…", "woocommerce") . '</div>';
}
return $item_name;
}
Code goes in functions.php file of the active child theme (or active theme). It should works.
I have found "WooCommerce: Order a “Free Sample” # Single Product Page" on Business Bloomer to create a sample option in the shop for people to order.
Question is: how can I make sure also to copy the thumbnail of item like it does with the name. Something with $thumbnail or get_image etc so its visible in the on the cart page?
/**
* #snippet Add Free Sample to Cart # Single Product
* #how-to Get CustomizeWoo.com FREE
* #author Rodolfo Melogli
* #testedwith WooCommerce 4.0
* #donate $9 https://businessbloomer.com/bloomer-armada/
*/
// -------------------------
// 1. Display Free Sample Add to Cart
// Note: change "111" with Free Sample ID
add_action( 'woocommerce_single_product_summary', 'bbloomer_add_free_sample_add_cart', 35 );
function bbloomer_add_free_sample_add_cart() {
?>
<form class="cart" method="post" enctype='multipart/form-data'>
<button type="submit" name="add-to-cart" value="111" class="single_add_to_cart_button button alt">Order a Free Sample</button>
<input type="hidden" name="free_sample" value="<?php the_ID(); ?>">
</form>
<?php
}
// -------------------------
// 2. Add the custom field to $cart_item
add_filter( 'woocommerce_add_cart_item_data', 'bbloomer_store_free_sample_id', 9999, 2 );
function bbloomer_store_free_sample_id( $cart_item, $product_id ) {
if ( isset( $_POST['free_sample'] ) ) {
$cart_item['free_sample'] = $_POST['free_sample'];
}
return $cart_item;
}
// -------------------------
// 3. Concatenate "Free Sample" with product name (CART & CHECKOUT)
// Note: rename "Free Sample" to your free sample product name
add_filter( 'woocommerce_cart_item_name', 'bbloomer_alter_cart_item_name', 9999, 3 );
function bbloomer_alter_cart_item_name( $product_name, $cart_item, $cart_item_key ) {
if ( $product_name == "Free Sample" ) {
$product = wc_get_product( $cart_item["free_sample"] );
$product_name .= " (" . $product->get_name() . ")";
}
return $product_name;
}
// -------------------------
// 4. Add "Free Sample" product name to order meta
// Note: this will show on thank you page, emails and orders
add_action( 'woocommerce_add_order_item_meta', 'bbloomer_save_posted_field_into_order', 9999, 2 );
function bbloomer_save_posted_field_into_order( $itemID, $values ) {
if ( ! empty( $values['free_sample'] ) ) {
$product = wc_get_product( $values['free_sample'] );
$product_name = $product->get_name();
wc_add_order_item_meta( $itemID, 'Free sample for', $product_name );
}
}
I've tried adding this rule to step 3
$thumbnail = $_product->get_image();
and
add_filter( 'woocommerce_cart_item_thumbnail', 'hostingrumors_voeg_thumbnail_toe', 9999, 2 );
function hostingrumors_voeg_thumbnail_toe( $_product->get_image(), $cart_item, $cart_item_key ) {
if ( $product_name == "Gratis staal" ) {
$product = wc_get_product( $cart_item["gratis_staal"] );
$_product->get_image() .= " (" . $_product->get_image() . ")";
}
return $_product->get_image();
}
But it doesn't add the visited product image page. So I am doing something wrong.
In the cart/cart.php template file on line 67 we find
$thumbnail = apply_filters( 'woocommerce_cart_item_thumbnail', $_product->get_image(), $cart_item, $cart_item_key );
So to replace the product image from the "Free Sample" product on cart page use
// 3.1 Replace "Free Sample" with product image (CART & CHECKOUT)
function filter_woocommerce_cart_item_thumbnail( $product_image, $cart_item, $cart_item_key ) {
// Get name
$item_name = $cart_item['data']->get_name();
if ( $item_name == "Free Sample" ) {
// Get product
$product = wc_get_product( $cart_item["free_sample"] );
// Get image
$new_product_image = $product->get_image();
// Add new image
$product_image = $new_product_image;
}
return $product_image;
}
add_filter( 'woocommerce_cart_item_thumbnail', 'filter_woocommerce_cart_item_thumbnail', 10, 3 );
Note: woocommerce_add_order_item_meta hook is deprecated since WooCommerce 3. Use woocommerce_checkout_create_order_line_item instead
So replace
// 4. Add "Free Sample" product name to order meta
// Note: this will show on thank you page, emails and orders
add_action( 'woocommerce_add_order_item_meta', 'bbloomer_save_posted_field_into_order', 9999, 2 );
function bbloomer_save_posted_field_into_order( $itemID, $values ) {
if ( ! empty( $values['free_sample'] ) ) {
$product = wc_get_product( $values['free_sample'] );
$product_name = $product->get_name();
wc_add_order_item_meta( $itemID, 'Free sample for', $product_name );
}
}
With
// 4. Add "Free Sample" product name to order meta
// Note: this will show on thank you page, emails and orders
function action_woocommerce_checkout_create_order_line_item( $item, $cart_item_key, $values, $order ) {
if ( ! empty( $values['free_sample'] ) ) {
$product = wc_get_product( $values['free_sample'] );
$product_name = $product->get_name();
$item->update_meta_data( __( 'Free sample for', 'woocommerce' ), $product_name );
}
}
add_action('woocommerce_checkout_create_order_line_item', 'action_woocommerce_checkout_create_order_line_item', 10, 4 );
I am using the 2nd code snippet from Add product description to cart items in Woocommerce answer and added it to my function.php file to display the product description in the WooCommerce cart. It works great but within my product description is a shortcode from this plugin https://wordpress.org/plugins/simple-divi-shortcode/ and it does not display in the cart correctly. The shortcode [showmodule id="261"] is displayed instead.
You need simply to embed the product descition in WordPress do_shortcode() function like:
add_filter( 'woocommerce_cart_item_name', 'customizing_cart_item_data', 10, 3);
function customizing_cart_item_data( $item_name, $cart_item, $cart_item_key ) {
// The label
$label = __( 'Description', 'woocommerce' );
// Get the product description
$description = $cart_item['data']->get_description();
// For product variations when description is empty
if( $cart_item['data']->is_type('variation') && empty( $description ) ){
// Get the parent variable product object
$product = wc_get_product( $cart_item['data']->get_parent_id() );
// Get the variable product description
$description = $product->get_description();
}
if( ! empty( $description ) ){
$item_name .= '<p class="item-description" style="margin:12px 0 0;">
<strong>'.$label.'</strong>: <br>' . do_shortcode( $description ) . '
</p>';
}
return $item_name;
}
Code goes in function.php file of your active child theme (or active theme). Tested and works.
Using Woocommerce, I would like to add the SKU instead of the product title in the following pages: Shop page, Cart page and Checkout page.
For example in shop page, I am able to add the SKU above the product title using the code below. However, the problem is that the SKU added doesn't have the link to the single product page.
add_action( 'woocommerce_shop_loop_item_title', 'sku_before_title', 9 );
function sku_before_title() {
global $product;
$sku = $product->get_sku();
echo '<p class="name product-title">Product ' . $sku . '</p>';
}
What is the correct code to have SKU instead of product title and keeping the same link and CSS as the product title?
Code for Shop page and Cart page and Checkout page.
To replace the product title by the sku on WooCommerce archive pages you will use:
// Frontend: On shop and archives pages
add_action( 'woocommerce_shop_loop_item_title', 'sku_replace_title_on_loop', 9 );
function sku_replace_title_on_loop() {
global $product;
// Remove the product title
remove_action( 'woocommerce_shop_loop_item_title', 'woocommerce_template_loop_product_title', 10 );
$sku = $product->get_sku();
// Replace the title by the Sku if is not empty
$title = empty($sku) ? get_the_title() : $sku;
// Output
echo '<h2 class="' . esc_attr( apply_filters( 'woocommerce_product_loop_title_classes', 'woocommerce-loop-product__title' ) ) . '">' . $title . '</h2>';
}
For cart and checkout pages, you will use:
// Frontend: on cart, minicart and checkout
add_filter( 'woocommerce_cart_item_name', 'sku_replace_title_on_cart_checkout', 10, 3 );
function sku_replace_title_on_cart_checkout( $item_name, $cart_item, $cart_item_key ) {
if( $sku = $cart_item['data']->get_sku() ) {
if( is_cart() ) {
$item_name = sprintf( '%s', esc_url( $cart_item['data']->get_permalink( $cart_item ) ), $sku );
} else {
$item_name = $sku;
}
}
return $item_name;
}
Code goes in function.php file of your active child theme (or active theme). Tested and works.
I'm trying to display my product variation description in my Cart. I have tried inserting this code in the cart.php template:
if ( $_product->is_type( 'variation' ) ) {echo $_product->get_variation_description();}
By following this documentation https://docs.woocommerce.com/document/template-structure/
But it's still not showing up.
Not sure what I'm doing wrong here.
Can anyone help on this?
Updated for WooCommerce version 3 and above
Since WooCommerce 3, get_variation_description() is now deprecated and replaced by get_description() WC_Product method.
To get your product item variation description (filtering variation product type condition), you can use the following hooked function instead:
// Cart page (and mini cart)
add_filter( 'woocommerce_cart_item_name', 'cart_item_product_description', 20, 3);
function cart_item_product_description( $item_name, $cart_item, $cart_item_key ) {
if ( ! is_checkout() ) {
if( $cart_item['variation_id'] > 0 ) {
$description = $cart_item['data']->get_description(); // variation description
} else {
$description = $cart_item['data']->get_short_description(); // product short description (for others)
}
if ( ! empty($description) ) {
return $item_name . '<br><div class="description">
<strong>' . __( 'Description', 'woocommerce' ) . '</strong>: '. $description . '
</div>';
}
}
return $item_name;
}
// Checkout page
add_filter( 'woocommerce_checkout_cart_item_quantity', 'cart_item_checkout_product_description', 20, 3);
function cart_item_checkout_product_description( $item_quantity, $cart_item, $cart_item_key ) {
if( $cart_item['variation_id'] > 0 ) {
$description = $cart_item['data']->get_description(); // variation description
} else {
$description = $cart_item['data']->get_short_description(); // product short description (for others)
}
if ( ! empty($description) ) {
return $item_quantity . '<br><div class="description">
<strong>' . __( 'Description', 'woocommerce' ) . '</strong>: '. $description . '
</div>';
}
return $item_quantity;
}
Now the description is just displayed between the title and the variation attributes values (if there is any).
Code goes in functions.php file of the active child theme (or active theme). Tested and works.
This will work for WC 3.0
add_filter( 'woocommerce_cart_item_name', 'cart_variation_description', 20, 3);
function cart_variation_description( $title, $cart_item, $cart_item_key ) {
$item = $cart_item['data'];
if(!empty($item) && $item->is_type( 'variation' ) ) {
return $item->get_name();
} else
return $title;
}
You can get it via global variable $woocommerce also-
global $woocommerce;
$cart_data = $woocommerce->cart->get_cart();
foreach ($cart_data as $value) {
$_product = $value['data'];
if( $_product->is_type( 'variation' ) ){
echo $_product->id . '<br>';
}
}
I already check it.