プログラムでWooCommerceテンプレートをカスタマイズする方法

公開: 2021-05-04

サイトのテンプレートを編集しますか？このガイドでは、WooCommerceテンプレートをフックと上書きの両方でプログラムでカスタマイズする方法を説明します。

なぜWooCommerceテンプレートを編集するのですか？

オンラインショッピングは実店舗に行くよりも快適で迅速であるため、eコマースはここ数年で非常に人気があります。非常に多くの競争があるため、WooCommerceショップを立ち上げて製品をオンラインにするだけでは不十分です。あなたは群衆から差別化し、目立つ方法を見つける必要があります。

そのための最良の方法の1つは、ストアをカスタマイズすることです。ヘッダーを変更したり、チェックアウトやショップページなどの主要なページを編集したりする以外に、使用するテンプレートをカスタマイズすることもできます。テンプレートを編集するサイトはそれほど多くないので、そうすることで、競合他社よりも優位に立つことができます。

コーディングのスキルがある場合は、ショップを編集するときに子テーマを使用することをお勧めします。同様に、WordPressとWooCommerceの組み込みフックは、任意のWebサイトを編集して新しい機能を追加するための多くの可能性を提供します。

プログラムでWooCommerceテンプレートをカスタマイズする方法

プログラムでWooCommerceテンプレートをカスタマイズする主な方法は2つあります。

フック付き
テンプレートを上書きする

これらの方法はそれぞれ異なる目的を果たします。それらの主な違いを詳しく見てみましょう。

テンプレートファイルを上書きしますか、それともフックを使用しますか？

フックを使用してストアをカスタマイズすることをお勧めします。ただし、フックを使用してWooCommerceをカスタマイズすると、非互換性の問題が発生する可能性があります。より複雑なカスタマイズの場合は、WooCommerceテンプレートファイルを上書きすることをお勧めします。

テンプレートファイルを上書きすると、そのファイルで機能するフックが機能しなくなることに注意することが重要です。各フックは特定のファイルを指しているため、フックをトリガーする同じファイルを編集すると、それらを使用できなくなります。

たとえば、 single-product.phpファイルを取得して、フックがどのように作成されるかを確認しましょう。また、フックがループの前後の両方にあることに注意してください。

 if（！defined（ 'ABSPATH'））{
        出口; //直接アクセスした場合は終了します
}
 get_header（ 'ショップ'）; ？>
 <？php
                / **
                 * woocommerce_before_main_contentフック。
                 *
                 * @hooked woocommerce_output_content_wrapper-10（コンテンツの開始divを出力します）
                 * @hooked woocommerce_breadcrumb-20
                 * /
                do_action（ 'woocommerce_before_main_content'）;
        ？>
                <？php while（have_posts（））：？>
                        <？php the_post（）; ？>
                        <？php wc_get_template_part（ 'content'、 'single-product'）; ？>
                <？php endwhile; //ループの終わり。 ？>
        <？php
                / **
                 * woocommerce_after_main_contentフック。
                 *
                 * @hooked woocommerce_output_content_wrapper_end-10（コンテンツの終了divを出力します）
                 * /
                do_action（ 'woocommerce_after_main_content'）;
        ？>
        <？php
                / **
                 * woocommerce_sidebarフック。
                 *
                 * @ hookedwoocommerce_get_sidebar-10
                 * /
                do_action（ 'woocommerce_sidebar'）;
        ？>
 <？php
 get_footer（ 'ショップ'）;

スクリプトを見ると、 do_action('name-of-the-hook');フックを作成する方法がわかります。行。

子テーマのfunctions.phpファイルに次のフックがあるとします。

 add_action（ 'woocommerce_after_main_content'、function（）{echo「単一の製品テンプレートファイルの後のカスタムコンテンツ」;}）;

次のように、同じコンテンツをテンプレートファイルにエコーできます。

 <？php endwhile; //ループの終わり。 ？>
        <？php
 「単一の製品テンプレートファイルの後のカスタムコンテンツ」をエコーします。
                / **
                 * woocommerce_after_main_contentフック。
 do_action（ 'woocommerce_after_main_content'）;

