No add to cart button showing

Excursionist
48 0 1

 

Capture.JPG

On all pages add to cart is showing
BUT

when i do search for product and when any product find on the search  that product is not having any add to cart button how to add the button there please

0 Likes

Hello ,
Check your search.liquid file there is no code to display add to cart button when search for product.

You have to add some code to display add to cart button.

Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Free Review and advice for sale on store | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | SEO & Digital Marketing | Site Speed Optimization | Performance Site Audit
0 Likes
Excursionist
48 0 1


{% assign grid_results = false %}
{% assign respond_js_secret_key = shop.domain | md5 %}
{% unless search.terms == respond_js_secret_key %}
{% case settings.search_grid %}
{% when '1' %}
{%- assign search_item_width = 'wide--grid__item post-large--grid__item large--grid__item medium--grid__item small-grid__item' -%}
{% when '2' %}
{%- assign search_item_width = 'wide--one-half post-large--one-half large--one-half medium--one-half small-grid__item' -%}
{% when '3' %}
{%- assign search_item_width = 'wide--one-third post-large--one-third large--one-half medium--one-half small-grid__item' -%}
{% when '4' %}
{%- assign search_item_width = 'wide--one-quarter post-large--one-third large--one-half medium--one-half small-grid__item' -%}
{% when '5' %}
{%- assign search_item_width = 'wide--one-fifth post-large--one-quarter large--one-half medium--one-half small-grid__item' -%}
{% else %}
{%- assign search_item_width = 'wide--one-quarter post-large--one-third large--one-half medium--one-half small-grid__item' -%}

{% endcase %}
{% if settings.search_results_per_page != blank %}
{% assign search_per_page = settings.search_results_per_page %}
{% else %}
{% assign search_per_page = 12 %}
{% endif %}

{% paginate search.results by search_per_page %}
<div class="search-products col-main">
{% if search.performed %}
{% if search.results_count == 0 %}
<h1 class="text--left h2" style="width:100%;">{{ 'general.search.no_results_html' | t: terms: search.terms }}</h1>
{% include 'search-bar' %}
{% else %}
<h1 class="h2 text--left" style="width:100%;">{{ 'general.search.results_for_html' | t: terms: search.terms }}</h1>
{% include 'search-bar' %}
{% endif %}
{% else %}
<h1 class="h2 left" style="width:100%;">{{ 'general.search.title' | t }}</h1>
{% include 'search-bar' %}
{% endif %}
<ul class="grid-uniform">
{% for item in search.results %}

{% if item.object_type == 'product' %}
{% include 'search-result','search_item_width' %}
{% else %}




<li class="grid item-row grid__item {{ search_item_width }}">
<div class="products">
{% assign has_image = true %}
{% assign image_alt = item.title | escape %}
<div class="product-container">
{% assign featured_image = item.image | default: item.featured_image %}
{% if featured_image != blank %}
<a href="{{ item.url }}" title="{{ item.title | escape }}">
{{ featured_image | img_url: 'large' | img_tag: featured_image.alt }}
</a>
{% endif %}
</div>
<div class="product-detail">
<a href="{{ item.url}}" class="grid-link__title">{{ item.title }}</a>
</div>
</div>
</li>
{% endif %}
{% endfor %}
</ul>
{% if paginate.pages > 1 %}
<div class="text-center">
{% include 'pagination-default' %}
</div>
{% endif %}


</div>
{% endpaginate %}

{% else %}
{% include 'respond' %}
{% layout none %}
{% endunless %}


this is the code can you please send me  what code to add here to display add to cart button

0 Likes
Excursionist
48 0 1

can some one please help me in this

0 Likes

Hi,
You can use the custom code below, but it would be great if you can provide your store URL to check

