在 WooCommerce 的购物车页面上设置图像缩略图以订购“免费样品”

Question

我在 Business Bloomer 上找到了“WooCommerce: Order a “Free Sample” @ Single Product Page”，以便在商店中创建一个示例选项供人们订购。

问题是：如何确保也复制项目的缩略图，就像使用名称一样。带有$thumbnail 或get_image 等的东西可以在购物车页面上看到吗？

/**
 * @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 );
    }
}

---

我已尝试将此规则添加到第 3 步

$thumbnail = $_product->get_image();

和

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();
}

但它不会添加访问过的产品图片页面。所以我做错了。

Answer 1

在67 行的cart/cart.php 模板文件中我们找到

$thumbnail = apply_filters( 'woocommerce_cart_item_thumbnail', $_product->get_image(), $cart_item, $cart_item_key );

所以要替换购物车页面上“免费样品”产品中的产品图片使用

// 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 );

---

注意：woocommerce_add_order_item_meta 钩子是 deprecated，因为 WooCommerce 3. 请改用 woocommerce_checkout_create_order_line_item

所以替换

// 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 );
    }
}

有

// 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 );