2023/01/21

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

shopify

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

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

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

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

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

簡単ですね！早速解説していきます＼(^^)／

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

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

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

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

今回は「お気入り非表示」というタグを商品に付けます。タグの名前は分かればなんでもOKです。

上記のようにタグが付与されればOKです。

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

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

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

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

どこでもいいのですが、添付画像のようにコードを埋め込めばOKです。

埋め込むソースコードは下記になります。

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

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

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

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

• Tweet
• facebook

合わせて読みたい記事

Shopify

• Tweet
• facebook