WooCommerceのカスタマイズまとめ

プラグインごとに見るならこちら↓

マイアカウントページ(ユーザーページ)の項目を追加する

マイアカウントは、WordPressのユーザー情報をそのまま使うのでマイアカウントページの項目を追加したい場合は下記2つを行う。

・ユーザープロフィールに項目を追加する

参考 https://whitebear-seo.com/wordpress-add-user-profile/

・WooCommerceのマイアカウントページに項目を追加する

参考 https://susu.mu/archives/2577/

ユーザー情報と注文情報の項目を同時に追加する

注文時に追加で顧客にデータ入力してもらいたい場合は、このプラグインが便利。

特徴

・自由項目・必須項目を選択可能
・注文データに反映される
・ユーザー情報にも追加される

参考 https://www.wpdesk.net/blog/woocommerce-my-account-custom-fields/

商品名(カスタム投稿のタイトル)取得

//記事タイトルを取得するショートコード
function func_get_title() {

	return strip_tags(get_the_title());

}

add_shortcode('get_title', 'func_get_title');

特定のカテゴリーや全体の商品名を取得したい場合はこれ。

参考 https://irec.jp/wordpress/custom-post-type/get_posts-custom-post/

商品ページの関連商品を非表示にする

//関連商品非表示
remove_action( 'woocommerce_after_single_product_summary', 'woocommerce_output_related_products', 20 );

新着商品にNEWバッジをつける

参考 https://businessbloomer.com/woocommerce-new-badge-recent-products/

商品ページにカスタムフィールドの値を表示させる

プラグインWoocommerce Single Product Page Customizerとカスタムフィールドショートコードを使って、カスタムフィールドの値を商品ページに表示させることができる。

1. Advanced Custom Fieldsプラグインをインストール

2. カスタムフィールドを商品に追加する。

3. 下の参考URLを見てfunction.phpにカスタムフィールドを表示させる関数を作る。

//カスタムフィールドを表示するショートコード
function func_cfdata($fieldname) {
return get_post_meta(get_the_ID(), $fieldname[0], true);

}

add_shortcode('cfdata', 'func_cfdata');

参考 https://www.sriproot.net/blog/use-customfield-to-shortcode-1010

4. Woocommerce Single Product Page Customizerをインストールし、フックの好きな位置に3で作ったショートコードを追加する。

商品テーブル(リスト)を表示したい

WOO Product Table Proのサンプル

Woocommerceの商品一覧は、デフォルトではギャラリータイプである。商品をテーブル一覧で表示したい場合はプラグインを使うのが一般的なようだ。

海外サイトでは、Woocommerce用の商品テーブルプラグイン(woocommerce product table / list view)がいくつか出されているが私が採用したのは、WOO Product Table Proという有料プラグイン。

関連記事  https://shop.orank.jp/woo-commerce-plugin/#toc1

3000円程度のプラグイン(6ヶ月サポート付き)なので安い部類に入る。

商品ページでツールチップをつけたい

参考 http://www.tohoho-web.com/bootstrap/tooltips.html