ITTI STAFF
BLOG

イッティWEBスタッフの制作ブログ

WooCommerce:商品ページに画像付きで「次の商品」「前の商品」を表示させる方法

WooCommerceに画像付きの次・前のナビゲーションを表示させる方法です。

次の商品、前の商品のリンクを表示させる方法

下記の図のように、アイキャッチ画像付きで「次の商品」「前の商品」のリンクを表示させます。

テンプレート「StoreFront」には標準機能でありますよね。

StoreFrontは使わないので、同じように「次へ」「前へ」のリンクを設置したいと海外サイトを探しましたよ。ループ外でも使えます。

「content-single-product.php」に直接記述してもよいのですが、長いのでモジュール化して呼び出す方がお薦めです。

PHP
<?php
// get next and prev products
// Author: Georgy Bunin (bunin.co.il@gmail.com)
// forked from https://gist.github.com/2176823
function ShowLinkToProduct($post_id, $categories_as_array, $label) {
// get post according post id
$query_args = array( 'post__in' => array($post_id), 'posts_per_page' => 1, 'post_status' => 'publish', 'post_type' => 'product', 'tax_query' => array(
array(
'taxonomy' => 'product_cat',
'field' => 'id',
'terms' => $categories_as_array
)));
$r_single = new WP_Query($query_args);
if ($r_single->have_posts()) {
$r_single->the_post();
global $product;
?>
<ul class="product_list_widget">
<li><a href="<?php the_permalink() ?>" title="<?php echo esc_attr(get_the_title() ? get_the_title() : get_the_ID()); ?>">
<?php if (has_post_thumbnail()) the_post_thumbnail('shop_thumbnail'); else echo '<img src="'. woocommerce_placeholder_img_src() .'" alt="Placeholder" width="'.$woocommerce->get_image_size('shop_thumbnail_image_width').'" height="'.$woocommerce->get_image_size('shop_thumbnail_image_height').'" />'; ?>
<?php echo $label; ?>
<?php if ( get_the_title() ) the_title(); else the_ID(); ?>
</a> <?php echo $product->get_price_html(); ?></li>
</ul>
<?php
wp_reset_query();
}
}
if ( is_singular('product') ) {
global $post;
// get categories
$terms = wp_get_post_terms( $post->ID, 'product_cat' );
foreach ( $terms as $term ) $cats_array[] = $term->term_id;
// get all posts in current categories
$query_args = array('posts_per_page' => -1, 'post_status' => 'publish', 'post_type' => 'product', 'tax_query' => array(
array(
'taxonomy' => 'product_cat',
'field' => 'id',
'terms' => $cats_array
)));
$r = new WP_Query($query_args);
// show next and prev only if we have 3 or more
if ($r->post_count > 2) {
$prev_product_id = -1;
$next_product_id = -1;
$found_product = false;
$i = 0;
$current_product_index = $i;
$current_product_id = get_the_ID();
if ($r->have_posts()) {
while ($r->have_posts()) {
$r->the_post();
$current_id = get_the_ID();
if ($current_id == $current_product_id) {
$found_product = true;
$current_product_index = $i;
}
$is_first = ($current_product_index == $first_product_index);
if ($is_first) {
$prev_product_id = get_the_ID(); // if product is first then 'prev' = last product
} else {
if (!$found_product && $current_id != $current_product_id) {
$prev_product_id = get_the_ID();
}
}
if ($i == 0) { // if product is last then 'next' = first product
$next_product_id = get_the_ID();
}
if ($found_product && $i == $current_product_index + 1) {
$next_product_id = get_the_ID();
}
$i++;
}
if ($prev_product_id != -1) { ShowLinkToProduct($prev_product_id, $cats_array, "next: "); }
if ($next_product_id != -1) { ShowLinkToProduct($next_product_id, $cats_array, "prev: "); }
}
wp_reset_query();
}
}
?>

出力されるHTMLの構造は下記のようになります。
分かりやすいように「次へ」だけの構造にしています。

HTML
<ul class="product_list_widget">
  <li>
    <a>
      <img>
      next: キャップ
    </a>
    <del> //割引の場合表示される
        <span class="woocommerce-Price-amount amount">
        <span class="woocommerce-Price-currencySymbol">¥</span>
        19
        </span>
    </del>
    <ins>
        <span class="woocommerce-Price-amount amount">
        <span class="woocommerce-Price-currencySymbol">¥</span>
        17
        </span>
    </ins>
    <small class="woocommerce-price-suffix">(税込)</small>
  </li>
</ul>

HTMLを適宜変更したり、CSSで装飾するとOKです。

次へ・前へリンクを表示させるメリット

シングルページに「次へ」「前へ」を表示させるメリットしては下記があります。

  1. 若干、回遊率が上がります。
  2. Googleのbotがインデックスしやすくなります。

ページのインデックスが遅い場合に「次へ」「前へ」のリンクを設置すると、Googleのインデックスが早くなります。

商品のアップロードが多いECサイトの場合は「次へ」「前へ」のリンクはお薦めです。

新しい記事

東京のWEB制作会社イッティ