Wordpress + WooCommerce で、カタログ機能を持つサイトを作る

対面販売・契約が必要な高額商品・サービスを扱っているので EC サイトは不要。

しかし集客目的で、多くのバリエーションがある商品の画像や詳細はカタログ的に公開したい。しかも、コードが書けないビジネスオーナー自身で画像・説明・価格・属性などを登録させたい。

そういった場合に、EC エンジンのカート追加・チェックアウトといった機能を無効化して、カタログ機能だけをフレームワークとして使えたら楽チンですよね。

WooCommerce という、Wordpress で EC サイトを作るための言わずと知れた人気プラグインの機能を一部使って、この実装が出来たので、実装の記録です。

信州は乗鞍高原のウェブサイト。

自治体が運営しているのか？不明ですが、乗鞍高原の宿泊施設やアクティビティを紹介しているサイトです。WooCommerce をカタログとして利用しているサンプルです。

それぞれの情報は、WooCommerce の商品カタログ上の商品として登録されているので、例えばアクティビティは、予算や人数、季節、幼児の有無といった属性によってフィルタができるようになっています。

よく考えられましたね〜！

これなら、施設や自治体の職員の方とかにも幅広く機能を解放出来そう〜。

カタログモードとして使うためのプラグインはいくつか出ていますが、よくアップデート、サポートされている印象なのはこちら。

設定はめちゃくちゃシンプルで、サイドバーの「YITH」の設定画面から、以下の全てのチェックを入れておけば OK。

WooCommerce カタログモード設定

商品を登録した状態で商品詳細画面に行くと、「カートに追加」というボタンが消えているのがわかります。

なお、価格を登録している場合、こちらは表示されたままになります。このプラグインの有償版では、価格をマスクしたり、「見積もり」ボタンをつけたり、ということができるようです。

多くの WooCommerce 対応テーマでは、デフォルトで右上にショッピングカートのアイコンが表示されています。

通常の EC だと、「カートの中身を確認する」ためのリンクですね。

Divi カートアイコン

YITH WooCommerce Catalog Mode プラグインでカート機能を無効化すると、カートへは遷移せず、トップページへ遷移するボタンとして機能するようになっていますが、できればこの表示も消したいですね。

Divi テーマを使っている場合、カートアイコンを消すのはめちゃくちゃ簡単でした。

サイドバーの Divi > テーマのオプション > General タブを一番下までスクロール > 「カスタムCSS」に以下を追記。

.et-cart-info { display:none; }

カートアイコンなし

以上！消えて無くなりました〜。

MB blog