WooCommerceはフックいっぱいあるので編集に戸惑うことが多いかと思います。
この記事では「WooCommerceのアーカイブページの編集方法」を紹介していきます。
このアーカイブページは、ショップページ、カテゴリーページ、タグページと同じです。
前提：woocommerceプラグインをインストール、有効化して子テーマを編集している状態
編集方法
使っている子テーマのfunctions.phpにadd_actionやremove_actionをかけていきます。
こんな感じ
デフォルト：add_action(‘フック’, ‘phpファンクション’);
削除：remove_action(‘フック’, ‘phpファンクション’);
カスタム：add_action(‘フック’, ‘phpファンクション’);
function phpファンクション(){
echo 'Hello World';
}
例：
デフォルト：add_action(‘woocommerce_before_main_content’, ‘woocommerce_output_content_wrapper’, 10);
削除：remove_action(‘woocommerce_before_main_content’, ‘woocommerce_output_content_wrapper’, 10);
カスタム：add_action(‘woocommerce_before_main_content’, ‘sample_action’);
function sample_action(){
echo 'Hello World';
}
どこに何のフックがあるのか？
場所毎にどのフックを編集すればいいのかわかりにくいので画像と表を作りました。
数字を振っているので、下の番号と照らし合わせて編集してみてください
以下のデフォルトのadd_actionをremove_actionにしたら消すことが出来ます
①woocommerce_before_main_content
//デフォルト：
add_action( 'woocommerce_before_main_content', 'woocommerce_output_content_wrapper', 10 );
add_action( 'woocommerce_before_main_content', 'woocommerce_breadcrumb', 20 );
//カスタム：
add_action( 'woocommerce_before_main_content', ‘customAction', 15 );
function customAction() {
echo 'Hello World';
}②woocommerce_archive_description
//デフォルト：
add_action( 'woocommerce_archive_description', 'woocommerce_taxonomy_archive_description', 10 );
add_action( 'woocommerce_archive_description', 'woocommerce_product_archive_description', 10 );
//カスタム：
add_action( 'woocommerce_archive_description', 'customAction', 15 );
function customAction() {
echo 'Hello World';
}③woocommerce_before_shop_loop
//デフォルト：
add_action( 'woocommerce_before_shop_loop', 'wc_print_notices', 10 );
add_action( 'woocommerce_before_shop_loop', 'woocommerce_result_count', 20 );
add_action( 'woocommerce_before_shop_loop', 'woocommerce_catalog_ordering', 30 );
//カスタム：
add_action( 'woocommerce_before_shop_loop', 'customAction', 15 );
function customAction() {
echo 'Hello World';
}④woocommerce_before_shop_loop_item
//デフォルト：
add_action( 'woocommerce_before_shop_loop_item', 'woocommerce_template_loop_product_link_open', 10 );
//カスタム：
add_action( 'woocommerce_before_shop_loop_item', 'customAction', 15 );
function customAction() {
echo 'Hello World';
}⑤woocommerce_before_shop_loop_item_title
//デフォルト：
add_action( 'woocommerce_before_shop_loop_item_title', 'woocommerce_show_product_loop_sale_flash', 10
add_action( 'woocommerce_before_shop_loop_item_title', 'woocommerce_template_loop_product_thumbnail', 10 );
//カスタム：
add_action( 'woocommerce_before_shop_loop_item_title', 'customAction', 15 );
function customAction() {
echo 'Hello World';
}⑥woocommerce_shop_loop_item_title
//デフォルト：
add_action( 'woocommerce_shop_loop_item_title', 'woocommerce_template_loop_product_title', 10 );
//カスタム：
add_action( 'woocommerce_shop_loop_item_title', 'customAction', 15 );
function customAction() {
echo 'Hello World';
}⑦woocommerce_after_shop_loop_item_title
//デフォルト：
add_action( 'woocommerce_after_shop_loop_item_title', 'woocommerce_template_loop_price', 10 );
add_action( 'woocommerce_after_shop_loop_item_title', 'woocommerce_template_loop_rating', 5 );
//カスタム：
add_action( 'woocommerce_after_shop_loop_item_title', 'customAction', 15 );
function customAction() {
echo 'Hello World';
}⑧woocommerce_after_shop_loop_item
//デフォルト：
add_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_product_link_close', 5 );
add_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart', 10 );
//カスタム：
add_action( 'woocommerce_after_shop_loop_item', 'customAction', 15 );
function customAction() {
echo 'Hello World';
}⑨woocommerce_after_shop_loop
//デフォルト：
add_action( 'woocommerce_after_shop_loop', 'woocommerce_pagination', 10 );
//カスタム：
add_action( 'woocommerce_after_shop_loop', 'customAction', 15 );
function customAction() {
echo 'Hello World';
}⑩woocommerce_after_main_content
//デフォルト：
add_action( 'woocommerce_after_main_content', 'woocommerce_output_content_wrapper_end', 10 );
//カスタム：
add_action( 'woocommerce_after_main_content', 'customAction', 15 );
function customAction() {
echo 'Hello World';
}使い方の例：商品一覧の上にピックアップ商品を表示したい時
add_action( 'woocommerce_before_main_content', ‘pickup', 15 );
function pickup() {
if(is_front_page()) {
echo do_shortcode('[featured_products per_page="4" columns="4"]');
}
}＊Woocommerceのショートコードで表示しています。ショートコード はまた別の記事で紹介しますね
こんな感じでアーカイブページの好きな場所にHTMLを入れたり、ショートコードを入れたりできます^ ^
以上です〜
参考：WooCommerce Hooks: Actions and filters
Woocommerce Docs
Woocommerce Pages