Woo Product Slider and Carousel with categoryを使ってみた

カテゴリ別の商品スライドがほしかったのでこのプラグインで対応。

結構色々指定したカルーセルを作ることができました。

参考にした動画がこちら。

基本youtube見ながらするんですけど、せっかちなのでついつい飛ばし見しちゃいます。

f:id:himrr:20171130170230p:plain

インストール後、Product > Product Slider -How It Worksに設置されてます。

まあここにはたいしたことは書いてなかったので

こっちを見ながら実装しました。

[products_slider slide_to_show="5" slide_to_scroll="4" cats="65" autoplay="false" limit="24" dots="false"]

ってかんじですね。

一度に表示するサムネイルの数。

スクロールする数。さっきの例だと5つ表示されて4つスクロールされるので毎回1つ残る感じです。

カテゴリーID。

Product > Categoryから各カテゴリーの編集画面を開くとURLに「tag_ID」とあるんですけど、その直後にある数字がカテゴリーIDです。

自動スクロール。デフォルトではtrueです。私は５個くらいカルーセルを設置していたので各々がびゅんびゅん動いてました。

表示するサムネイルの総数。

今何ページ目、みたいな感じのドットですね。名前がわかりません。デフォルトではtrueです。

左右にスクロールできるよっていう矢印です。こちらもデフォルトではtrueです。

スライダーのスピードです。

woo-product-slider-and-carousel-with-category/assets/jsの下のpublic.jsに記載します。

私もあまり詳しくはないのですが、なんだかiPhone4sまでしか対応してないように見えます。

なので自分で数値とか書き換えないといけないみたいですね。

ちなみにモバイル版だとslide_to_showが1になってます。おどろきます。

すごく重たかったので結局デフォルトのショートコードを使用しました。

[ux_custom_products cat="カテゴリー名"]

で表示させることができます。