WordPressのOxygen BuilderでWooCommerceの商品・一覧・カート画面をカスタマイズする手順

Oxygen Builder で WooCommerce の画面を作り変えるには、商品ページと商品一覧は Oxygen のテンプレートで組み、カートと決済は WooCommerce の標準ページを残したまま見た目を整え、細かな出力の変更は WooCommerce のフックで行う、という役割分担にすると壊れにくくなります。この記事では、その分担の考え方と、テンプレートの作り方、PHP コードの置き場所、表示が崩れたときの確認方法を説明します。

始める前に知っておきたいOxygenの特徴

Oxygen が他のページビルダーと大きく違うのは、有効にすると WordPress のテーマを使わずにサイトを描画する点です（従来の 4 系の場合）。そのため、次の2つが通常のテーマとは異なります。

• テーマの functions.php が読み込まれない：子テーマに書いた PHP は動きません。コードはプラグイン側に置きます。
• テーマ内の woocommerce フォルダによるテンプレート上書きが効かない：WooCommerce は通常、テーマの woocommerce/ フォルダにあるファイルで画面を上書きできますが、テーマを使わない Oxygen 環境ではこの方法は前提にできません。

また、Oxygen には従来の 4 系と、仕組みを作り直した新しい 6 系があり、管理画面のメニューや WooCommerce 用要素の名前・数が異なります（2026年10月現在）。以下の手順は考え方を中心に書いているので、画面の表記はお使いの版に合わせて読み替えてください。

作業前にはデータベースとファイルのバックアップを取り、注文が入る本番サイトではなくステージング環境で試してから反映します。決済画面の不具合は売上に直結するためです。

ステップ1：どの画面を何で作るかを決める

WooCommerce の主な画面と、おすすめの作り方は次のとおりです。

カートと決済まで Oxygen の要素で組み直すことも不可能ではありませんが、決済サービスや配送料計算の拡張機能は WooCommerce 標準の画面を前提に作られていることが多く、独自の画面にすると決済ボタンが出ない、といった問題が起きやすくなります。

ステップ2：商品詳細のテンプレートを作る

Oxygen の「テンプレート」画面で新しいテンプレートを作り、適用先として「商品（Products）」の個別ページを指定します。サイト共通のヘッダー・フッターを持つ親テンプレートがある場合は、それを継承させて中身の部分だけを作ると管理が楽です。

編集画面では、要素の追加パネルに WooCommerce 用の要素がまとまっています。商品タイトル、価格、画像ギャラリー、カートに入れるボタン、説明タブ、関連商品などを好きな位置に配置します。版によっては、WooCommerce 標準の商品ページ一式をまとめて出す要素もあり、まずはそれを置いて全体が動くことを確認してから、個別の要素に分解していくと失敗が少なくなります。

テンプレートの編集中は、どの商品で表示を確認するかを選べます。ここで選ぶ商品は、次のように条件が違うものを順に試してください。

• 単純な商品と、色やサイズを選ぶバリエーション商品
• セール価格がある商品と、ない商品
• 在庫切れの商品

バリエーション商品では選択欄とカートボタンが連動して動く必要があり、ここが崩れやすい箇所です。保存後はログアウトした状態でも実際の商品ページを開き、カートに入れるところまで操作して確かめます。

ステップ3：商品一覧（ショップ・カテゴリー）のテンプレートを作る

一覧用のテンプレートは、適用先として商品の一覧（ショップページ）や商品カテゴリーのアーカイブを指定します。一覧部分には WooCommerce 用の商品一覧要素を使うか、Oxygen の繰り返し要素で商品を並べ、各カードに商品画像・タイトル・価格・ボタンを配置します。

一覧で気をつけたいのは、並び替えとページ送りです。WooCommerce の並び替え（価格順・新着順など）やページ送りは、メインクエリをもとに動きます。繰り返し要素で独自に商品を取得すると、並び替えを選んでも結果が変わらない、2ページ目が同じ内容になる、といった症状が出ます。標準の動きを残したい一覧では、メインクエリを使う設定になっているかを確認してください。

