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

[作業環境](#作業環境)
[wordpress設定](#wordpress設定)
[ページ設定](#ページ設定)
[woocommerce設定](#woocommerce設定)
[カスタマイズの準備](#カスタマイズの準備)
[各ページに読み込むphpファイル](#各ページに読み込むphpファイル)
[ショップページ](#ショップページ)
[商品詳細ページ](#商品詳細ページ)
[カテゴリーページ](#カテゴリーページ)
[お買い物カゴページ](#お買い物カゴページ)
[支払いページ](#支払いページ)
[マイアカウントページ（ログイン前）](#マイアカウントページ（ログイン前）)
[マイアカウントページ-ダッシュボード](#マイアカウントページ-ダッシュボード)
[マイアカウントページ-注文](#マイアカウントページ-注文)
[マイアカウントページ-ダウンロード](#マイアカウントページ-ダウンロード)
[マイアカウントページ-住所](#マイアカウントページ-住所)
[マイアカウントページ-決済](#マイアカウントページ-決済)
[マイアカウントページ-アカウント詳細](#マイアカウントページ-アカウント詳細)
[支払いページ](#支払いページ)
[注文完了ページ](#注文完了ページ)
[パスワードを忘れた場合ページ1](#パスワードを忘れた場合ページ1)
[パスワードを忘れた場合ページ2](#パスワードを忘れた場合ページ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`

![スクリーンショット 2021-11-08 18.45.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1653133/d480e3b7-c0db-3d14-0711-06c0afdeffda.png)

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

![products.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1653133/d34db327-89c9-e26d-ec1b-1a36f134201d.jpeg)



#商品詳細ページ
###読み込まれている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`

![スクリーンショット 2021-11-13 22.34.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1653133/abd11eb8-5613-d93d-53e5-497fd52df3e8.png)


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

![スクリーンショット 2021-11-13 23.09.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1653133/477e9e57-cd7e-b3e5-b1aa-ac319ff4864e.png)

#カテゴリーページ
###読み込まれている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
wp-content/themes/twentytwenty-child/woocommerce/taxonomy-product-cat.php

###`カテゴリーページ構造図`

![スクリーンショット 2021-11-14 17.45.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1653133/4a29d1a0-7244-fb3d-2cc4-5dd2a35ead99.png)

#お買い物カゴページ
###読み込まれているphpファイル（子テーマ内のみ）

wp-content/themes/twentytwenty-child/functions.php
wp-content/themes/twentytwenty-child/woocommerce/cart/cart-totals.php
wp-content/themes/twentytwenty-child/woocommerce/cart/cart.php
wp-content/themes/twentytwenty-child/woocommerce/cart/cross-sells.php
wp-content/themes/twentytwenty-child/woocommerce/cart/proceed-to-checkout-button.php
wp-content/themes/twentytwenty-child/woocommerce/global/quantity-input.php

###`お買い物カゴページ構造図`

![スクリーンショット 2021-11-14 18.16.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1653133/2b33326b-3e50-eb39-2671-87cf5125faa1.png)



#マイアカウントページ（ログイン前）
###読み込まれているphpファイル（子テーマ内のみ）
wp-content/themes/twentytwenty-child/woocommerce/myaccount/form-login.php

###`マイアカウントページ（ログイン前）構造図`

![スクリーンショット 2021-11-16 23.14.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1653133/6ef16fa1-c10a-e669-9bc3-226eaec3b825.png)


#マイアカウントページ-ダッシュボード
###読み込まれているphpファイル（子テーマ内のみ）
wp-content/themes/twentytwenty-child/functions.php
wp-content/themes/twentytwenty-child/woocommerce/myaccount/dashboard.php
wp-content/themes/twentytwenty-child/woocommerce/myaccount/my-account.php
wp-content/themes/twentytwenty-child/woocommerce/myaccount/navigation.php

###`マイアカウントページ構造図-ダッシュボード`

![スクリーンショット 2021-11-22 14.23.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1653133/9097b9fb-4477-7340-8700-22da932ee077.png)

#マイアカウントページ-注文
###読み込まれているphpファイル（子テーマ内のみ）
wp-content/themes/twentytwenty-child/functions.php
wp-content/themes/twentytwenty-child/woocommerce/myaccount/my-account.php
wp-content/themes/twentytwenty-child/woocommerce/myaccount/navigation.php
wp-content/themes/twentytwenty-child/woocommerce/myaccount/orders.php

###`マイアカウントページ構造図-注文`

![スクリーンショット 2021-11-22 15.39.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1653133/9f5668bc-17f5-71fb-cdb4-45f81e49c7bd.png)

#マイアカウントページ-ダウンロード
###読み込まれているphpファイル（子テーマ内のみ）
wp-content/themes/twentytwenty-child/functions.php
wp-content/themes/twentytwenty-child/woocommerce/myaccount/downloads.php
wp-content/themes/twentytwenty-child/woocommerce/myaccount/my-account.php
wp-content/themes/twentytwenty-child/woocommerce/myaccount/navigation.php

###`マイアカウントページ構造図-ダウンロード`

![スクリーンショット 2021-11-22 15.47.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1653133/3ef045b8-1f8e-02d0-27fd-c7ed9a0349b5.png)

#マイアカウントページ-住所
###読み込まれているphpファイル（子テーマ内のみ）
wp-content/themes/twentytwenty-child/functions.php
wp-content/themes/twentytwenty-child/woocommerce/myaccount/dashboard.php
wp-content/themes/twentytwenty-child/woocommerce/myaccount/my-account.php
wp-content/themes/twentytwenty-child/woocommerce/myaccount/navigation.php

###`マイアカウントページ構造図-住所`

![スクリーンショット 2021-11-22 18.34.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1653133/f48073e2-984c-e916-b79c-bf736113fdf6.png)

#マイアカウントページ-決済
###読み込まれているphpファイル（子テーマ内のみ）
wp-content/themes/twentytwenty-child/functions.php
wp-content/themes/twentytwenty-child/woocommerce/myaccount/my-account.php
wp-content/themes/twentytwenty-child/woocommerce/myaccount/navigation.php
wp-content/themes/twentytwenty-child/woocommerce/myaccount/payment-methods.php

###`マイアカウントページ構造図-決済`

![スクリーンショット 2021-11-22 20.31.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1653133/f0816b32-4692-5983-1d60-5a6051828e0e.png)

#マイアカウントページ-アカウント詳細
###読み込まれているphpファイル（子テーマ内のみ）
wp-content/themes/twentytwenty-child/functions.php
wp-content/themes/twentytwenty-child/woocommerce/myaccount/form-edit-account.php
wp-content/themes/twentytwenty-child/woocommerce/myaccount/my-account.php
wp-content/themes/twentytwenty-child/woocommerce/myaccount/navigation.php

###`マイアカウントページ構造図-アカウント詳細`

![スクリーンショット 2021-11-22 22.22.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1653133/74d22d8d-e365-84ed-922b-43fe94063354.png)

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

wp-content/themes/twentytwenty-child/functions.php
wp-content/themes/twentytwenty-child/woocommerce/checkout/form-billing.php
wp-content/themes/twentytwenty-child/woocommerce/checkout/form-checkout.php
wp-content/themes/twentytwenty-child/woocommerce/checkout/form-coupon.php
wp-content/themes/twentytwenty-child/woocommerce/checkout/form-login.php
wp-content/themes/twentytwenty-child/woocommerce/checkout/form-shipping.php
wp-content/themes/twentytwenty-child/woocommerce/checkout/payment.php
wp-content/themes/twentytwenty-child/woocommerce/checkout/review-order.php
wp-content/themes/twentytwenty-child/woocommerce/checkout/terms.php
wp-content/themes/twentytwenty-child/woocommerce/notices/notice.php

###`支払いページ構造図`

![スクリーンショット 2021-11-14 18.57.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1653133/5930a150-d3b0-e98c-9c9b-59b4ea9f0810.png)

#注文完了ページ
###読み込まれているphpファイル（子テーマ内のみ）
wp-content/themes/twentytwenty-child/functions.php
wp-content/themes/twentytwenty-child/woocommerce/checkout/thankyou.php
wp-content/themes/twentytwenty-child/woocommerce/order/order-details-customer.php
wp-content/themes/twentytwenty-child/woocommerce/order/order-details.php

###`注文完了ページ構造図`

![スクリーンショット 2021-11-22 15.32.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1653133/4191e0c9-1360-8bd6-c34a-739a7c4d6e10.png)

#パスワードを忘れた場合ページ1
###読み込まれているphpファイル（子テーマ内のみ）
wp-content/themes/twentytwenty-child/functions.php
wp-content/themes/twentytwenty-child/woocommerce/myaccount/form-lost-password.php

###`パスワードを忘れた場合ページ1構造図`

![スクリーンショット 2021-11-22 22.31.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1653133/530b9664-4525-f525-33da-a39dcb461397.png)


#パスワードを忘れた場合ページ2
###読み込まれているphpファイル（子テーマ内のみ）
wp-content/themes/twentytwenty-child/functions.php
wp-content/themes/twentytwenty-child/woocommerce/myaccount/form-reset-password.php

###`パスワードを忘れた場合ページ2構造図`

![スクリーンショット 2021-11-16 23.34.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1653133/b56e326e-5c3d-f5c8-37f5-e7d6c0858496.png)



***
#参考記事
`http://koolweb37.com/wp/2019/02/19/woocommerce%E3%83%97%E3%83%A9%E3%82%B0%E3%82%A4%E3%83%B3%E3%81%AE%E3%83%9A%E3%83%BC%E3%82%B8%E5%86%85%E3%83%AC%E3%82%A4%E3%82%A2%E3%82%A6%E3%83%88%E3%82%92%E5%A4%89%E6%9B%B4%E3%81%99%E3%82%8B%E6%96%B9/`
`https://ouchi-it.com/woo-dashboard/`
``