woocommerce 商品詳細ページ LightBox→スライド表示 - Yellow Monkey Design（イエローモンキーデザイン）

どーも！イエローモンキーデザインのまるおです！先日、久々に、woocommerceにて通販サイトの作成をしましたので、その時の備忘録としてですが、、、、。woocommerceは、すべてが、簡単に使えてかなり優れていますね！という印象です、、、、。

今回はタイトル通り、woocommerceの商品詳細ページの画像をライトボックスに変更する手順のご紹介をしたいと思います。

ググってみると、グックつけたり、ファンクションをいじって対応はできるみたいですが、、、。

対象サイトでは、もともとスライド画像を使っておりまして、slickを使っておりましたので、そちらをうまくいれこんでいく方針を考えました！
slickの使い方は、『slick』でググっていただければ、かなり細かく説明がありますので、そちらをご参照ください。

方向さえ変えて仕舞えば、結構簡単でして、まずは、プラグインのファイルを直接いじってしまうか、こテーマでいじるかはご自由ですが、、、、。

詳細ページのファイルは、「prodact-image.php」ですが、もともとの

<div class="images">
	<?php
		if ( has_post_thumbnail() ) {
			$attachment_count = count( $product->get_gallery_attachment_ids() );
			$gallery          = $attachment_count > 0 ? '[product-gallery]' : '';
			$props            = wc_get_product_attachment_props( get_post_thumbnail_id(), $post );
			$image            = get_the_post_thumbnail( $post->ID, apply_filters( 'single_product_large_thumbnail_size', 'shop_single' ), array(
				'title'	 => $props['title'],
				'alt'    => $props['alt'],
			) );
			echo $attachment_count;
			echo $image;
			echo apply_filters(
				'woocommerce_single_product_image_html',
				sprintf(
					'<a href="%s" itemprop="image" class="woocommerce-main-image zoom" title="%s" data-rel="prettyPhoto%s">%s</a>',
					esc_url( $props['url'] ),
					esc_attr( $props['caption'] ),
					$gallery,
					$image
				),
				$post->ID
			);
		} else {
			echo apply_filters( 'woocommerce_single_product_image_html', sprintf( '<img src="%s" alt="%s" />', wc_placeholder_img_src(), __( 'Placeholder', 'woocommerce' ) ), $post->ID );
		}

		do_action( 'woocommerce_product_thumbnails' );
	?>
</div>

をこのように変更すれば、簡単にスライド表示なります。

if ( ! defined( 'ABSPATH' ) ) {
	exit;
}

global $post, $product;
?>
<div class="images">
<ul class="slider">
<?php
$attachment_count = count( $product->get_gallery_attachment_ids() );
$image1 = $product->get_gallery_attachment_ids();
?>
<?php
$myAry = $image1;
foreach ($myAry as $val) {
echo "<li>";
    echo wp_get_attachment_image($val,full);
    echo "</li>";
}
?>
</ul>

	
</div>

これは、あくまでも、slickを使用している場合ですので、ご自分の環境に合わせてみてください。

あくまでも１例ですので、、、、。

ご質問は、まるおまで！

woocommerce,slick,woocommerce商品ページ,woocommerce商品ページスライド,woocommerce商品詳細ページ,woocommerce商品詳細ページスライド,WORDPRESS, いちゃキャバ, ウェブサイト, おっぱぶ, キャバ, キャバクラ, キャバ嬢, セクキャバ, デリヘル, ナイトワーク, ホームページ, ホスト, ヨガサイト, ワードプレス, 予約システム, 作成, 新宿, 東京, 水商売, 通販サイト, 風俗, 風俗嬢

関連