CSSとPHPフックでECサイトを魅力的に：WooCommerceカスタマイズガイド

![スクリーンショット 2025-01-30 14.39.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3637864/35352b64-bde7-aef6-222b-1c439ea621b5.png)

## WooCommerceでの製品紹介ページ構築ポイント

WooCommerceは標準機能だけでも十分に使いやすいECプラットフォームですが、**コードによるカスタマイズ**を行うことでデザインや機能をさらに強化できます。ここでは、CSSやPHPフックを組み合わせて製品紹介ページを柔軟に拡張するためのポイントを解説します。

---

### 1. CSSで色やフォントを調整

WooCommerceの標準テンプレートを自社ブランドに合わせたい場合、カスタムCSSを追加して見た目を大きく変えることができます。

```css
/* Productタイトルの色を変更 */
.woocommerce div.product .product_title {
  color: #FF6F61;
  font-size: 1.8rem;
}

/* 価格表示のフォントを大きくする */
.woocommerce div.product p.price {
  font-size: 1.5rem;
  font-weight: bold;
}

/* ボタンの背景色を変更 */
.woocommerce button.button.alt {
  background-color: #0066CC;
  border-color: #0066CC;
  color: #fff;
}
```

- `functions.php`内の `wp_enqueue_style` を利用して、子テーマやMUプラグイン内で読み込むのが一般的です。  
- 同じCSSを何度も書き換えずに済むよう、変数を使ったSassやLessの活用も検討すると管理がしやすくなります。

---

### 2. PHPフックでレイアウトや機能を追加

WooCommerceには多数の**アクションフック**と**フィルターフック**が用意されており、レイアウトや機能の拡張が容易です。

```php
// 商品タイトルの前にカスタム文言を追加する例
add_action('woocommerce_before_single_product_summary', 'add_custom_heading');

function add_custom_heading() {
    echo '<h2 class="custom-heading">スペシャルセール中！</h2>';
}
```

```php
// 価格のテキストをフィルターで変更する例
add_filter('woocommerce_get_price_html', 'change_price_html', 10, 2);

function change_price_html($price, $product) {
    return '<span class="custom-price">' . $price . '（税込）</span>';
}
```

#### フックカスタマイズの注意点
- カスタムフックがテーマの更新・WooCommerceのバージョンアップで影響を受けないように、**子テーマ**（Child Theme）や**MUプラグイン**で記述すると安全です。
- アクションの順序や優先度を調整することで、表示位置を細かく制御できます。

---

### 3. ステージング環境でのテスト

大幅なコード修正や複雑なカスタマイズを行う際は、本番サイトに直接反映する前に**ステージング環境**でテストを行いましょう。

```mermaid
flowchart TD
    A[開発環境] --> B[ステージング環境]
    B --> C[本番環境]
    C --> D[ユーザーアクセス]
```

- **ステージング環境**では本番と同じデータ構成を保ちつつ、自由に変更をテストできます。  
- MUプラグインとして機能を追加する場合も、ステージングで動作確認をしてから本番へデプロイすることで、万が一のリスクを最小限に抑えられます。

---

### まとめ

WooCommerceの標準機能でも十分にECサイトは構築できますが、**CSSやPHPフックを使ったカスタマイズ**を行うことで、見た目や機能をより自社ブランドに適した形へ拡張できます。大幅な改修を行う場合は、ステージング環境やMUプラグインを活用してリスクを低減するのがポイントです。

:rocket: *ぜひ自分のサイトでもコードカスタマイズに挑戦し、独自性の高い魅力的なECサイトを構築してみましょう！*

---
## **💖 ご支援いただけませんか？**

このブログでは、高品質な情報提供と学習活動を通じて、読者の皆さまのお役に立つことを目指しています。もしこの記事が役立ったと感じていただけましたら、ご支援いただけると幸いです！

---

### **暗号資産による寄付**
以下のウォレットアドレスをご利用ください。**重要：Ethereum (ETH)、BNB Chain (BNB)、Polygon (MATIC)、Avalanche (AVAX) は、全て以下の同一アドレスを使用しますが、送金ネットワークの選択を間違えると資金が失われます！** 送金時には、**絶対に**使用するネットワーク（例: ERC-20、BEP-20、Polygon、Avalanche C-Chain）を**必ず**正しく選択してください。

- **Ethereum (ETH)**  
  `0x5CDA2F68f59F641B00aD172475c3d5fC10321174`  
  （ネットワーク: ERC-20）

- **BNB Chain (BNB)**  
  `0x5CDA2F68f59F641B00aD172475c3d5fC10321174`  
  （ネットワーク: BEP-20）

- **Polygon (MATIC)**  
  `0x5CDA2F68f59F641B00aD172475c3d5fC10321174`  
  （ネットワーク: Polygon）

- **Avalanche (AVAX)**  
  `0x5CDA2F68f59F641B00aD172475c3d5fC10321174`  
  （ネットワーク: Avalanche C-Chain）

- **Solana (SOL)**  
  `EnPFbqDbF67rU9mAPvfgh4YYtncJNbFQ9NLQ5R6z5S2f`

- **Stellar (XLM)**  
  アドレス: `GCSMWCACKVEZ737GZAV4AJRFL52ZZKVQ7M3B3KYY64JJGOAO2GDYKABO`  
  メモ: 必要に応じて入力してください。

- **Ripple (XRP)**  
  アドレス: `r1s4EASr3zQRrfpDA3ptTahezBhGo2hhN`  
  タグ: 必要に応じて入力してください。

- **Cardano (ADA)**  
  `addr1q8heq6ddw8rwlqa5hqlucnfk36arah9tzc8ajxvu83870h7lrre25wzq9yemex857we56cm0xu8tmxqvm8nykmtgsjdqavdpv7`

- **Dogecoin (DOGE)**  
  `DRFZ9JhAk3DTtu1tV85cawekWNrm1vKm3H`

---

### **資金用途**
寄付金は以下の目的で活用させていただきます：

1. サーバー維持費やデザインツール購入  
2. 学習活動（オンラインコース受講・書籍購入）  
3. 読者向け無料コンテンツ制作  

ご協力いただいた皆さまには心より感謝申し上げます！ 🙏

---

### **補足情報**
- **Ethereum (ETH)、BNB Chain (BNB)、Polygon (MATIC)、Avalanche (AVAX)について**  
  上記4つのネットワークは**同じウォレットアドレス**（`0x5CDA2F68f59F641B00aD172475c3d5fC10321174`）を使用します。ただし、送金時には、**絶対に**使用するネットワーク（例: ERC-20、BEP-20、Polygon、Avalanche C-Chain）を**必ず**正しく選択してください。

- USDCやUSDTなどのステーブルコインも、対応するネットワーク経由であれば送金可能です。ただし、**送金先のネットワークと選択するネットワークが一致していることを必ず確認してください。**

- 初回送金時には少額でテスト送金することをおすすめします。

---