{% assign grid_results = false %}
{% assign respond_js_secret_key = shop.domain | md5 %}
{% unless search.terms == respond_js_secret_key %}
{% case settings.search_grid %}
{% when '1' %}
{%- assign search_item_width = 'wide--grid__item post-large--grid__item large--grid__item medium--grid__item small-grid__item' -%}
{% when '2' %}
{%- assign search_item_width = 'wide--one-half post-large--one-half large--one-half medium--one-half small-grid__item' -%}
{% when '3' %}
{%- assign search_item_width = 'wide--one-third post-large--one-third large--one-half medium--one-half small-grid__item' -%}
{% when '4' %}
{%- assign search_item_width = 'wide--one-quarter post-large--one-third large--one-half medium--one-half small-grid__item' -%}
{% when '5' %}
{%- assign search_item_width = 'wide--one-fifth post-large--one-quarter large--one-half medium--one-half small-grid__item' -%}
{% else %}
{%- assign search_item_width = 'wide--one-quarter post-large--one-third large--one-half medium--one-half small-grid__item' -%}
{% endcase %}
{% if settings.search_results_per_page != blank %}
{% assign search_per_page = settings.search_results_per_page %}
{% else %}
{% assign search_per_page = 12 %}
{% endif %}
{% paginate search.results by search_per_page %}
<div class="search-products col-main">
    {% if search.performed %}
    {% if search.results_count == 0 %}
    <h1 class="text--left h2" style="width:100%;">{{ 'general.search.no_results_html' | t: terms: search.terms }}</h1>
    {% include 'search-bar' %}
    {% else %}
    <h1 class="h2 text--left" style="width:100%;">{{ 'general.search.results_for_html' | t: terms: search.terms }}</h1>
    {% include 'search-bar' %}
    {% endif %}
    {% else %}
    <h1 class="h2 left" style="width:100%;">{{ 'general.search.title' | t }}</h1>
    {% include 'search-bar' %}
    {% endif %}
    <ul class="grid-uniform">
        {% for item in search.results %}
        {% if item.object_type == 'product' %}
        {% include 'search-result','search_item_width' %}
        {% else %}
        <li class="grid item-row grid__item {{ search_item_width }}">
            <div class="products">
                {% assign has_image = true %}
                {% assign image_alt = item.title | escape %}
                <div class="product-container">
                    {% assign featured_image = item.image | default: item.featured_image %}
                    {% if featured_image != blank %}
                    <a href="{{ item.url }}" title="{{ item.title | escape }}">
                        {{ featured_image | img_url: 'large' | img_tag: featured_image.alt }}
                    </a>
                    {% endif %}
                </div>
                <div class="product-detail">
                    <a href="{{ item.url}}" class="grid-link__title">{{ item.title }}</a>
                </div>
                <div class="product-button">
                	{% capture "form_classes" -%}
			            product-form product-form-{{ section.id }}{% unless section.settings.show_variant_labels %} product-form--hide-variant-labels{% endunless %}{% if section.settings.enable_payment_button and product.has_only_default_variant%} product-form--payment-button-no-variants{% endif %}
			          {%- endcapture %}

			          {% form 'product', product, class:form_classes, novalidate: 'novalidate', data-product-form: '' %}
			            {% unless product.has_only_default_variant %}
			              <div class="product-form__controls-group">
			                {% for option in product.options_with_values %}
			                  <div class="selector-wrapper js product-form__item">
			                    <label {% if option.name == 'default' %}class="label--hidden" {% endif %}for="SingleOptionSelector-{{ forloop.index0 }}">
			                      {{ option.name }}
			                    </label>
			                    <select class="single-option-selector single-option-selector-{{ section.id }} product-form__input" id="SingleOptionSelector-{{ forloop.index0 }}" data-index="option{{ forloop.index }}">
			                      {% for value in option.values %}
			                        <option value="{{ value | escape }}"{% if option.selected_value == value %} selected="selected"{% endif %}>{{ value }}</option>
			                      {% endfor %}
			                    </select>
			                  </div>
			                {% endfor %}
			              </div>
			            {% endunless %}

			            <select name="id" id="ProductSelect-{{ section.id }}" class="product-form__variants no-js">
			              {% for variant in product.variants %}
			                {% if variant.available %}
			                  <option {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} value="{{ variant.id }}">
			                    {{ variant.title }}
			                  </option>
			                {% else %}
			                  <option disabled="disabled">{{ variant.title }} - {{ 'products.product.sold_out' | t }}</option>
			                {% endif %}
			              {% endfor %}
			            </select>

			            {% if section.settings.show_quantity_selector %}
			              <div class="product-form__controls-group">
			                <div class="product-form__item">
			                  <label for="Quantity-{{ section.id }}">{{ 'products.product.quantity' | t }}</label>
			                  <input type="number" id="Quantity-{{ section.id }}"
			                    name="quantity" value="1" min="1" pattern="[0-9]*"
			                    class="product-form__input product-form__input--quantity" data-quantity-input
			                  >
			                </div>
			              </div>
			            {% endif %}

			            <div class="product-form__error-message-wrapper product-form__error-message-wrapper--hidden{% if section.settings.enable_payment_button %} product-form__error-message-wrapper--has-payment-button{% endif %}" data-error-message-wrapper role="alert">
			              <span class="visually-hidden">{{ 'general.accessibility.error' | t }} </span>
			              {% include 'icon-error' %}
			              <span class="product-form__error-message" data-error-message>{{ 'products.product.quantity_minimum_message' | t }}</span>
			            </div>

			            <div class="product-form__controls-group product-form__controls-group--submit">
			              <div class="product-form__item product-form__item--submit
			                    {%- if section.settings.enable_payment_button %} product-form__item--payment-button {%- endif -%}
			                    {%- if product.has_only_default_variant %} product-form__item--no-variants {%- endif -%}"
			              >
			                <button type="submit" name="add"
			                  {% unless current_variant.available %} aria-disabled="true"{% endunless %}
			                  aria-label="{% unless current_variant.available %}{{ 'products.product.sold_out' | t }}{% else %}{{ 'products.product.add_to_cart' | t }}{% endunless %}"
			                  class="btn product-form__cart-submit{% if section.settings.enable_payment_button %} btn--secondary-accent{% endif %}"
			                  data-add-to-cart>
			                  <span data-add-to-cart-text>
			                    {% unless current_variant.available %}
			                      {{ 'products.product.sold_out' | t }}
			                    {% else %}
			                      {{ 'products.product.add_to_cart' | t }}
			                    {% endunless %}
			                  </span>
			                  <span class="hide" data-loader>
			                    {% include 'icon-spinner' %}
			                  </span>
			                </button>
			                {% if section.settings.enable_payment_button %}
			                  {{ form | payment_button }}
			                {% endif %}
			              </div>
			            </div>
			          {% endform %}
                </div>
            </div>
        </li>
        {% endif %}
        {% endfor %}
    </ul>
    {% if paginate.pages > 1 %}
    <div class="text-center">
        {% include 'pagination-default' %}
    </div>
    {% endif %}
