ダミー

【WooCommerce】と【LINE Pay】の連動

WordPressでECサイトが作れる無料プラグインWooCommerceでは、さまざまな決済方法が使えます。今回はLINE Payとの連動方法をご紹介します。
当記事の環境:WordPress バージョン 5.3.2、WooCommerceバージョン 4.0.1、Japanized for WooCommerce バージョン 2.2.1

WooCommerceの設定

WordPressの管理者画面の左メニューから WooCommerce > 設定 で、決済タブを選択します。
決済方法LINE Payの右にある「セットアップ」をクリックします。2回目以降はボタン名が[管理]になっています。Japanized for WooCommerceをインストールしていたらLINE Payがありますが、もっと下の方にあるかもしれません。

Woocommerce-設定

API 環境設定

「API Environment setting」に必要事項を入力します。Channel IdとChannel Secret Keyの取得方法はこちらです。
【LINE Pay】Channel IdとChannel Secret Keyはどこにある?

API

LINE Pay プライバシーポリシー通知

こちらのページのフォームから「LINE Pay プライバシーポリシー通知」をします。
https://wc.artws.info/linepay-pp-apply/

設定反映までに5営業日ほどかかります。完了したらメールが届きます。

ECサイトには多くの決済方法が準備されていると使いやすいです。特に、クレジットカードを持っていない10代のお客様がターゲットの場合、LINE Payは有効な決済方法となるでしょう。
LINEに加盟店申請をして審査が完了したら、さっそくECサイトとLINE Payを連動させて使えるように設定します。設定するにはChannel IDとChannel Secret Keyというものが必要らしいです。「Channel IDとChannel Secret Keyは、加盟店登録プロセスを完了すると加盟店センターに表示されます。」という記事を見かけますが・・・加盟店センターのどこにあるの?

1.加盟店My page(加盟店センター)にログイン

ログイン画面はこちらです
https://pay.line.me/portal/jp/auth/login

LINE Pay 加盟店ログイン

加盟店IDとパスワードはLINEから届いたメールに記載されています。

2.サーバーのIPアドレスを登録

左メニューの 決済連動管理 > 決済サーバーIP管理 を選択し、LINE Pay決済サーバーと通信するサーバー(通常はお店サイトのサーバー)のIPアドレスを入力し、[登録]をクリックします。これは万一支払連動情報の盗難時に不正な取引をブロックするためです。
IPアドレスは「.」(ピリオド)で区切られた4組の数字です。MASK値がわからなければ空白のままで登録します。IPアドレスがわからない場合は、サーバー管理者やサーバー会社に問い合わせてください。

IPアドレスの登録

3.Channel IDとChannel Secret Keyの確認

左メニューの 決済連動管理 > 連動キー管理を選択します。
ここでまた以下のようにパスワード入力ボックスが出てきますので、上記1.の加盟店My pageのパスワードを再び入力します。既にログイン中なのに・・・Channel IDとChannel Secret Keyって厳重に守られてるのですね!

パスワード入力

パスワードを入力して[確認]をクリックすると、やっとChannel IDとChannel Secret Keyを見ることができます。
Channel ID=10桁の数字、Channel Secret Key=32桁の英数字です。

channel id

参照サイト

当記事では以下のサイト参照いたしました。制作者に感謝いたします。
環境設定の取得フロー – LINE Pay 決済

当記事ではWordPressでECサイトが作れる無料プラグインWooCommerceの購入手続き画面(お支払い画面)で、「登録済みの方はこちら ログインはこちらから」の「ログインはこちらから」をクリックしても何も起こらない。
同様に「クーポンをお持ちですか?コード入力はこちらから」の「コード入力はこちらから」をクリックしても何も起こらないときの対処法をご紹介します。

お支払い画面

当記事の環境:WordPress バージョン 5.3.2、WooCommerceバージョン 4.0.1

購入手続き画面(お支払い画面)でログイン

購入手続き画面ではいろいろな情報を入力する必要がありますが、登録済みのマイアカウントにログインすると登録済みの情報が自動入力されて便利です。購入手続き画面でログインできます。

まず
/wp-content/plugins/woocommerce/templates/checkout/form-login.php
を以下にコピーします。
/wp-content/themes/お使いのテーマ/woocommerce/checkout/form-login.php

