More than 3 years have passed since last update.

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

Last updated at 2021-11-29Posted at 2021-11-22

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

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

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

#お買い物カゴページ
###読み込まれている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

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

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

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

#マイアカウントページ-ダッシュボード
###読み込まれている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

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

#マイアカウントページ-注文
###読み込まれている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

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

#マイアカウントページ-ダウンロード
###読み込まれている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

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

#マイアカウントページ-住所
###読み込まれている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

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

#マイアカウントページ-決済
###読み込まれている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

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

#マイアカウントページ-アカウント詳細
###読み込まれている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

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

#支払いページ
###読み込まれている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

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

#注文完了ページ
###読み込まれている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

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

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

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

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

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

#参考記事
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/
``

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up