</div>
{% endpaginate %}
{% else %}
{% include 'respond' %}
{% layout none %}
{% endunless %}
Richard | Front-end Dev @ PageFly
- Click 'Like' to let me know you like my answer!
- Are you having problems building Shopify stores? Check out PageFly - An Advanced Page Builder whose goal is to empower anyone to build a perfect store.
- Do you want a 50% Discount on any PageFly plan? Check out this survey.
0 Likes
Excursionist
48 0 1

@RichardNguyen 

it did not worked

store link :  https://bit.ly/2TseOLc

0 Likes

I've updated a little bit code, please try again

{% assign grid_results = false %}
{% assign respond_js_secret_key = shop.domain | md5 %}
{% unless search.terms == respond_js_secret_key %}
{% case settings.search_grid %}
{% when '1' %}
{%- assign search_item_width = 'wide--grid__item post-large--grid__item large--grid__item medium--grid__item small-grid__item' -%}
{% when '2' %}
{%- assign search_item_width = 'wide--one-half post-large--one-half large--one-half medium--one-half small-grid__item' -%}
{% when '3' %}
{%- assign search_item_width = 'wide--one-third post-large--one-third large--one-half medium--one-half small-grid__item' -%}
{% when '4' %}
{%- assign search_item_width = 'wide--one-quarter post-large--one-third large--one-half medium--one-half small-grid__item' -%}
{% when '5' %}
{%- assign search_item_width = 'wide--one-fifth post-large--one-quarter large--one-half medium--one-half small-grid__item' -%}
{% else %}
{%- assign search_item_width = 'wide--one-quarter post-large--one-third large--one-half medium--one-half small-grid__item' -%}
{% endcase %}
{% if settings.search_results_per_page != blank %}
{% assign search_per_page = settings.search_results_per_page %}
{% else %}
{% assign search_per_page = 12 %}
{% endif %}
{% paginate search.results by search_per_page %}
<div class="search-products col-main">
    {% if search.performed %}
    {% if search.results_count == 0 %}
    <h1 class="text--left h2" style="width:100%;">{{ 'general.search.no_results_html' | t: terms: search.terms }}</h1>
    {% include 'search-bar' %}
    {% else %}
    <h1 class="h2 text--left" style="width:100%;">{{ 'general.search.results_for_html' | t: terms: search.terms }}</h1>
    {% include 'search-bar' %}
    {% endif %}
    {% else %}
    <h1 class="h2 left" style="width:100%;">{{ 'general.search.title' | t }}</h1>
    {% include 'search-bar' %}
    {% endif %}
    <ul class="grid-uniform">
        {% for item in search.results %}
        {% if item.object_type == 'product' %}
        {% include 'search-result','search_item_width' %}
        {% else %}
        <li class="grid item-row grid__item {{ search_item_width }}">
            <div class="products">
                {% assign has_image = true %}
                {% assign image_alt = item.title | escape %}
                <div class="product-container">
                    {% assign featured_image = item.image | default: item.featured_image %}
                    {% if featured_image != blank %}
                    <a href="{{ item.url }}" title="{{ item.title | escape }}">
                        {{ featured_image | img_url: 'large' | img_tag: featured_image.alt }}
                    </a>
                    {% endif %}
                </div>
                <div class="product-detail">
                    <a href="{{ item.url}}" class="grid-link__title">{{ item.title }}</a>
                </div>
                <div class="product-button">
                	{% capture "form_classes" -%}
			            product-form product-form-{{ section.id }}{% unless section.settings.show_variant_labels %} product-form--hide-variant-labels{% endunless %}
			          {%- endcapture %}

			          {% form 'product', item, class:form_classes, novalidate: 'novalidate', data-product-form: '' %}
			            {% unless item.has_only_default_variant %}
			              <div class="product-form__controls-group">
			                {% for option in item.options_with_values %}
			                  <div class="selector-wrapper js product-form__item">
			                    <label {% if option.name == 'default' %}class="label--hidden" {% endif %}for="SingleOptionSelector-{{ forloop.index0 }}">
			                      {{ option.name }}
			                    </label>
			                    <select class="single-option-selector single-option-selector-{{ section.id }} product-form__input" id="SingleOptionSelector-{{ forloop.index0 }}" data-index="option{{ forloop.index }}">
			                      {% for value in option.values %}
			                        <option value="{{ value | escape }}"{% if option.selected_value == value %} selected="selected"{% endif %}>{{ value }}</option>
			                      {% endfor %}
			                    </select>
			                  </div>
			                {% endfor %}
			              </div>
			            {% endunless %}

			            <select name="id" id="ProductSelect-{{ section.id }}" class="product-form__variants no-js">
			              {% for variant in item.variants %}
			                {% if variant.available %}
			                  <option {% if variant == item.selected_or_first_available_variant %} selected="selected" {% endif %} value="{{ variant.id }}">
			                    {{ variant.title }}
			                  </option>
			                {% else %}
			                  <option disabled="disabled">{{ variant.title }} - {{ 'products.product.sold_out' | t }}</option>
			                {% endif %}
			              {% endfor %}
			            </select>

			            {% if section.settings.show_quantity_selector %}
			              <div class="product-form__controls-group">
			                <div class="product-form__item">
			                  <label for="Quantity-{{ section.id }}">{{ 'products.product.quantity' | t }}</label>
			                  <input type="number" id="Quantity-{{ section.id }}"
			                    name="quantity" value="1" min="1" pattern="[0-9]*"
			                    class="product-form__input product-form__input--quantity" data-quantity-input
			                  >
			                </div>
			              </div>
			            {% endif %}

			            <div class="product-form__error-message-wrapper product-form__error-message-wrapper--hidden{% if section.settings.enable_payment_button %} product-form__error-message-wrapper--has-payment-button{% endif %}" data-error-message-wrapper role="alert">
			              <span class="visually-hidden">{{ 'general.accessibility.error' | t }} </span>
			              {% include 'icon-error' %}
			              <span class="product-form__error-message" data-error-message>{{ 'products.product.quantity_minimum_message' | t }}</span>
			            </div>

			            <div class="product-form__controls-group product-form__controls-group--submit">
			              <div class="product-form__item product-form__item--submit
			                    {%- if section.settings.enable_payment_button %} product-form__item--payment-button {%- endif -%}
			                    {%- if item.has_only_default_variant %} product-form__item--no-variants {%- endif -%}"
			              >
			                <button type="submit" name="add"
			                  {% unless current_variant.available %} aria-disabled="true"{% endunless %}
			                  aria-label="{% unless current_variant.available %}{{ 'products.product.sold_out' | t }}{% else %}{{ 'products.product.add_to_cart' | t }}{% endunless %}"
			                  class="btn product-form__cart-submit{% if section.settings.enable_payment_button %} btn--secondary-accent{% endif %}"
			                  data-add-to-cart>
			                  <span data-add-to-cart-text>
			                    {% unless current_variant.available %}
			                      {{ 'products.product.sold_out' | t }}
			                    {% else %}
			                      {{ 'products.product.add_to_cart' | t }}
			                    {% endunless %}
			                  </span>
			                  <span class="hide" data-loader>
			                    {% include 'icon-spinner' %}
			                  </span>
			                </button>
			                {% if section.settings.enable_payment_button %}
			                  {{ form | payment_button }}
			                {% endif %}
			              </div>
			            </div>
			          {% endform %}
                </div>
            </div>
        </li>
        {% endif %}
        {% endfor %}
    </ul>
    {% if paginate.pages > 1 %}
    <div class="text-center">
        {% include 'pagination-default' %}
    </div>
    {% endif %}