ただし、そうすることで、 do_action（ 'woocommerce_after_main_content'）; フックでコードを引っ張る代わりにコードを追加したので、関数は役に立たなくなります。したがって、ファイル内の不要なフックをすべて削除して、 do_action（ 'name-of-the-hook'）;を削除することをお勧めします。セクション。

woocommerce_after_main_content()フックをWebサイトの別の場所で使用していて、 do_action( 'name_of_your_hook' );を削除する場合は注意してください。このファイルでは、フックは機能しなくなります。

フックと不要なPHPタグを削除すると、ファイルは次のようになります。

 if（！defined（ 'ABSPATH'））{
 出口; //直接アクセスした場合は終了します
}
 get_header（ 'ショップ'）;
 while（have_posts（））：
 ポスト（）;
 wc_get_template_part（ 'content'、 '単一製品'）;
 終わり; //ループの終わり。
 do_action（ 'woocommerce_sidebar'）;
 get_footer（ 'ショップ'）;

注：この方法でフックを削除すると、プラグインやテーマなどのサードパーティのコードに影響を与え、障害を引き起こしたり、Webサイトを壊したりする可能性があります。 自分が何をしているのかを知っていることを前提としています。

WooCommerceテンプレートファイルをカスタマイズして上書きする

WooCommerceテンプレートファイルを上書きすると、ストアをカスタマイズするための柔軟性が大幅に向上します。ただし、前述のように、テンプレートファイルのコンテンツを上書きすると、そのファイルで機能するフックが機能しなくなることを理解する必要があります。さらに、WooCommerceはテンプレートファイルを随時変更する可能性があるため、更新があり、ファイルが変更された場合、編集したファイルが古くなっていることに気付く場合があります。

テンプレートを上書きする際の注意事項

あなたがここにいるなら、あなたはおそらくいくつかのコーディングスキルを持っていて、子テーマを使用してインストールする方法を知っています。そうでない場合は、ガイドを確認して子テーマを作成するか、これらのプラグインのいずれかを使用してください。

WooCommerceテンプレートの上書きは、 functions.phpファイルの上書きに似ています。主な違いは、テーマファイルの代わりにWooCommerceのテンプレートファイルを編集することです。

これを行うには、WooCommerceプラグインテンプレートフォルダーから目的のテンプレートファイルをコピーして、WooCommerceフォルダーの下の子テーマに貼り付ける必要があります。 WooCommerceテンプレートフォルダー、ファイル名、およびサブフォルダーと同じ構造に従う場合。サブフォルダ内のテンプレートファイルであっても、テンプレートファイルを上書きすることができます。

多くのWooCommerceテンプレートファイルがあり、それぞれが1つのタスクを担当します。このリンクで、編集可能なテンプレートファイルの完全なリスト、およびサブディレクトリとフォルダ構造を確認できます。

ご覧のとおり、ルートテンプレートフォルダにはいくつかのファイルといくつかのサブディレクトリがあります。 archive-product.php 、 single-product.php 、 content-single-product.phpなどのメインファイルを編集するのと同じ方法で、任意のサブディレクトリ内のファイルをカスタマイズできます。同様に、子テーマと同じフォルダー名と構造に従う場合は、カート、マイアカウント、電子メール、またはチェックアウトフォルダー内のファイルをカスタマイズすることもできます。

したがって、これらのファイルの一部をカスタマイズする場合、子テーマは次のようになります。 woocommerceテンプレートをプログラムでカスタマイズする方法

そうは言っても、WooCommerceテンプレートをカスタマイズするためにできることのいくつかの例を見てみましょう。

1.WooCommerceテンプレートにショートコードを追加します

興味深い代替案の1つは、コードでショートコードを使用することです。既存のショートコードのほとんどはここで機能するはずですが、公式のWooCommerceやWordPressのショートコードの外でサポートされていないショートコードを見つけることもよくあります。

