ストアフロントチェックアウトページをカスタマイズする方法

公開: 2020-10-29

ストアフロントのカスタマイズチェックアウトページオンラインストアでのチェックアウトプロセスは、購入者の旅の中で最も重要です。これは、買い物客に購入を説得する最後のチャンスだからです。さらに、ユーザーが最後のステップで気が変わったときに、多くのショッピングカートが放棄されることは言及する価値があります。

ストアフロントのカスタマイズチェックアウトページ

送料や支払いオプションなどの要因が、カートの放棄の主な原因です。ただし、チェックアウトページも大きな役割を果たします。チェックアウトフォームが複雑すぎるか、記入に時間がかかる場合、顧客は他の場所でそれを購入する可能性があります。さらに、機密情報を要求しているチェックアウトフィールドを削除することをお勧めします。

チェックアウトフォームを最適化する最良の方法は、必須のフィールドを用意することです。それらはあなたのビジネスニーズとターゲットオーディエンスに基づいている必要があります。

この投稿では、ターゲットオーディエンスとビジネスニーズに合わせてチェックアウトページをカスタマイズする方法について説明します。

チェックアウトフィールドのカスタマイズ

チェックアウトページでは、顧客に次のことを求めます。

支払明細
ファーストネーム
苗字
会社名
国
住所
町/市
区域
郵便番号/郵便番号
電話
電子メールアドレス
注文メモ

チェックアウトフィールドをカスタマイズする最良の方法は、コードスニペットを使用することです。すべてのクラスとセレクターを表示するには、Webサイトでブラウザーのインスペクターを使用して、カスタマイズする正確な要素を見つけます。

 <body class = "woocommerce-checkout">

<div class = "woocommerce">

<form class = "woocommerce-checkout">

<div id = "customer_details" class = "col2-set">

<div class = "woocommerce-billing-fields">

<p class = "form-row">

<div class = "woocommerce-shipping-fields">

<p class = "form-row">

<div class = "woocommerce-additional-fields">

<div id = "order_review" class = "woocommerce-checkout-review-order">

<table class = "woocommerce-checkout-review-order-table">

<div id = "payment">

<ul class = "wc_payment_methodspayment_methodsmethods">

<div class = "form-row place-order">

テキスト入力ボックスの背景色とレイアウトを変更し、角を丸くする手順

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

WordPressサイトにログインし、管理者ユーザーとしてダッシュボードにアクセスします。
[ダッシュボード]メニューから、[外観メニュー]> [カスタマイズ]をクリックします。
表示される左側のサイドバーで[追加のCSS ]に移動します。
CSSを追加します

input [type = "text"] {

border-radius：10px！important;

背景色：アクア！重要;

}

これが結果です：
フィールドのレイアウトを変更するには、次のCSSコードを追加します。

 /****************チェックアウト***************/

.woocommerce form .form-row {

幅：100％！重要;

}

.woocommerce-checkout #payment div.payment_box input.input-text、.woocommerce-checkout #payment div.payment_box textarea {

幅：100％！重要;

パディング：8px;

}

.woocommerce #payment .form-row select、.woocommerce-page #payment .form-row select {

幅：100％;

高さ：30px;

}

.woocommerce .col2-set .col-1、.woocommerce-page .col2-set .col-1、.woocommerce .col2-set .col-2、.woocommerce-page .col2-set .col-2 {

フロート：左;

幅：100％;

}

.custom-checkout h3 {

背景色：＃165f1c; / ****タイトルの背景に使用したい色に変更**** /

幅：45％;

text-align：center;

パディング：10px;

border-radius：5px;

マージントップ：50px;

色：#FFF;

フロート：右;

}

.woocommerce form .form-row input.input-text、.woocommerce form .form-row textarea {

パディング：.6180469716em;

背景色：＃f2f2f2;

色：＃43454b;

アウトライン：0;

ボーダー：0;

-webkit-外観：なし;

border-radius：2px;

ボックスサイズ：border-box;

フォントの太さ：400;

border：solid 2px＃e4e4e4;

}

#wc_checkout_add_ons {

幅：45％;

フロート：右;

text-align：center;

}

@media screen and（min-width：980px）{

.woocommerce-shipping-fields h3、.woocommerce-billing-fields h3 {width：100％;}

.woocommerce .col2-set、.woocommerce-page .col2-set {

幅：45％;

フロート：左;

}

.woocommerce-checkout-review-order {

幅：45％;

フロート：右;

}

}

@media screen and（max-width：979px）{

.custom-checkout h3 {

幅：100％;

}

}

これが結果です：

チェックアウトフィールドを削除する手順

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

WordPressサイトにログインし、管理者ユーザーとしてダッシュボードにアクセスします。
[ダッシュボード]メニューから、[外観メニュー]> [テーマエディターメニュー]をクリックします。テーマエディタページが開いたら、テーマ関数ファイルを探してチェックアウトフィールドを削除します。
次のコードをphpファイルに追加します。ただし、コード全体を貼り付けると、チェックアウトページからすべてのフィールドが削除されるため、削除するフィールドのみを含めるようにしてください。

 / **

可能なすべてのフィールドを削除します

** /

