Request for Quote button in product page

Request for Quote button in product page

In customize theme, add custom liquid in default product template. 

Please the code as below. 
Note: the rule is when the price is '0'.

Idea
{% if product.selected_or_first_available_variant.price == 0 %}
  <a
    href="https://wa.me/60162261314?text={{ 'I would like to request price for ' | append: product.title | url_encode }}"
    class="ask-for-quote-btn"
    target="_blank"
  >
    <svg xmlns="http://www.w3.org/2000/svg" fill="white" viewBox="0 0 32 32" width="20" height="20" style="margin-right: 8px;">
      <path d="M16 .6C7.4.6.6 7.4.6 16c0 2.8.8 5.4 2.2 7.7L0 32l8.6-2.8c2.2 1.2 4.7 1.8 7.4 1.8 8.6 0 15.4-6.8 15.4-15.4C31.4 7.4 24.6.6 16 .6zM16 29c-2.3 0-4.4-.6-6.3-1.7l-.4-.2-5.1 1.6 1.6-5.1-.2-.4C4.6 21.4 4 19.3 4 17c0-6.6 5.4-12 12-12s12 5.4 12 12-5.4 12-12 12zm6.4-8.5c-.3-.2-1.9-.9-2.2-1-0.3-.1-.6-.2-.9.2s-1 1.2-1.3 1.4c-.2.2-.5.3-.8.1-.3-.2-1.2-.5-2.3-1.5-0.9-.8-1.5-1.9-1.6-2.2-.2-.3 0-.5.1-.6.1-.1.3-.4.5-.6.2-.2.2-.3.3-.5.1-.2 0-.4 0-.6s-.9-2.1-1.2-2.9c-.3-.7-.7-.6-1-.6H9.1c-.3 0-.6.1-.8.3s-1 1-1 2.5 1 2.9 1.2 3.1c.2.2 2 3.2 4.8 4.5.7.3 1.3.5 1.7.6.7.2 1.3.2 1.8.1.5-.1 1.6-.6 1.9-1.2.2-.6.2-1.1.1-1.2 0-.1-.3-.2-.6-.4z"/>
    </svg>
    Request for quote
  </a>

  <style>
    .ask-for-quote-btn {
      display: inline-flex;
      align-items: center;
      background-color: #25D366;
      color: white;
      padding: 12px 24px;
      font-size: 16px;
      border-radius: 6px;
      text-decoration: none;
      font-weight: 400;
      transition: background-color 0.3s;
    }
    .ask-for-quote-btn:hover {
      background-color: #1ebe57;
    }
  </style>
{% endif %}

    • Related Articles

    • Add “Description” title before the description on product page

      Add a custom liquid section in product page after add to cart button. Insert the following liquid in the custom liquid. {% if product.description != '' %} <br> <h3 style="color: #EC1C24; font-weight: 600;">DESCRIPTION & SPECIFICATIONS</h3> {% endif ...

    • Enlarge swatch size in product page

      In product page customize, add the following code in custom css: .swatch-input__input + .swatch-input__label { --swatch-input--size: 4rem !important; }

    • Display bundle items in product page

      Add Metafields to Bundle Product Example metafield: Namespace & key: custom.bundle_items Type: List of Products (this is the ideal type for linking individual Shopify products) Assign Metafields to Bundle Product: Go to the bundle product in your ...

    • Insert product weight into product page

      In custom liquid, insert the following: Weight: {% for variant in product.variants %}{{variant.weight | weight_with_unit }}{% endfor %}

    • Increase Page width

      Go to base.css Find "narrow" Replace with "wide" e.g: .page-width--wide { max-width: 72.6rem; padding: 0; }