たとえば、次のスクリプトでは、すべての単一の製品ページにアカウントダッシュボードが含まれます。子テーマで作成したsingle-product.phpファイルに貼り付けることを忘れないでください。

 <？php
 if（！defined（ 'ABSPATH'））{
 出口; //直接アクセスした場合は終了します
}
 get_header（ 'ショップ'）;
 while（have_posts（））：
 ポスト（）;
 wc_get_template_part（ 'content'、 '単一製品'）;
 終わり; //ループの終わり。
 do_action（ 'woocommerce_sidebar'）;
 $ t = '<div> <h4>マイアカウント</ h4>';
 $ t。= do_shortcode（ " [ woocommerce_my_account ] "）;
 $ t。= "</ div>";
 エコー$ t;
 get_footer（ 'ショップ'）;

そして、これはライブ製品ページの結果です：

woocommerceテンプレートファイルをカスタマイズする-wcテンプレートにショートコードを追加する

2.以前にその製品を購入した顧客のコンテンツを表示する

すでに商品を購入していて、同じ商品を再度購入するために戻ってきた顧客がいる場合は、エクスペリエンスを向上させ、何度も何度も店舗に戻ってくるようにする方法として、割引コードを提供できます。

次のスクリプトは、過去に同じ商品を購入したリピーター向けの商品ページにコンテンツを表示します。もう一度、 single-product.phpファイルを編集します。

 get_header（ 'ショップ'）;
 while（have_posts（））：
 ポスト（）;
 wc_get_template_part（ 'content'、 '単一製品'）;
 終わり; //ループの終わり。
 $ current_user = wp_get_current_user（）;
 if（wc_customer_bought_product（$ current_user-> user_email、$ current_user-> ID、$ product-> get_id（）））：
 echo '<div class = "user-bought">＆hearts; おい ' 。 $ current_user-> first_name。 '、あなたは以前にこれを購入しました。 このクーポンを使用して再購入：<b> PURCHASE_AGAIN_21 </ b> </ div> ';
 endif;
 get_footer（ 'ショップ'）;

woocommerceテンプレートファイルをカスタマイズする-購入したコンテンツを表示する-リピーターになる前に

3.カートの製品数量と合計価格に基づいて、[カートに追加]ボタンを削除します

WooCommerceテンプレートをプログラムでカスタマイズする場合の別の興味深い例は、顧客が購入しているアイテムの数とカートの合計価格に応じて、カートボタンを追加することです。

この場合、テンプレートディレクトリのループフォルダ内にあるファイルを使用して、WooCommerceループに入ります。子テーマのwoocommerceフォルダーの下にあるloopというフォルダーの下に新しいadd-to-cart.phpファイルを作成し、次のスクリプトを貼り付けるだけです。

 if（！defined（ 'ABSPATH'））{
 出口;
 }
 グローバル$ product;
 $ count = WC（）-> cart-> get_cart_contents_count（）;
 $ total_price = WC（）-> cart-> get_cart_total（）;
 preg_match_all（ '！\ d +！'、$ total_price、$ matches）;
 $ to_int = intval（$ matches [0] [1]）;
 if（$ to_int> 500）{
 echo "カート全体の制限額を超えています";
 }
 elseif（$ count <10）{
 echo apply_filters（
 'woocommerce_loop_add_to_cart_link'、// WPCS：XSSok。
 sprintf（
 '<a href="%s" data-quantity="%s" class="%s"％s>％s </a>'、
 esc_url（$ product-> add_to_cart_url（））、
 esc_attr（isset（$ args ['quantity']）？$ args ['quantity']：1）、
 esc_attr（isset（$ args ['class']）？$ args ['class']： 'button'）、
 isset（$ args ['attributes']）？ wc_implode_html_attributes（$ args ['attributes']）： ''、
 esc_html（$ product-> add_to_cart_text（））
 ）、$ product、$ args）;
 }
 それ以外{
 echo "数量制限を超えました";
 }