次にコピーしたform-login.phpを開きa href=”#”となっている箇所を探します。以下のようなコードがみつかるでしょう。

	<?php wc_print_notice( apply_filters( 'woocommerce_checkout_login_message', esc_html__( 'Returning customer?', 'woocommerce' ) ) . ' <a href="#" class="showlogin">' . esc_html__( 'Click here to login', 'woocommerce' ) . '</a>', 'notice' ); ?>

# をあなたのサイトのマイアカウントのページに書き変えます。
例えばマイアカウントが/shop/my-account/であれば以下のようになります。

	<?php wc_print_notice( apply_filters( 'woocommerce_checkout_login_message', esc_html__( 'Returning customer?', 'woocommerce' ) ) . ' <a href="/shop/my-account/" class="showlogin">' . esc_html__( 'Click here to login', 'woocommerce' ) . '</a>', 'notice' ); ?>

保存してサーバーにアップすると、「ログインはこちらから」をクリックしたとき以下のようにログイン情報を入力するエリアが表示されます。

ログイン

クーポンコードを利用するためには

  1. WooCommerce > クーポン でクーポンを作成する。
  2. WooCommerce > 設定 > 一般 で「クーポンコードの使用を有効化」にチェックを入れる。

以上で準備ができました。
購入するときカート画面の商品の下にクーポンコードの入力エリアが表示されます。

クーポンコード入力

購入手続き画面(お支払い画面)でクーポンコード入力

以上ご紹介したように、カート画面でクーポンコードが入力できますが、入力せずに購入手続き画面まで進んでしまっても、購入手続き画面でクーポンコードが入力できます。

まず
/wp-content/plugins/woocommerce/templates/checkout/form-coupon.php
を以下にコピーします。
/wp-content/themes/お使いのテーマ/woocommerce/checkout/form-coupon.php

次にコピーしたform-coupon.phpを開きa href=”#”となっている箇所を探します。以下のようなコードがみつかるでしょう。

	<?php wc_print_notice( apply_filters( 'woocommerce_checkout_coupon_message', esc_html__( 'Have a coupon?', 'woocommerce' ) . ' <a href="#" class="showcoupon">' . esc_html__( 'Click here to enter your code', 'woocommerce' ) . '</a>' ), 'notice' ); ?>

# をあなたのサイトのカートのページに書き変えます。
例えばカートが/shop/cart/であれば以下のようになります。

	<?php wc_print_notice( apply_filters( 'woocommerce_checkout_coupon_message', esc_html__( 'Have a coupon?', 'woocommerce' ) . ' <a href="/shop/cart/" class="showcoupon">' . esc_html__( 'Click here to enter your code', 'woocommerce' ) . '</a>' ), 'notice' ); ?>

保存してサーバーにアップすると、「コード入力はこちらから」をクリックしたとき以下のようにクーポンコードを入力するエリアが表示されます。

クーポンコード

注意事項

form-login.php、form-coupon.php は深い階層にあります。コピー元とコピー先、どちらのファイルを編集するか、アップロードする場所、などを間違えないようにご注意ください。

WordPressでECサイトが作れる無料プラグインWooCommerce。子テーマを自作したり、既存のテーマをWooCommerceに適用させる方も増えているようです。当記事ではWooCommerceの商品ページやカテゴリ一覧ページがどのテンプレートを参照するかについて解説します。

当記事の環境:WordPress バージョン 5.3.2、WooCommerceバージョン 4.0.1

WooCommerce対応テーマの作り方

WooCommerce対応テーマを自作する、または既存テーマをWooCommerce対応にする方法はWooCommerce公式のドキュメントで説明されています。
Third party / custom / non-WC theme compatibility(英語)
日本語でも多くの方が記事を書いてくださっています。「Woocommerce 自作テーマ」で検索すると日本語の記事がたくさんヒットします。
そこで紹介されている方法は大体以下のような手順です。

  1. page.phpをコピーしてwoocommerce.phpというテンプレートを作る
  2. woocommerce.phpを開き以下の記述を削除し、
    <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
    
    <?php endwhile; endif; ?>
    

    以下の1行を挿入する。

    <?php woocommerce_content(); ?>
    
  3. WooCommerceサポートを宣言する。
    具体的にはfunctions.phpに以下のコードを追加する。(add_actionとfunctionの上下が逆の場合もあります。)
    add_action( 'after_setup_theme', 'woocommerce_support' );
    function woocommerce_support() {
        add_theme_support( 'woocommerce' );
    }
    
  4. woocommerce.phpとfunctions.phpをテーマディレクトリにアップロードする。