ステップ4：カート・決済画面は標準のまま見た目を整える

カートと決済のページは、WooCommerce が作った固定ページをそのまま使い、Oxygen の親テンプレートでヘッダーやフッターをそろえる形にします。ページの中身は Oxygen で作り直さず、標準の出力に CSS を当てて見た目を合わせます。

ここで確認しておきたいのが、カート・決済ページが「ブロック」で作られているか、「ショートコード」（[woocommerce_cart]・[woocommerce_checkout]）で作られているかです。比較的新しい WooCommerce では、新規に作られたストアのカートと決済はブロック版が標準になっています。ブロック版とショートコード版では HTML の構造もクラス名も違い、使えるフックも異なるため、参考にした CSS やコードが効かない原因になります。

どちらを使うかは、導入している決済・配送プラグインがどちらに対応しているかで決めます。ショートコード版に戻す場合は、該当の固定ページを編集してブロックを外し、ショートコードを入れて保存します。切り替えたら、テスト注文で決済手段ごとに注文完了まで進めてください。

ステップ5：出力の変更はフックで行う（コードの置き場所）

「カートボタンの下に配送の注意書きを出したい」「タブの名前を変えたい」といった変更は、テンプレートファイルを書き換えるより、WooCommerce のフックで行うほうがアップデートに強くなります。前述のとおりテーマの functions.php は使えないため、Code Snippets のようなコード管理プラグインか、自作の小さなプラグインに書きます。

<?php
// カートに入れるボタンの直後に注意書きを表示する
add_action( 'woocommerce_after_add_to_cart_button', function () {
	echo '<p class="my-shipping-note">' . esc_html__( '平日14時までのご注文は当日発送します。', 'my-shop' ) . '</p>';
} );

// 商品タブの「説明」の見出しを変更し、「レビュー」タブを非表示にする
add_filter( 'woocommerce_product_tabs', function ( $tabs ) {
	if ( isset( $tabs['description'] ) ) {
		$tabs['description']['title'] = __( '商品の詳細', 'my-shop' );
	}
	unset( $tabs['reviews'] );
	return $tabs;
} );

ただし、フックが実行されるかどうかは、Oxygen の要素が WooCommerce 標準の出力処理を通っているかに左右されます。商品ページ一式をまとめて出す要素や、カートボタン・タブの要素は標準の処理を使っていることが多い一方、独自に値だけを取り出して表示する要素では、フックに追加した内容が出ないことがあります。コードを入れても表示されない場合は、まず WooCommerce 標準の要素に置き換えて表示されるかを確かめてください。

表示が崩れたときの確認ポイント

1. CSS の再生成：Oxygen は生成した CSS をキャッシュするため、設定画面から CSS キャッシュを作り直し、あわせてキャッシュプラグインや CDN のキャッシュも削除します。
2. テンプレートの適用先と優先度：同じ商品に複数のテンプレートが当たっていないかを確認し、優先度を調整します。
3. ブロック版とショートコード版の違い：カート・決済で CSS が効かない場合は、ステップ4の構成を見直します。
4. プラグインの競合：WooCommerce の拡張機能を一時的に止め、Oxygen と WooCommerce だけで再現するかを試します。
5. WooCommerce のステータス：「WooCommerce」→「ステータス」で、PHP のバージョンやテンプレートの状態に警告が出ていないかを見ます。

まとめ

• Oxygen はテーマを使わずに描画するため、子テーマの functions.php やテーマ内のテンプレート上書きは使えません。コードはプラグイン側に置きます。
• 商品詳細と一覧は Oxygen のテンプレートで作り、カート・決済・マイアカウントは標準ページのまま見た目を整える分担が安全です。
• カート・決済がブロック版かショートコード版かを最初に確認し、決済プラグインの対応状況に合わせます。
• 文言や項目の追加はフックで行い、効かない場合は要素が標準の出力処理を通っているかを確かめます。
• 作業はバックアップを取ったうえでステージング環境で行い、テスト注文で動作を確認してから本番に反映してください。

• Oxygen Builderの使い方ガイド
• WooCommerceのチェックアウト画面をカスタマイズする方法