「完売中」の商品の「今すぐ購入する」ボタンを非表示にしたい

[uf2]

テーマ：DAWN　15.0.0

在庫が０の商品は完売中札のしたに表示される「今すぐ購入」の表示をなくしたいです。

どこのコードファイルを編集すればいいのかわからないため、どなたかわかる方ご教示いただけますと幸いです。

[Jizo_Inagaki]

方法は複数考えられますが、liquidやJavaScriptの読み書きができない場合はCSS による簡易対応が検討できるかなと思います。

具体的には、テーマエディタで該当セクションに移動し、カスタムCSSに以下を入力するなどです。

.product-form__submit[disabled] + div { display: none; }

入念な確認は行なっていないため、不足や問題ある場合は適宜書き換えてください。

参考:

https://developer.mozilla.org/ja/docs/Web/CSS/Next-sibling_combinator

以上ですが、CSSもよくわからない場合はエキスパートやパートナーに依頼されることをお勧めします。

[bluetree · Accepted solution]

もしコード編集で対応するのであれば、DAWNテーマならbuy-buttons.liquidを編集することで解消します🐦

snippetsディレクトリ配下のbuy-buttons.liquidを開き、payment_buttonを見つけます。そして編集します。

ここでは直前にある「カートに追加する」ボタンの条件に合わせています。

Before:

  {%- if show_dynamic_checkout -%}
    {{ form | payment_button }}
  {%- endif -%}

After:

{%- if show_dynamic_checkout -%}
  {%- if product.selected_or_first_available_variant != null -%}
    {%- if product.selected_or_first_available_variant.available -%}
      {%- unless quantity_rule_soldout -%}
        {{ form | payment_button }}
      {%- endunless -%}
    {%- endif -%}
  {%- endif -%}
{%- endif -%}

これで選択されている種類の在庫がない場合は「今すぐ購入」ボタンが非表示になるかと思います。

ref: payment_button | Liquid  

📝編集前にバックアップをとっておくことをオススメします。

[uf2]

ご回答いただきありがとうございます。

ご教示いただいたように修正したところ無事完売時のみ購入ボタンを非表示にすることができました…！

この度はご丁寧にありがとうございました！