以上で、あなたのテーマがWooCommerceのテーマになりました。

WooCommerceサポート宣言の確認方法

WooCommerceサポート宣言とは「このテーマはWooCommerceをサポートしています」という宣言です。管理画面の WooCommerce > ステータス から確認できます。ステータス画面のかなり下の方に「テーマ」という項目があります。
WooCommerceステータス

もし、現在のテーマがWooCommerceサポート宣言されていなければ赤字で「宣言されていません」と表示されます。
WooCommerceサポート宣言されていない

上記手順3のようにサポート宣言をすると以下のような表示になります。
WooCommerceサポート宣言されている

参照されるテンプレートを変えたい

以上ご紹介した手順をおこなうと、WooCommerceで作られるページはを商品一覧ページもカテゴリ一覧ページも商品詳細ページも、みんなwoocommerce.phpが参照されます。
そんなのイヤだ!私はどうしても商品一覧ページと商品詳細ページのテンプレートを分けたい!
という場合は、woocommerce.phpの代わりに、single-product.phpとarchive-product.phpを作成します。方法は上記手順の1と同じです。その後single-product.phpとarchive-product.phpをお好みに編集します。

WooCommerce関係テンプレートまとめ

本記事でご紹介した内容を表にまとめました。

ページ種類 URL woocommerce.phpがあるとき woocommerce.phpがないとき
ショップのトップページ https://yoursite/shop/ woocommerce.php archive-product.php
カテゴリ一覧ページ https://yoursite/product-category/カテゴリスラッグ/ woocommerce.php taxonomy-product_cat.php
archive-product.php
タグ一覧ページ https://yoursite/product-tag/タグスラッグ/ woocommerce.php taxonomy-product_tag.php
archive-product.php
商品詳細ページ https://yoursite/product/商品ID/ woocommerce.php single-product.php

※複数のテンプレートがある場合は上が優先されます。
※そのテンプレートが無い場合はplugins/woocommerce/template 内のテンプレートが参照されます。

参照サイト

当記事では以下のサイト参照いたしました。制作者に感謝いたします。
Third party / custom / non-WC theme compatibility(英語)
WooCommerceのショップページを既存テーマでカスタマイズする最も簡単な方法

WordPressでECサイトが作れる無料プラグインWooCommerce。当記事では商品の個別ページでパンくずリストを設置する方法とカスタマイズをご紹介します。

当記事の環境:WordPress バージョン 5.3.2、WooCommerceバージョン 4.0.1

設置方法

パンくずリストって、まず現在の商品名を取得して、現在の商品が属するカテゴリを取得して…なんか面倒そうですね。でも、ご安心ください。WooCommerceには最初からパンくずリストが用意されているのです!

テーマのテンプレートphpのパンくずリストを設置したい位置に、次の1行を書きます。

<?php woocommerce_breadcrumb(); ?>

たった1行書くだけで表示は次のようになります。
Home / カテゴリ名 / 商品名

「Home」のテキストを変える

「Home」を例えばカタカナで「ホーム」と表示したい場合は、テーマのfunctions.phpに次のコードを書きます。

add_filter( 'woocommerce_breadcrumb_defaults', 'wcc_change_breadcrumb_home_text' );
function wcc_change_breadcrumb_home_text( $defaults ) {
	$defaults['home'] = 'ホーム';
	return $defaults;
}

「Home」のリンク先を変える

標準では「Home」のリンク先はサイトのトップページになっています。例えば、ショップのトップへリンクしたい場合は、テーマのfunctions.phpに次のコードを書きます。

add_filter( 'woocommerce_breadcrumb_home_url', 'woo_custom_breadrumb_home_url' );
function woo_custom_breadrumb_home_url() {
    return '/shop/';
}

リストの区切り文字を変える

標準ではリストの区切り文字が「/」になっています。例えば、区切り文字を「>」にしたい場合は、テーマのfunctions.phpに次のコードを書きます。

add_filter( 'woocommerce_breadcrumb_defaults', 'wcc_change_breadcrumb_delimiter' );
function wcc_change_breadcrumb_delimiter( $defaults ) {
	$defaults['delimiter'] = ' &gt; ';
	return $defaults;
}

参考サイト

当記事では以下のサイト参照いたしました。制作者に感謝いたします。
Customize the WooCommerce breadcrumb