如何添加產品圖片 WooCommerce 結帳頁面

已發表: 2022-01-08

添加產品圖片結帳 WooCommerce 如果您熟悉 WooCommerce，那麼您就知道開設在線商店是一個不錯的選擇。 與其他在線商店平台相比，購物車功能脫穎而出。 但是，它缺少一些幾乎所有其他電子商務軟件中開箱即用的基本功能，例如結帳頁面上的產品圖片。

如果您查看結帳頁面，您將看到訂單審核表顯示產品名稱、庫存和價格，但不顯示每個產品的圖像。 如果您是 WooCommerce 店主，您必須知道默認結帳頁面並沒有那麼優化。

優化 WooCommerce Checkout 客戶體驗

因此，這意味著 WooCommerce 結帳頁面需要大量自定義，以使其對轉換更加友好並增加您的轉換。

如果您在 WooCommerce 結賬時自定義客戶用戶體驗，您可能還想查看這篇關於如何在結賬後創建 WooCommerce 重定向的文章，並可能使用此插件——WooCommerce 結賬後重定向插件以增強客戶結賬體驗。

默認 WooCommerce 結帳頁面

這是結帳頁面的默認外觀： 訂單詳情的默認外觀

這就是我進來的地方； 我會給你一個專家的解決方案，這將幫助你提高結帳頁面的轉化率。

這個簡短的教程將向您展示如何在不覆蓋模板的情況下在結帳頁面上添加產品圖片。 一些解決方案可以幫助您覆蓋模板，但這可能會與主題產生衝突。 使用過濾器可以輕鬆完成。

在 WooCommerce 商店的結帳頁面上添加產品圖片的步驟。

以下是您需要遵循的步驟：

  1. 登錄您的 WordPress 站點並以管理員用戶身份訪問儀表板。
  2. 從儀表板菜單中，單擊外觀菜單 > 主題編輯器菜單。 當主題編輯器頁面打開時，查找主題函數文件，我們將在其中添加將在結帳頁面顯示產品圖像的函數。
  3. 將以下代碼添加到php文件中：
 /**
 * @snippet WooCommerce 顯示產品圖片@結帳頁面
*/

add_filter('woocommerce_cart_item_name', 'ts_product_image_on_checkout', 10, 3);

功能 ts_product_image_on_checkout( $name, $cart_item, $cart_item_key ) {  

    /* 如果不是結帳頁面則返回 */
    如果（！is_checkout（））{
        返回$名稱；
    }

    /* 獲取產品對象 */
    $_product = apply_filters('woocommerce_cart_item_product', $cart_item['data'], $cart_item, $cart_item_key);

    /* 獲取產品縮略圖 */
    $thumbnail = $_product->get_image();

    /* 將包裝器添加到圖像並添加一些 css */
    $image = '<div class="ts-product-image" style="width: 52px; height: 45px; display: inline-block; padding-right: 7px; vertical-align: middle;">'
                . $縮略圖。
            '</div>';

    /* 將圖像添加到名稱並返回它 */
    返回 $image 。 $名稱;

}
  1. 要查看此代碼的結果，您需要刷新結帳頁面，您應該會看到： 結果

您現在應該能夠看到如上所示的所有產品圖片。

此外，您可以選擇在用戶下訂單後將圖像添加到訂單支付頁面。 這是訂單支付頁面的默認設置： 默認訂單支付頁面添加產品圖片 WooCommerce 結帳頁面

這可以用來優化頁面，用戶可以看到他們購買的商品的圖片，除了簡短的描述。 執行此操作非常簡單，您只需按照以下步驟操作即可。

在 WooCommerce 商店的訂單支付頁面上添加產品圖片的步驟。

  1. 登錄您的 WordPress 站點並以管理員用戶身份訪問儀表板。
  2. 從儀表板菜單中，單擊外觀菜單 > 主題編輯器菜單。 當主題編輯器頁面打開時，查找主題函數文件，我們將在其中添加將在訂單支付頁面顯示產品圖像的函數。
  3. 將以下代碼添加到php文件中：
 /**
* @snippet WooCommerce 顯示產品圖片@訂單支付頁面
*/

add_filter('woocommerce_order_item_name', 'ts_product_image_on_order_pay', 10, 3);

功能 ts_product_image_on_order_pay( $name, $item, $extra ) {

/* 如果不是結帳頁面則返回 */

如果（！is_checkout（））{

返回$名稱；

}

$product_id = $item->get_product_id();

/* 獲取產品對象 */

$_product = wc_get_product($product_id);

/* 獲取產品縮略圖 */

$thumbnail = $_product->get_image();

/* 將包裝器添加到圖像並添加一些 css */

$image = '<div class="ts-product-image" style="width: 52px; height: 45px; display: inline-block; padding-right: 7px; vertical-align: middle;">'

. $縮略圖。

'</div>';

/* 將圖像添加到名稱並返回它 */

返回 $image 。 $名稱;

}
  1. 要查看此代碼的結果，您需要刷新 Order Pay 頁面，您應該會看到： 為訂單支付頁面添加產品圖片 WooCommerce 結帳頁面結果

結論

在這篇文章中，我強調了兩個可以添加產品圖片的區域，即訂單支付頁面和結帳頁面。 我不建議覆蓋主題，因為這會與主題產生衝突。 建議使用過濾器來執行此操作，如上面的簡單步驟所示。

類似文章

  1. 用於結帳頁面定制的 23 個最佳 WooCommerce 插件
  2. 如何在 WooCommerce 中設置特色產品
  3. 如何添加自定義 WooCommerce 付款圖標結帳頁面
  4. 如何按類別顯示 WooCommerce 產品
  5. 如何在 WooCommerce 結帳頁面上更改 PayPal 圖標
  6. 如何刪除已添加到您的購物車消息 WooCommerce
  7. WooCommerce 結帳後重定向：結帳後如何自動重定向到自定義頁面
  8. 如何刪除默認產品排序 WooCommerce
  9. 如何調整 WooCommerce 產品圖像的大小
  10. 如何在 WooCommerce 中的產品上添加 GTIN 編號
  11. 如何在 WooCommerce 的商店頁面中隱藏所有產品
  12. 如何對 WooCommerce 類別進行排序以獲得更好的用戶體驗
  13. 如何使用 WooCommerce 銷售數字產品
  14. 如何隱藏 WooCommerce 優惠券代碼字段
  15. 如何在 WooCommerce 結帳頁面上隱藏 PayPal 圖標
  16. 如何從 WooCommerce 結帳中刪除帳單詳細信息
  17. 如何跳過購物車並重定向到結帳頁面 WooCommerce
  18. 如何在 WooCommerce 中更改結帳按鈕文本 [下訂單]
  19. 如何檢查插件在 WordPress 中是否處於活動狀態 [3 種方式]
  20. 如何將刪除圖標添加到 WooCommerce 結帳頁面