skip to Main Content

I want to remove add to compare button in Shopify.

I am using PORTO theme for shopify.

I can see there is a option Disable AddToLink , but if I do that Add to Wishlist button is also disappearing.

Can someone please help me with this?
If anyone has knowledge on Shopify or know Liquid.

3

Answers


  1. Go to your theme files, in the assets folder, look for product.css or product.scss, and at the very end of that file put .product-view .actions .add-to-links li a.link-compare { display: none; }.

    Either this or look for the HTML tag inside the product.liquid file and remove it.

    <li>
    <a href="javascript:;" data-product-handle="blue-high-hill" data-product-title="Blue High Hill" class="link-compare" title="Add to compare">
    <i class="icon-compare"></i>
    <span data-translate="compare_list.general.add_to_compare">Add to compare</span></a
    </li>
    
    Login or Signup to reply.
  2. In your theme file,inside the Assets folder find out the styles.scss file.Inside this file search this line .product-view .product-options-bottom .add-to-cart-box ul li and add below line after this search css line.

    .product-view .product-options-bottom .add-to-cart-box ul li:last-child { display: none; }

    Also you can add inline css for that one in product page.the file name is product-template.liquid and this file inside section.
    In product-template file find out below code and add inline css in li Tag.
    Add this one in li tag style="display:none"

    <li><a href="javascript:;" data-product-handle="porto-extended-camera" data-product-title="Porto Extended Camera" class="link-compare" title="Add to compare"><i class="icon-compare"></i><span data-translate="compare_list.general.add_to_compare">Add to compare</span></a></li>

    It’s work very well ,if you any other issues related this comment it.

    Login or Signup to reply.
  3. In Porto theme, you would check in the snippetsproduct-grid-item.liquid file.

    You would come across something like this in several places:

    {% if settings.collection_show_addtolinks != blank and product.variants.size <= 1 %}
      <div class="action-list">
        {% if settings.wishlist_enable %}
        <div class="product-wishlist wishlist-{{product.id}}">
          <a href="javascript:;" data-product-handle="{{product.handle}}" data-product-title="{{product.title}}" class="link-wishlist" title="{{'wish_list.general.add_to_wishlist' | t}}"><i class="icon-wishlist"></i><span {% if settings.language_enable %}data-translate="wish_list.general.add_to_wishlist"{% endif %}>{{ 'wish_list.general.add_to_wishlist' | t }}</span></a>
        </div>
        {% endif %}
      </div>
    {% endif %}
    
    

    So you just move the wishlist code outside of the if statement…

    {% if settings.collection_show_addtolinks != blank and product.variants.size <= 1 %}
      <div class="action-list">
      </div>
    {% endif %}
    
    {% if settings.wishlist_enable %}
    <div class="product-wishlist wishlist-{{product.id}}">
      <a href="javascript:;" data-product-handle="{{product.handle}}" data-product-title="{{product.title}}" class="link-wishlist" title="{{'wish_list.general.add_to_wishlist' | t}}"><i class="icon-wishlist"></i><span {% if settings.language_enable %}data-translate="wish_list.general.add_to_wishlist"{% endif %}>{{ 'wish_list.general.add_to_wishlist' | t }}</span></a>
    </div>
    {% endif %}
    
    

    Then just {% comment %}...{% endcomment %} or delete whatever you don’t want to keep.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search