WooCommerce独自デザイン(テーマ) での作り方について

WooCommerceプラグインを使用して、ECサイトを現在作っています。

カラーミーやMakeshopでECを作成した経験と、MTのECプラグイン利用してECサイトを作っておりましたが、
MTからWPに完全に移行したのがキッカケで、WPでECサイトを作る事になりました。

WP自体まだまだ初心者ですが、ループとタグを呼び出して表示するやり方は
今まで経験してきたシステム構築とさほど違いがなかったので、
WPでのサイト作成(独自テーマ作り)はいくつか問題なくできております。

WooCommerceを導入した独自テーマ作りも、プラグインから発行されるタグを並べて組んでいく、
というシステム構築で問題ない....と思っておりましたが、全然違いました。

ネット上で見つけたやり方は

woocommerce_content()関数を使う
フックを使う

https://docs.artws.info/document/third-party-custom-theme-compatibility/

という2つが基本になっていそうです。

他にもプラグインを使うだとか、置き換えをする、などいくつか見つけましたが、
woocommerce_content()関数を使う、や、置き換えでは柔軟なカスタマイズが出来ないと思われます。

teratail内でも似たような質問を見つけました。
https://teratail.com/questions/27300
関数一覧があるからここから呼び出せるよ、と。
https://docs.woocommerce.com/wc-apidocs/

ここで自分は、
「フックを使う」と「関数一覧」の2方面から色々な記事を読み漁って試みたのですが、
どうしても求めてる要素を読み出す事ができませんでした。フックの使い方や関数の呼び出し方が分かりません。
出てくる記事が英語ばかりなので、理解できてないだけと思いますが...

フックについては使い方ページも見つけたのですが...
https://www.cloudways.com/blog/about-woocommerce-hooks/
分かりません。

以下は、商品一覧を作成しようと思ったコードです。

<?php
  $params = array('post_type' => 'product');
  $wc_query = new WP_Query($params);
?>
<?php if ($wc_query->have_posts()) : ?>
  <?php while ($wc_query->have_posts()) : $wc_query->the_post(); 
    $thumbnail_id = get_post_thumbnail_id();
    $img = wp_get_attachment_image_src( $thumbnail_id , 'large');
  ?>

    /* 商品の名 */
    <?php the_title(); ?>

    /* 商品画像 */
    <img src="<?php echo $img[0]; ?>">

    /* 商品の価格 */
    ？？？？

    /* 商品の所属カテゴリー一覧 */
    <?php do_action( 'woocommerce_product_meta_start' ); ?>
      <?php echo wc_get_product_category_list( $product->get_id(), ', ', '<span class="posted_in">' . _n( 'Category:', 'Categories:', count( $product->get_category_ids() ), 'woocommerce' ) . ' ', '</span>' ); ?>
      <?php echo wc_get_product_tag_list( $product->get_id(), ', ', '<span class="tagged_as">' . _n( 'Tag:', 'Tags:', count( $product->get_tag_ids() ), 'woocommerce' ) . ' ', '</span>' ); ?>
    <?php do_action( 'woocommerce_product_meta_end' ); ?>

  <?php endwhile; ?>
  <?php wp_reset_postdata(); ?>
<?php endif; ?>

'post_type' => 'product'を使えば、Woocamarceで登録した商品が抽出でき、
titleやimgはいつものソースで呼び出す事ができました。

商品が所属しているカテゴリーを表示できるソースはネット上で見つけました。複雑ですね。。
ただこのカテゴリのように、タグで要素を呼び出す事ができると思われますが、価格の呼び出し方が分かりません。
そもそもフックを利用したカスタマイズではないです。

WooCommerceで独自テーマを作った事ある方はどのようにカスタマイズを行っているのでしょうか？
フック？関数呼び出し？一番簡単で分かりやすいカスタマイズ方法があれば教えて頂ければ幸いです。

行動規範の内容に同意します

回答1件

WooCommerceの独自テーマをつくるのであれば、まずは既存のテーマ（WooCommerceに付属してくるサンプルテーマ）をカスタマイズして理解することをおすすめします。
また、WooCommerceはWordPressのシステムを活用したプラグインなので、WordPressの基本的な機能を理解しておくことも重要だと思います。

たとえば、以下の項目はWordPressの機能ですが、WooCommerceで存分に使われている機能です。

テーマ
アクションフック
フィルターフック
カスタム投稿タイプ
カスタム分類（カスタムタクソノミー）
カスタムフィールド

これらを理解した上で、WooCommerce向けのテーマの作り方（ドキュメント）を読むと理解が簡単になるはずです。

たとえば、natsさんが例としてあげている「商品の価格」表示の方法は、サンプルテーマ\wp-content\plugins\woocommerce\templatesのsingle-product.php→content-single-product.phpとたどっていくことで、do_action( 'woocommerce_single_product_summary' );で表示されていることがわかります。

さらに見ていくと「商品の価格」は「カスタムフィールド」機能で保存されていることがわかり、WooCommerceの関数を使用しなくても、（WordPressの標準関数である）get_post_meta関数で直接呼び出せそうに思えてきます。

以上のように、遠回りに思えるかもしれませんが、独自テーマを今後もつくっていくのであれば、このような基本情報を習得することからはじめていくことをおすすめします。

投稿2018/10/03 11:23