商品画像を追加する方法WooCommerceチェックアウトページ

公開: 2022-01-08

商品画像のチェックアウトを追加WooCommerce WooCommerceに精通している場合は、オンラインストアを開始するのに最適なオプションであることをご存知でしょう。ショッピングカート機能は、他のオンラインストアプラットフォームと比較して際立っています。ただし、他のほとんどのeコマースソフトウェアに含まれている非常に基本的な機能、たとえばチェックアウトページの製品画像が欠けています。

チェックアウトページを表示すると、注文レビューテーブルに商品のタイトル、在庫、価格が表示されますが、各商品の画像は表示されません。 WooCommerceストアの所有者の場合、デフォルトのチェックアウトページはそれほど最適化されていないことを知っておく必要があります。

WooCommerceCheckoutのカスタマーエクスペリエンスを最適化する

したがって、これは、WooCommerceチェックアウトページをより変換しやすくし、変換を増やすために多くのカスタマイズが必要であることを意味します。

WooCommerceチェックアウトで顧客のユーザーエクスペリエンスをカスタマイズしている場合は、チェックアウト後にWooCommerceリダイレクトを作成する方法についてこの記事をチェックアウトし、このプラグインを使用することもできます–チェックアウトプラグイン後にWooCommerceリダイレクトを使用して、顧客チェックアウトエクスペリエンスを強化します。

デフォルトのWooCommerceチェックアウトページ

これは、チェックアウトページのデフォルトの外観です。注文詳細のデフォルトの外観

これが私の出番です。チェックアウトページのコンバージョンを増やすのに役立つ専門的なソリューションを提供します。

この簡単なチュートリアルでは、テンプレートを上書きせずにチェックアウトページに商品画像を追加する方法を説明します。一部のソリューションはテンプレートをオーバーライドするのに役立ちますが、これによりテーマとの競合が発生する可能性があります。フィルタを使用して簡単に行うことができます。

WooCommerceストアのチェックアウトページに商品画像を追加する手順。

従う必要のある手順は次のとおりです。

WordPressサイトにログインし、管理者ユーザーとしてダッシュボードにアクセスします。
[ダッシュボード]メニューから、[外観メニュー]> [テーマエディターメニュー]をクリックします。テーマエディタページが開いたら、チェックアウトページで製品画像を表示する関数を追加するテーマ関数ファイルを探します。
次のコードをphpファイルに追加します。

 / **
 * @snippet WooCommerce Show Product Image @ Checkout Page
* /

add_filter（ 'woocommerce_cart_item_name'、 'ts_product_image_on_checkout'、10、3）;

function ts_product_image_on_checkout（$ name、$ cart_item、$ cart_item_key）{  

    / *チェックアウトページでない場合は戻る* /
    if（！is_checkout（））{
        $ nameを返します。
    }

    / *製品オブジェクトを取得します* /
    $ _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;">'
                。 $ thumbnail。
            '</ div>';

    / *画像の前に名前を付けて返します* /
    $ imageを返します。 $ name;

}

このコードの結果を確認するには、チェックアウトページを更新する必要があり、次のように表示されます。

これで、上記のようにすべての商品画像が表示されるはずです。

さらに、ユーザーが注文した後、注文支払いページに画像を追加することを選択できます。これは、注文支払いページのデフォルトです。注文支払いページのデフォルト製品画像の追加WooCommerceチェックアウトページ

これはページを最適化するために行うことができ、ユーザーは簡単な説明に加えて、購入したものの画像を見ることができます。これを行うのは非常に簡単で、これらの手順に従うだけです。

WooCommerceストアの注文支払いページに商品画像を追加する手順。

WordPressサイトにログインし、管理者ユーザーとしてダッシュボードにアクセスします。
[ダッシュボード]メニューから、[外観メニュー]> [テーマエディターメニュー]をクリックします。テーマエディタページが開いたら、注文支払いページで製品画像を表示する関数を追加するテーマ関数ファイルを探します。
次のコードをphpファイルに追加します。

 / **
* @snippet WooCommerce Show Product Image @ Order-Pay Page
* /

add_filter（ 'woocommerce_order_item_name'、 'ts_product_image_on_order_pay'、10、3）;

function ts_product_image_on_order_pay（$ name、$ item、$ extra）{

/ *チェックアウトページでない場合は戻る* /

if（！is_checkout（））{

$ nameを返します。

}

$ 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;">'

。 $ thumbnail。

'</ div>';

/ *画像の前に名前を付けて返します* /

$ imageを返します。 $ name;

}

このコードの結果を確認するには、[注文支払い]ページを更新する必要があり、次のように表示されます。

結論

この投稿では、商品画像を追加できる2つの領域、つまり[注文支払い]ページと[チェックアウト]ページを強調しました。テーマとの競合が発生する可能性があるため、テーマをオーバーライドすることはお勧めしません。上記の簡単な手順に示すように、これを行うにはフィルターを使用することをお勧めします。

同様の記事

チェックアウトページのカスタマイズに最適な23のWooCommerceプラグイン
WooCommerceで注目の商品を設定する方法
カスタムWooCommerce支払いアイコンのチェックアウトページを追加する方法
WooCommerce製品をカテゴリ別に表示する方法
WooCommerceチェックアウトページでPayPalアイコンを変更する方法
削除する方法がカートに追加されましたメッセージWooCommerce
チェックアウト後のWooCommerceリダイレクト：チェックアウト後にカスタムページに自動的にリダイレクトする方法
デフォルトの商品並べ替えWooCommerceを削除する方法
WooCommerceの商品画像のサイズを変更する方法
WooCommerceの製品にGTIN番号を追加する方法
WooCommerceのショップページからすべての商品を非表示にする方法
ユーザーエクスペリエンスを向上させるためにWooCommerceカテゴリを並べ替える方法
WooCommerceでデジタル製品を販売する方法
WooCommerceクーポンコードフィールドを非表示にする方法
WooCommerceチェックアウトページでPayPalアイコンを非表示にする方法
WooCommerceCheckoutから請求の詳細を削除する方法
カートをスキップしてチェックアウトページにリダイレクトする方法WooCommerce
WooCommerceでチェックアウトボタンのテキストを変更する方法[注文する]
プラグインがWordPressでアクティブかどうかを確認する方法[3つの方法]
WooCommerceチェックアウトページに削除アイコンを追加する方法