</div>
{% endpaginate %}
{% else %}
{% include 'respond' %}
{% layout none %}
{% endunless %}

BTW, please give me storefront password and give me the name of the theme that you're using

Richard | Front-end Dev @ PageFly
- Click 'Like' to let me know you like my answer!
- Are you having problems building Shopify stores? Check out PageFly - An Advanced Page Builder whose goal is to empower anyone to build a perfect store.
- Do you want a 50% Discount on any PageFly plan? Check out this survey.
0 Likes
Excursionist
48 0 1

Show me the code of this file snippets/search-result.liquid

Richard | Front-end Dev @ PageFly
- Click 'Like' to let me know you like my answer!
- Are you having problems building Shopify stores? Check out PageFly - An Advanced Page Builder whose goal is to empower anyone to build a perfect store.
- Do you want a 50% Discount on any PageFly plan? Check out this survey.
0 Likes
Excursionist
48 0 1

@RichardNguyen 

{% assign product = item %}

 


{% unless current_collection == blank %}
{% assign current_collection = collection %}
{% endunless %}
{% assign on_sale = false %}
{% assign sale_text = 'products.product.sale' | t %}
{% if product.compare_at_price > product.price %}
{% assign on_sale = true %}
{% endif %}
{% assign sold_out = true %}
{% assign sold_out_text = 'products.product.sold_out' | t %}
{% if product.available %}
{% assign sold_out = false %}
{% endif %}

