【WooCommerce】商品一覧のテンプレート(content-product.php)の構造・カスタマイズ方法

以下の処理が商品数分ループされる。

  1. <li <?php wc_product_class(); ?>>
  2. woocommerce_before_shop_loop_item(フック)
  3. woocommerce_before_shop_loop_item_title(フック)
  4. woocommerce_shop_loop_item_title(フック)
  5. woocommerce_after_shop_loop_item_title(フック)
  6. woocommerce_after_shop_loop_item(フック)
  7. </li>

各詳細のご説明


1: <li <?php wc_product_class(); ?>>

リストタグとwc_product_class(関数)が表示される。

wc_product_class

function wc_product_class( $class = ”, $product_id = null ) {

echo ‘class=”‘ . esc_attr( join( ‘ ‘, wc_get_product_class( $class, $product_id ) ) ) . ‘”‘;

}

商品のクラス名を取得します。wc_product_class()はget_post_class()のクローンなので、WordPress投稿記事のクラス名を取得する内容と同じ仕組みです。

●出力例
<li class=”post-68 product type-product status-publish product_cat-backnumber first instock downloadable shipping-taxable purchasable product-type-simple”>

2: woocommerce_before_shop_loop_item(フック)

このフックには以下の関数が登録されています。

woocommerce_template_loop_product_link_open
商品ページへのリンク開始タグが出力されます。

woocommerce_template_loop_product_link_open

function woocommerce_template_loop_product_link_open() {

global $product;
$link = apply_filters( ‘woocommerce_loop_product_link’, get_the_permalink(), $product );
echo ‘<a href=”‘ . esc_url( $link ) . ‘” class=”woocommerce-LoopProduct-link woocommerce-loop-product__link”>’;

}

●出力例
<a href=”{商品リンクURL}” class=”woocommerce-LoopProduct-link woocommerce-loop-product__link”>

3:woocommerce_before_shop_loop_item_title(フック)

このフックには以下の関数が登録されています。

woocommerce_show_product_loop_sale_flash
セール商品の時のタグが出力されます。

woocommerce_template_loop_product_thumbnail
サムネイルの情報を取得します。

woocommerce_show_product_loop_sale_flash

function woocommerce_show_product_loop_sale_flash() {

wc_get_template( ‘loop/sale-flash.php’ );

}

この関数は単純に’loop/sale-flash.php’ のテンプレートを呼び出すファイルです。’sale-flash.php’には セール時のデザインがカスタマイズできる”apply_filters”のフックが用意されているだけです。デフォルトの出力は以下です。

<span class=”onsale”>SALE!</span>

woocommerce_template_loop_product_thumbnail

function woocommerce_template_loop_product_thumbnail() {

echo woocommerce_get_product_thumbnail();.

}

woocommerce_get_product_thumbnail

function woocommerce_get_product_thumbnail( $size = ‘woocommerce_thumbnail’, $deprecated1 = 0, $deprecated2 = 0 ) {

global $product;
$image_size = apply_filters( ‘single_product_archive_thumbnail_size’, $size );
return $product ? $product->get_image( $image_size ) : ”;

}

get_image

public function get_image( $size = ‘woocommerce_thumbnail’, $attr = array(), $placeholder = true ) {

if ( has_post_thumbnail( $this->get_id() ) ) {

$image = get_the_post_thumbnail( $this->get_id(), $size, $attr );

} elseif ( ( $parent_id = wp_get_post_parent_id( $this->get_id() ) ) && has_post_thumbnail( $parent_id ) ) {

// @phpcs:ignore Squiz.PHP.DisallowMultipleAssignments.Found

$image = get_the_post_thumbnail( $parent_id, $size, $attr );

} elseif ( $placeholder ) {

$image = wc_placeholder_img( $size );

} else {

$image = ”;

}

return apply_filters( ‘woocommerce_product_get_image’, $image, $this, $size, $attr, $placeholder,$image);

}

get_imageはWC_Productクラスのメソッド。格納場所は以下↓
woocommerce/includes/abstracts/abstract-wc-product.php

4:woocommerce_shop_loop_item_title(フック)

このフックには以下の関数が登録されています。

woocommerce_template_loop_product_title(関数)
商品名の表示タグを出力します。

woocommerce_template_loop_product_title

function woocommerce_template_loop_product_title() {

echo ‘<h2 class=”woocommerce-loop-product__title”>’ . get_the_title() . ‘</h2>’;

}

5:woocommerce_after_shop_loop_item_title(フック)

├woocommerce_template_loop_rating(関数)
└woocommerce_template_loop_price(関数)

woocommerce_template_loop_rating

function woocommerce_template_loop_rating() {

wc_get_template( ‘loop/rating.php’ );

}

 

woocommerce_template_loop_price

function woocommerce_template_loop_price() {

wc_get_template( ‘loop/price.php’ );

}

6:woocommerce_after_shop_loop_item(フック)

├woocommerce_template_loop_product_link_close(関数)
└woocommerce_template_loop_add_to_cart(関数)

woocommerce_template_loop_product_link_close

function woocommerce_template_loop_product_link_close() {

echo ‘</a>’;

}

woocommerce_template_loop_add_to_cart

function woocommerce_template_loop_add_to_cart( $args = array() ) {

global $product;

if ( $product ) {

$defaults = array(
‘quantity’ => 1,
‘class’ => implode( ‘ ‘, array_filter( array(
‘button’,
‘product_type_’ . $product->get_type(),
$product->is_purchasable() && $product->is_in_stock() ? ‘add_to_cart_button’ : ”,
$product->supports( ‘ajax_add_to_cart’ ) ? ‘ajax_add_to_cart’ : ”,
) ) ),
‘attributes’ => array(
‘data-product_id’ => $product->get_id(),
‘data-product_sku’ => $product->get_sku(),
‘aria-label’ => $product->add_to_cart_description(),
‘rel’ => ‘nofollow’,
),
);

$args = apply_filters( ‘woocommerce_loop_add_to_cart_args’, wp_parse_args( $args, $defaults ), $product );

if ( isset( $args[‘attributes’][‘aria-label’] ) ) {

$args[‘attributes’][‘aria-label’] = strip_tags( $args[‘attributes’][‘aria-label’] );

}

wc_get_template( ‘loop/add-to-cart.php’, $args );

}

}

7:</li>