LoginSignup
4
2

More than 1 year has passed since last update.

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

Last updated at Posted 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

スクリーンショット 2021-11-08 18.45.53.png

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

products.jpg

商品詳細ページ

読み込まれている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

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

スクリーンショット 2021-11-13 23.09.01.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

お買い物カゴページ

読み込まれている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

マイアカウントページ(ログイン前)

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

wp-content/themes/twentytwenty-child/woocommerce/myaccount/form-login.php

マイアカウントページ(ログイン前)構造図

スクリーンショット 2021-11-16 23.14.16.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

マイアカウントページ-注文

読み込まれている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

マイアカウントページ-ダウンロード

読み込まれている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

マイアカウントページ-住所

読み込まれている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

マイアカウントページ-決済

読み込まれている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

マイアカウントページ-アカウント詳細

読み込まれている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

支払いページ

読み込まれている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

注文完了ページ

読み込まれている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

パスワードを忘れた場合ページ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

パスワードを忘れた場合ページ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


参考記事

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/
``

4
2
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
2