{% assign img_size='large' %}

<li class="grid item-row grid__item {{ search_item_width }} {% if settings.product_row_mob == 'single' %} medium--grid__item small-grid__item {% else %} medium--one-half small--one-half {% endif %} {% if sold_out %} sold-out{% endif %}{% if on_sale %} on-sale{% endif %}" id="product-{{ item.id }}">

<div class="products product-hover-3">
<div class="product-container">
{% if settings.count_down_enable and settings.count_down_collections %}
{% assign dealTime = settings.home_productdeal_time | split: ' ' | join: ' ' | split: ' ' %}
{% include 'deal-snippet' %}
{% endif %}
<a href="{{ product.url | within: collection }}" class="grid-link">
{% unless sold_out %}
{% if on_sale and settings.collections_show_sale_circle %}
<div class="featured-tag">
<span class="badge badge--sale">
<span class="gift-tag badge__text{% if sale_text.size > 7 %} badge__text--small{% endif %}">{{ 'products.product.sale' | t }}</span>
</span>
</div>
{% endif %}
{% endunless %}
{% if sold_out and settings.collections_show_sold_out_circle %}
<span class="badge badge--sold-out">
<span class="badge__text{% if sold_out_text.size > 9 %} badge__text--small{% endif %}">{{ 'products.product.sold_out' | t }}</span>
</span>
{% endif %}
<div class="ImageOverlayCa"></div>
{% if settings.secondary_image_use %}