この場合、カートに追加されたアイテムが10個を超えており、カートの合計価格が500ドルを超えていないかどうかを確認するために、条件付きロジックif()ステートメントを追加しています。

ご覧のとおり、WooCommerceクラススコープに入り、 WC()->cartのようにWooCommerceオブジェクトを呼び出しています。このようにして、条件に基づいて、ショップページにカートボタンを追加するかどうかに関係なく、いくつかの情報を取得できます。

両方の条件付き制限を適用した場合の結果は次のとおりです。

カートの製品数量と合計価格に基づいて[カートに追加]ボタンを削除します

これはメインショップページでのみ機能することに注意してください。他のページでも同じことをしたい場合は、さらにコードを追加する必要があります。

4.WooCommerceメールテンプレートファイルを編集します

電子メールテンプレートにはすでにWebサイトへの便利なリンクが含まれていますが、一部のユーザーはこれに気付いていない可能性があります。それでは、ユーザーが受信した電子メールから直接Webサイトにログインできる電子メールテンプレートへのリンクを追加しましょう。

メールレイアウトのヘッダーにリンクを追加するので、WooCommerceのtemplatesサブディレクトリのemailフォルダーにあるemail-header.phpファイルのコピーが必要です。

子テーマに新しいフォルダーを作成し、同じ名前でファイルをそこに貼り付けます。開始フラグ<！– header–>と<！– end header–>が表示されます。ここに、リンクを追加します。

 <！-ヘッダー->
 <table border = "0" cellpadding = "0" cellspacing = "0" width = "100％">
 <tr>
 <td>
 <h1> <？php echo $ email_heading; ？> </ h1>
 <h3>
 <？php echo '<span class = "my-link"> <ahref = "＃login-URL">アカウントにログイン</a> </ span>';？>
 </ h3>
 </ td>
 </ tr>
 </ table>
 <！-終了ヘッダー→

それでおしまい！ WooCommerceメールテンプレートヘッダーファイルを編集しました。同様に、このディレクトリにあるすべての電子メールテンプレートファイルを編集できます。メールテンプレートをテストする方法の詳細については、この完全なガイドをご覧ください。

テンプレートをプレビューするには、メールプレビュープラグインを使用することをお勧めします。ここでは、使用できる電子メールプラグインのいくつかを見つけることができます。

WCメールテンプレートファイルの編集

5.CSSスタイルをWooCommerceメールテンプレートに適用する方法

もう1つの興味深い方法は、WooCommerceテンプレートのスタイルをプログラムでカスタマイズすることです。 HTMLマークアップを編集したら、CSSスタイルをメールテンプレートに追加できます。インラインCSSは推奨される方法ではないことを考慮すると、 email-styles.phpファイルを使用する必要があります。これは、電子メールテンプレートのCSSを処理するファイルです。

カスタムCSSコードをメールに適用するには、このファイルをWooCommerceプラグインフォルダーからコピーして、テーマのWooCommerceフォルダーに貼り付けます。これはPHPファイルであるため、変数や関数を使用して独自のロジックステートメントを作成し、それらをスタイルに適用することができます。

 a {
 色：<？php echo esc_attr（$ link_color）; ？>;
 フォントの太さ：通常;
 テキスト装飾：下線;
 }

そしてこれはカスタムリンクセレクターです：

 .my-link> a：nth-child（1）{
 色：白;
 font-size：14px;
 }

結論

要約すると、テンプレートファイルの編集は、競合他社から目立ち、顧客により良いショッピング体験を提供するための優れた方法です。

プログラムでWooCommerceテンプレートをカスタマイズする主な方法は2つあります。

フック付き
テンプレートを上書きする

両方の方法を比較し、いくつかの例を示しました。スクリプトをベースとして使用し、遊んでスクリプトをカスタマイズし、ストアに適用することができます。

ガイドに従って問題が発生した場合は、下のコメントでお知らせください。できる限りサポートさせていただきます。