かんろぐ Written by kan

【Shopify】Wishlistで特定の商品のウィッシュリストボタンを非表示にする方法

shopify

人気記事【無料サポート付】サーバー開設からWordPressの始め方をサポート


「ShopifyのWishlistで特定の商品にはお気に入りボタンを外したいなぁ。何か良い方法ないかなぁ。だれかお気に入りボタンを非表示にする方法を教えて下さい」

Wishlistを導入する際に、必ずしも全ての商品に対してお気に入りボタンを表示したいというわけではありません。

  • 予約商品
  • 期間限定商品
  • 卸専用の割引商品

などなど。たくさんあると思いますが、お気に入りボタンを非表示したい時は結構あります。

方法として、下記のとおりでやれば解決できます。

「非表示にしたい商品にタグを付けて、その特定のタグに対して「display:none;」をするという流れです。」

簡単ですね!早速解説していきます\(^^)/

Wishlistで特定の商品を非表示にする方法

まずは、下記の手順で行っていきましょう。

非表示にしたい商品にタグを付ける

まずは、商品にタグを付けていきましょう。タグは商品ページで付与することができます。

今回は「お気入り非表示」というタグを商品に付けます。タグの名前は分かればなんでもOKです。
【Shopify】Wishlistで特定の商品のウィッシュリストボタンを非表示にする方法
上記のようにタグが付与されればOKです。

お気に入りボタンを非表示にするCSS

お気に入りボタンのソースコードは決まっているので、下記のソースコードを特定の場所に埋め込めば問題なさそうです。

.wishlisthero-product-page-button-container{
            display: none !important;
        }

Product.meta.liquidのカート周辺に追加

どこでもいいのですが、添付画像のようにコードを埋め込めばOKです。
【Shopify】Wishlistで特定の商品のウィッシュリストボタンを非表示にする方法
埋め込むソースコードは下記になります。

product-meta.liquid

製品ページ系のファイルですね。「sections/product-template.liquid」なども該当するかなと思います。


{% if product.tags contains "お気入り非表示"  %}
        <style type="text/css">
        .wishlisthero-product-page-button-container{
            display: none !important;
        }
      </style>
{% endif %}

タグの説明は省きますが、「お気入り非表示」というタグを持っている場合は、ボタンを非表示にする。
それ以外は、ボタンを表示させますよーってことになります。

他にも複数付けたい場合は下記の通りです。
新しいタグを付与することで、いろいろなバリエーションを作れます。


{% if product.tags contains "お気入り非表示" or product.tags contains "ここにタグ名が入る" %}
        <style type="text/css">
        .wishlisthero-product-page-button-container{
            display: none !important;
        }
      </style>
{% endif %}

このようにすれば、タグで使い分けることができれば、色々なカスタマイズができそうです。簡単ではありますが、普段から使わないのでサクッと使えるようにブクマしておきましょう。

参考になったらぜひリツイートしてくれると嬉しいです。
リツイートする

この記事がイイなと思ったらシェアお願いします\(^^)/

合わせて読みたい記事