{% if product.images.size > 1 %}
<div class="reveal">
<span class="product-additional">
<img src="{{ product.featured_image.src | img_url: img_size }}" class="featured-image" alt="{{ product.featured_image.alt | escape }}">
</span>
<img src="{{ product.images.last | product_img_url: img_size }}" class="hidden-feature_img" alt="{{ product.images.last.alt | escape }}" />
</div>

{% else %}

<img src="{{ product.featured_image.src | img_url: img_size }}" class="featured-image" alt="{{ product.featured_image.alt | escape }}">
{% endif %}

{% else %}
<img src="{{ product.featured_image.src | img_url: img_size }}" class="featured-image" alt="{{ product.featured_image.alt | escape }}">

{% endif %}
</a>
<div class="product_right_tag {% if on_sale %} offer_exist {% endif %}">
{% if on_sale %}{% include 'offer-price' %} {% endif %}
{% include 'new-label' %}
</div>
<div class="ImageWrapper">
<div class="product-button">

{% if settings.enable_add_cart %}
{% if product.available %}
<form action="/cart/add" method="post" class="gom variants clearfix" id="cart-form-{{ product.id }}">
<input type="hidden" name="id" value="{{ product.variants[0].id }}" />
<a title="{{ 'products.product.add_to_cart' | t }}" class="add-cart-btn">
<i class="fas fa-shopping-cart"></i>
</a>
</form>

{% endif %}
{% endif %}


{% if settings.enable_quick_view %}
<a title="{{ 'products.product.quick_view' | t }}" href="javascript&colon;void(0)" id="{{ product.handle }}" class="quick-view-text">
<i class="far fa-eye"></i>
</a>
{% endif %}

{% if settings.enable_wishlist %}
{% include 'wishlist-icon' %}
{% endif %}

</div>
</div>
</div>
<div class="product-detail">

<a href="{{ product.url | within: collection }}" class="grid-link__title">{{ product.title }}</a>
<div class="grid-link__meta">
{% include 'product-price', variant: product %}
{% if settings.product_review %} <span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span> {% endif %}
</div>
{% include 'item-swatch' %}
</div>

</div>

</li>

0 Likes