かんろぐ Written by kan

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

Shopify

PR ※当サイトではアフィリエイト広告を利用しています


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

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

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

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

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

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

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

Shopifyのカスタマイズ・構築もお気軽に無料相談から受け付けてます(`・ω・)ゞ
»Shopifyの構築から運用まで担当いたします【お気軽に無料相談から】

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 %}

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

難しいようでしたら、Shopifyのカスタマイズ・構築もお気軽に無料相談から受け付けてます(`・ω・)ゞ
»Shopifyの構築から運用まで担当いたします【お気軽に無料相談から】

Shopifyの参考記事

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

この記事を書いた人
かんろぐ/プロフィールアイコン
かん
未経験からWeb制作会社へ転職 | Webの楽しさや転職のあれこれを発信 | 転職サポート「CodeChange」主催 / 転職成功15名超 | WordPress・Shopify | CodeBegin転職講師 | マナブさん弟子 | カオマンガイとサウナ | ブロガー | ●かんろぐ運営/月間7,600PV達成 |

合わせて読みたい記事