ซ่อนปุ่ม “เพิ่มลงในตะกร้าสินค้า”

คุณสามารถซ่อนปุ่มเพิ่มลงในตะกร้าสินค้าบนหน้าร้านของคุณและเปิดเผยอีกครั้งในอนาคตได้

ธีมที่แบ่งส่วนและธีมที่ไม่แบ่งส่วน

Sectioned
  1. ในส่วนผู้ดูแล Shopify ให้ไปที่ร้านค้าออนไลน์ > ธีม
  2. ค้นหาธีมที่คุณต้องการแก้ไข แล้วคลิกปุ่ม เพื่อเปิดเมนูดำเนินการ จากนั้นคลิก แก้ไขโค้ด
  3. ในไดเรกทอรีส่วน ให้คลิกเพื่อเปิดไฟล์ product-template.liquid ของคุณ ค้นหาโค้ด HTML สำหรับปุ่มเพิ่มลงในตะกร้าสินค้า คุณสามารถเริ่มต้นด้วยการค้นหาคำว่าตะกร้าสินค้าได้

โค้ดสำหรับปุ่มเพิ่มลงในตะกร้าสินค้าจะแตกต่างกันไปตามธีม ค้นหาแท็ก <input> หรือ <button> ที่มีข้อความ Add to cart AddToCart หรือ add-to-cart

ในธีม Debut โค้ดสำหรับปุ่มเพิ่มลงในตะกร้าสินค้าจะมีลักษณะดังนี้:

<button type="submit" name="add" id="AddToCart-{{ section.id }}" {% unless current_variant.available %}disabled="disabled"{% endunless %} class="btn product-form__cart-submit{% if product.options.size == 1 and product.variants[0].title == 'Default Title' %} product-form__cart-submit--small{% endif %}">
  <span id="AddToCartText-{{ section.id }}">
    {% unless current_variant.available %}
      {{ 'products.product.sold_out' | t }}
    {% else %}
      {{ 'products.product.add_to_cart' | t }}
    {% endunless %}
  </span>
</button>
  1. เมื่อคุณหาโค้ดพบแล้ว ให้นำโค้ดดังกล่าวไปใส่ไว้ในแท็ก Liquid {% comment %} และ {% endcomment %} การทำเช่นนี้จะทำให้โค้ดหยุดแสดงบนร้านค้าของคุณ แต่คุณสามารถเพิ่มกลับเข้าไปใหม่ได้อย่างง่ายดายหากคุณต้องการเปลี่ยนเทมเพลตใหม่ในภายหลัง

จากตัวอย่างข้างต้น รหัสใหม่จะมีลักษณะดังนี้:

{% comment %}
<button type="submit" name="add" id="AddToCart-{{ section.id }}" {% unless current_variant.available %}disabled="disabled"{% endunless %} class="btn product-form__cart-submit{% if product.options.size == 1 and product.variants[0].title == 'Default Title' %} product-form__cart-submit--small{% endif %}">
  <span id="AddToCartText-{{ section.id }}">
    {% unless current_variant.available %}
      {{ 'products.product.sold_out' | t }}
    {% else %}
      {{ 'products.product.add_to_cart' | t }}
    {% endunless %}
  </span>
</button>
{% endcomment %}
  1. คลิกบันทึกเพื่อยืนยันการเปลี่ยนแปลงของคุณ

เมื่อคุณพร้อมที่จะแสดงปุ่มเพิ่มลงในตะกร้าสินค้าของคุณอีกครั้ง ให้กลับไปยังไฟล์ product-template.liquid ในหน้าแก้ไข HTML/CSS จากนั้นลบแท็ก {% comment %} และ {% endcomment %} แล้วคลิกที่บันทึก

Non-sectioned
  1. ในส่วนผู้ดูแล Shopify ให้ไปที่ร้านค้าออนไลน์ > ธีม
  2. ค้นหาธีมที่คุณต้องการแก้ไข แล้วคลิกปุ่ม เพื่อเปิดเมนูดำเนินการ จากนั้นคลิก แก้ไขโค้ด
  3. ในไดเรกทอรีเทมเพลต ให้คลิกเพื่อเปิดไฟล์ product.liquid ค้นหาโค้ด HTML สำหรับปุ่มเพิ่มลงในตะกร้าสินค้า คุณสามารถเริ่มต้นด้วยการค้นหาคำว่าตะกร้าสินค้าได้

โค้ดสำหรับปุ่มเพิ่มลงในตะกร้าสินค้าจะแตกต่างกันไปในแต่ละธีม ค้นหาแท็ก <input> หรือ <button> ที่มีข้อความเช่น Add to cart AddToCart หรือ add-to-cart

ในธีม Minimal โค้ดของปุ่มเพิ่มลงในตะกร้าสินค้าจะมีลักษณะดังนี้:

<button type="submit" name="add" id="AddToCart" class="btn">
  <span id="AddToCartText">{{ 'products.product.add_to_cart' | t }}</span>
</button>
  1. เมื่อคุณหาโค้ดพบแล้ว ให้นำโค้ดดังกล่าวไปใส่ไว้ในแท็ก Liquid {% comment %} และ {% endcomment %} การทำเช่นนี้จะทำให้โค้ดหยุดแสดงบนร้านค้าของคุณ แต่คุณสามารถเพิ่มกลับเข้าไปใหม่ได้อย่างง่ายดายหากคุณต้องการเปลี่ยนเทมเพลตใหม่ในภายหลัง

จากตัวอย่างข้างต้น รหัสใหม่จะมีลักษณะดังนี้:

{% comment %}
<button type="submit" name="add" id="AddToCart" class="btn">
  <span id="AddToCartText">{{ 'products.product.add_to_cart' | t }}</span>
</button>
{% endcomment %}
  1. คลิกบันทึกเพื่อยืนยันการเปลี่ยนแปลงของคุณ

เมื่อคุณพร้อมแสดงปุ่มเพิ่มลงในตะกร้าสินค้าของคุณอีกครั้ง ให้กลับไปที่เทมเพลต product.liquid ของคุณในหน้าแก้ไข HTML/CSS จากนั้นลบแท็ก {% comment %} และ {% endcomment %} ออก แล้วคลิกที่บันทึก

ไม่พบคำตอบที่คุณต้องการงั้นหรือ เราพร้อมช่วยเหลือคุณ