產品照片顯示在結算產品列表上方（Wordpress/WooCommerce）

在我的Wordpress網站上，使用WooCommerce，在結帳頁面上，我看到照片顯示在結帳產品列表上方。我如何讓它們出現在產品列表中，如圖所示？產品照片顯示在結算產品列表上方（Wordpress/WooCommerce）

這是我的時刻：

add_action('woocommerce_checkout_before_order_review', 'displays_cart_products_feature_image'); 
function displays_cart_products_feature_image() { 
    foreach (WC()->cart->get_cart() as $cart_item) { 
     $item = $cart_item['data']; 
     if(!empty($item)){ 
      $product = new WC_product($item->id); 
      // $image = wp_get_attachment_image_src(get_post_thumbnail_id($product->ID), 'single-post-thumbnail'); 
      echo $product->get_image(); 

      // to display only the first product image uncomment the line bellow 
      // break; 
     } 
    } 
}

這與Get Cart products id on checkout WooCommerce page, to display product images。

謝謝！

來源

2017-08-15 Euwing Tham

這取決於...你是如何編碼的呢？ – Reigel

對不起，應該補充一點。它現在在原文中。 –

這是因爲你的鉤子是'woocommerce_checkout_before_order_review'這張表是訂單審覈 – Reigel

相反的woocommerce_checkout_before_order_review，我們可以使用woocommerce_cart_item_name過濾器這樣的：

add_action('woocommerce_cart_item_name', 'displays_cart_products_feature_image', 10, 2); 
function displays_cart_products_feature_image($cart_item_name, $cart_item) { 

    return (is_checkout()) ? $cart_item['data']->get_image() . $cart_item_name : $cart_item_name; 

}

這是什麼會做的是在產品名稱前加上圖像。類似下面這個圖片：

仍然不是我們需要的嗎？是的，但這是我們能夠得到的最接近的東西。而只是一些CSS將解決這個問題。

.woocommerce-checkout-review-order-table .cart_item .product-name img { 
    float: right; 
}

看起來像下面這樣：

來源

2017-08-16 01:25:36 Reigel

工作！ xxx –

太棒了！請不要忘記接受答案。 :) – Reigel

它有點工作，但你可以看看我原來的文章中的最後一個截圖？儘管在custom.css中使用了css代碼，但似乎無法在右側找到它。 –

產品照片顯示在結算產品列表上方（Wordpress/WooCommerce）

回答

相關問題