関数wc_remove_checkout_fields（$ fields）{

//請求フィールド

unset（$ fields ['billing'] ['billing_company']）;

unset（$ fields ['billing'] ['billing_email']）;

unset（$ fields ['billing'] ['billing_phone']）;

unset（$ fields ['billing'] ['billing_state']）;

unset（$ fields ['billing'] ['billing_first_name']）;

unset（$ fields ['billing'] ['billing_last_name']）;

unset（$ fields ['billing'] ['billing_address_1']）;

unset（$ fields ['billing'] ['billing_address_2']）;

unset（$ fields ['billing'] ['billing_city']）;

unset（$ fields ['billing'] ['billing_postcode']）;
//配送フィールド

unset（$ fields ['shipping'] ['shipping_company']）;

unset（$ fields ['shipping'] ['shipping_phone']）;

unset（$ fields ['shipping'] ['shipping_state']）;

unset（$ fields ['shipping'] ['shipping_first_name']）;

unset（$ fields ['shipping'] ['shipping_last_name']）;

unset（$ fields ['shipping'] ['shipping_address_1']）;

unset（$ fields ['shipping'] ['shipping_address_2']）;

unset（$ fields ['shipping'] ['shipping_city']）;

unset（$ fields ['shipping'] ['shipping_postcode']）;

//フィールドを注文します

unset（$ fields ['order'] ['order_comments']）;

$ fieldsを返します。

}

add_filter（ 'woocommerce_checkout_fields'、 'wc_remove_checkout_fields'）;

国フィールドが必須であることは言及する価値があります。このフィールドを削除すると、顧客の注文を完了できなくなります。これは、「続行するにはアドレスを入力してください」というエラーが表示されるためです。

必須フィールドを不要にする手順

この例では、BillingPhoneフィールドを編集します。従う必要のある手順は次のとおりです。

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

add_filter（ 'woocommerce_billing_fields'、 'wc_unrequire_wc_phone_field'）;

function wc_unrequire_wc_phone_field（$ fields）{

$ fields ['billing_phone'] ['required'] = false;

$ fieldsを返します。

}

これが結果です：

入力フィールドのラベルとプレースホルダーを変更する手順

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

WordPressサイトにログインし、管理者ユーザーとしてダッシュボードにアクセスします。
[ダッシュボード]メニューから、[外観メニュー]> [テーマエディターメニュー]をクリックします。テーマエディタページが開いたら、テーマ関数ファイルを探して、入力フィールドのラベルとプレースホルダーを変更します。
次のコードをphpファイルに追加します

add_filter（ 'woocommerce_checkout_fields'、 'custom_override_checkout_fields'）;

関数custom_override_checkout_fields（$ fields）

{{

unset（$ fields ['billing'] ['billing_address_2']）;

$ fields ['billing'] ['billing_company'] ['placeholder'] = '会社名';

$ fields ['billing'] ['billing_company'] ['label'] = '会社名';

$ fields ['billing'] ['billing_first_name'] ['placeholder'] = '名';

$ fields ['shipping'] ['shipping_first_name'] ['placeholder'] = '名';

$ fields ['shipping'] ['shipping_last_name'] ['placeholder'] = '姓';

$ fields ['shipping'] ['shipping_company'] ['placeholder'] = '会社名';

$ fields ['billing'] ['billing_last_name'] ['placeholder'] = '姓';

$ fields ['billing'] ['billing_email'] ['placeholder'] = 'メールアドレス';

$ fields ['billing'] ['billing_phone'] ['placeholder'] = '電話';

$ fieldsを返します。

}

これが結果になります：

結論

要約すると、チェックアウトページのチェックアウトフィールドをカスタマイズする方法を共有しました。このページを最適化することは重要です。買い物客に購入を説得する最後のチャンスだからです。

さらに、ビジネスニーズとターゲットオーディエンスに基づいて必要な情報を収集する必要があります。これにより、カートの放棄を減らし、店舗での売り上げを大幅に向上させることができます。

ただし、私が共有したコードスニペットを変更できない場合は、サイトを壊さないように開発者を雇ってください。

同様の記事

WooCommerceチェックアウトフォームにフィールドを追加する方法
検索結果からWooCommerce製品を非表示にする方法
WooCommerceでデジタル製品を販売する方法
WooCommerceの製品にGTIN番号を追加する方法
WooCommerceでカスタムオーダーステータスを追加する方法
WooCommerce製品ページから数量フィールドを非表示または削除する
カテゴリWooCommerceストアフロントテーマを非表示にする方法
特定のカテゴリの支払い方法を無効にする方法
ストアフロントのWooCommerceからモバイルフッターを非表示にする方法
ボタンの色の店先のテーマを変更する方法
行ごとのストアフロント商品数を変更する方法
WooCommerceストアフロントで次の商品タブをオフにする方法
関連商品を削除する方法WooCommerceストアフロントテーマ
ログアウトボタンを作成するためのWooCommerceログアウトPHPスニペット
ページごとに商品を変更する方法WooCommerceストアフロントテーマ
フッターにWooCommerce支払いアイコンを追加する方法[HTML]
ストアフロントのテーマヘッダーからカートを削除する方法
商品のストアフロントテーマの順序を変更する方法
フォントサイズを変更する方法WooCommerceストアフロントのテーマ
WooCommerceで注文ステータスメッセージの名前を変更する方法