WooCommerceページデザインをカスタマイズする際のphp構成

WordPressの高機能プラグインWooCommerceは、販売プラグインとして大人気です。

この記事では、プラグインWooCommerceの各ページをカスタマイズしたい場合に、どのファイルを更新すればカスタマイズできるのかをご紹介しています。

例えば、「ショップページ」をカスタマイズしたい場合は、そこに読み込まれているphpファイルを特定し、構造図でどの部分がどのphpファイルで設定されているかを知ることで、のぞみの部分をカスタマイズできます。

例：ショップページ

読み込まれているphpファイル（子テーマ内のみ）

wp-content/themes/twentytwenty-child/functions.php
wp-content/themes/twentytwenty-child/woocommerce/archive-product.php
wp-content/themes/twentytwenty-child/woocommerce/content-product.php
wp-content/themes/twentytwenty-child/woocommerce/global/breadcrumb.php
wp-content/themes/twentytwenty-child/woocommerce/loop/add-to-cart.php
wp-content/themes/twentytwenty-child/woocommerce/loop/loop-end.php
wp-content/themes/twentytwenty-child/woocommerce/loop/loop-start.php
wp-content/themes/twentytwenty-child/woocommerce/loop/orderby.php
wp-content/themes/twentytwenty-child/woocommerce/loop/pagination.php
wp-content/themes/twentytwenty-child/woocommerce/loop/price.php
wp-content/themes/twentytwenty-child/woocommerce/loop/rating.php
wp-content/themes/twentytwenty-child/woocommerce/loop/result-count.php
wp-content/themes/twentytwenty-child/woocommerce/loop/sale-flash.php

ショップページ構造図#1

FTPアプリやSSHクライアントでファイルを開き、テキストエディターでカスタマイズしましょう。

この記事で解説するページ

ショップページ
商品詳細ページ
カテゴリーページ
お買い物カゴページ
支払いページ
マイアカウントページ（ログイン前）
マイアカウントページ-ダッシュボード
マイアカウントページ-注文
マイアカウントページ-ダウンロード
マイアカウントページ-住所
マイアカウントページ-決済
マイアカウントページ-アカウント詳細
支払いページ
注文完了ページ
パスワードを忘れた場合ページ1
パスワードを忘れた場合ページ2

作業環境

WordPress 5.8.1

テーマ

Twenty Twenty

プラグイン

WooCommerce 5.8.0

子テーマ

twentytwenty-child

子テーマの作り方はお調べください。

Wordpress設定

表示設定　＞　ホームページの表示　＞　「固定ページ」にチェック　「ショップ」を選択

パーマリンク設定　＞　共通設定　＞　「投稿名」を選択　ー　固定ページのスラッグを各ページでカスタマイズできる

ページ設定

デフォルトページ

以下のページはWooCommerceをインストールした時点に生成される

ショップ https://example.com/
マイアカウント https://example.com/　my-account
お買い物カゴ https://example.com/cart
支払い https://example.com/checkout
返金および返品ポリシー https://example.com/refund_returns
Privacy Policy https://example.com/privacy-policy
Sample Page https://example.com/sample-page

追加するページ

利用規約 https://example.com/terms-of-service

固定ページ投稿より追加する

WooCommerce設定

一般

通貨オプション
通貨：日本円
小数点以下の桁数：0

商品

ショップページ：ショップ

高度な設定

お買い物カゴページ：お買い物カゴ
購入手続きページ：支払い
マイアカウントページ：マイアカウント
利用規約：利用規約

カスタマイズの準備

子テーマ内にWooCommerceカスタムファイルを作成

# cp -r /var/www/html/example.com/wp-content/plugins/woocommerce/templates /var/www/html/example.com/wp-content/twentytwenty-child/woocommerce

子テーマ内のwoocommerceディレクトリ内のphpファイルをカスタマイズしていく

各ページに読み込むphpファイル

ショップページ

読み込まれているphpファイル（子テーマ内のみ）

wp-content/themes/twentytwenty-child/functions.php
wp-content/themes/twentytwenty-child/woocommerce/archive-product.php
wp-content/themes/twentytwenty-child/woocommerce/content-product.php
wp-content/themes/twentytwenty-child/woocommerce/global/breadcrumb.php
wp-content/themes/twentytwenty-child/woocommerce/loop/add-to-cart.php
wp-content/themes/twentytwenty-child/woocommerce/loop/loop-end.php
wp-content/themes/twentytwenty-child/woocommerce/loop/loop-start.php
wp-content/themes/twentytwenty-child/woocommerce/loop/orderby.php
wp-content/themes/twentytwenty-child/woocommerce/loop/pagination.php
wp-content/themes/twentytwenty-child/woocommerce/loop/price.php
wp-content/themes/twentytwenty-child/woocommerce/loop/rating.php
wp-content/themes/twentytwenty-child/woocommerce/loop/result-count.php
wp-content/themes/twentytwenty-child/woocommerce/loop/sale-flash.php

ショップページ構造図#1

ショップページ構造図#2

商品詳細ページ

読み込まれているphpファイル（子テーマ内のみ）

wp-content/themes/twentytwenty-child/functions.php
wp-content/themes/twentytwenty-child/woocommerce/content-product.php
wp-content/themes/twentytwenty-child/woocommerce/content-single-product.php
wp-content/themes/twentytwenty-child/woocommerce/global/breadcrumb.php
wp-content/themes/twentytwenty-child/woocommerce/global/quantity-input.php
wp-content/themes/twentytwenty-child/woocommerce/loop/add-to-cart.php
wp-content/themes/twentytwenty-child/woocommerce/loop/loop-end.php
wp-content/themes/twentytwenty-child/woocommerce/loop/loop-start.php
wp-content/themes/twentytwenty-child/woocommerce/loop/price.php
wp-content/themes/twentytwenty-child/woocommerce/loop/rating.php
wp-content/themes/twentytwenty-child/woocommerce/loop/sale-flash.php
wp-content/themes/twentytwenty-child/woocommerce/single-product-reviews.php
wp-content/themes/twentytwenty-child/woocommerce/single-product.php
wp-content/themes/twentytwenty-child/woocommerce/single-product/add-to-cart/simple.php
wp-content/themes/twentytwenty-child/woocommerce/single-product/meta.php
wp-content/themes/twentytwenty-child/woocommerce/single-product/price.php
wp-content/themes/twentytwenty-child/woocommerce/single-product/product-image.php
wp-content/themes/twentytwenty-child/woocommerce/single-product/product-thumbnails.php
wp-content/themes/twentytwenty-child/woocommerce/single-product/rating.php
wp-content/themes/twentytwenty-child/woocommerce/single-product/related.php
wp-content/themes/twentytwenty-child/woocommerce/single-product/sale-flash.php
wp-content/themes/twentytwenty-child/woocommerce/single-product/share.php
wp-content/themes/twentytwenty-child/woocommerce/single-product/short-description.php
wp-content/themes/twentytwenty-child/woocommerce/single-product/tabs/tabs.php
wp-content/themes/twentytwenty-child/woocommerce/single-product/title.php
wp-content/themes/twentytwenty-child/woocommerce/single-product/up-sells.php

商品詳細ページ構造図#1

商品詳細ページ構造図#2