"Add to cart" button outside of product page bypassing required options selection

lifson
Tourist
6 0 0

I'm using the paid theme Venue, and an app called infinite options to add custom options to my products. When outside the product page, on hover-over of a product, it gives the option to add to cart, bypassing the option selection, which is not good. However if the product has variants, it will instead show "Select Options" on hover-over, and leads to the product page. I don't want to make these custom options each a variant as I need it all pulled from a single product inventory. How can I make my theme recognize the inclusion of custom options the same way it does variants?

I am sort of shocked this seems so difficult. The infinite options support said they weren't able to help. It seems like a pretty basic setting. Being able to just bypass the options selection that I have made required makes the app pretty useless.

Replies 6 (6)

Ninthony
Shopify Partner
2329 350 1023

These are just shopify limitations. If you didn't need a third party app to do it, it wouldnt be a problem, but you do. I think the simplest solution would be to remove the add to cart functionality from the collection page entirely, or just omit it from products that have your unlimited options by tagging those products and then telling your code "if it has this tag, don't show the add to cart option."

If my solution helped you, please like it and accept it as the solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish 😄
lifson
Tourist
6 0 0

@Ninthony wrote:

"or just omit it from products that have your unlimited options by tagging those products and then telling your code "if it has this tag, don't show the add to cart option.""


I like the sound of this. I have found that I can disable the add to cart feature all together but I really like the look and dynamic feel of the hover-over effect that I'll lose if disabled.

Can you point me towards how I might go about tagging these products in such a way as to have them omitted? Since my theme sees variants as something that require options be selected, and the button leads to the product page instead of adding to cart, would there be a way to tag these products in such a way as to make them look like they have variants? I'm not completely inept at dealing with some code, as I used to work with html and css in another lifetime. I'm new to shopify code and I don't have a handle on the structure yet.

Or is there a way to add a hidden variant to these products and trick the theme into displaying the desired button?

Ninthony
Shopify Partner
2329 350 1023

So what you'd want to do is tag your products with something unique you can identify them with. Something like "multi-option" -- I don't know, it could be anything but lets just assume you use that tag. You’d have to find where in your collection template the HTML code is for the option when you hover. I would just hover the code and right click and Inspect it with DevTools, then apply a hover to it so it’ll display the option and you can see it and inspect it’s class name. I can’t really tell you cause you haven’t given us a URL. Here’s a codepen showing how something like it might look:

https://codepen.io/ninthony/pen/zYZgVdo

So let's say the first product is what you want to show for normal products that you want people to be able to add to the cart from the collection page and the second product is one of your products with the multiple options that you want them to continue to the product page and select their options. In reality, we'd be inside a loop and what we'd want to do is make the "product-hover" div conditional. So it would look something like this with liquid code:

{% for product in collection.products %}
<div class="product-container">
  <div class="product-image">
    <img src="https://imagesvc.meredithcorp.io/v3/mm/image?url=https%3A%2F%2Fstatic.onecms.io%2Fwp-content%2Fuploads%2Fsites%2F23%2F2021%2F03%2F03%2Fnutribullet-smart-touch-blender-ecomm.jpg">
  </div>
  <div class="product-title">
    Some Generic Title
  </div>
  <div class="product-price">
    $19.99
  </div>
{% if product.tags contains 'multi-option' %}
  <div class="product-hover">
    <a href="{{ product.url }}">View All Options</a>
  </div>
{% else %}
  <div class="product-hover">
    <a href="link-to-add-to-cart">Add To Cart</a>
  </div>
{% endif %}
</div>
{% endfor %}

 

So it's going to put out the hover container to "add to cart" for any option that doesnt have the "multi-option" tag, but if it has the multi-option tag it's going to put a link to the product page instead. This is just a basic example and may be more complicated, but that's the general idea.

If my solution helped you, please like it and accept it as the solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish 😄
lifson
Tourist
6 0 0

I very much appreciate the thorough response. Digging through the code I'm not really finding anything obvious. If I'm not mistaken it seems to be calling on js to determine how the hover-over button is determined. I could definitely be wrong though.  Here's a preview link, as my site is not open yet. Still very rough. 

https://j09lwgthpkt9j3kw-26499645530.shopifypreview.com/collections/roasts

if you notice, the second product, "Colombia - El Bombo" has the desired hover-over button that I'm hoping to apply to anything that needs custom options, but not variants. I'm not opposed to hiring someone to fix this, but my concern is that I will constantly adding new products and making changes as we grow and I am afraid I'll have to have to hire someone every time I make changes or additions.

 

Ninthony
Shopify Partner
2329 350 1023

Sorry for the late reply, I don't typically check the forums over the weekend. If you'd like, I can request access to your site and see if I can't get it figured out for you. I'll just need access to your themes, products, and a product that has your custom options you want to apply the same hover to as the product you mentioned in the above post. This is the div you'd be looking for:

<div class="product-btn product-btn--hover">                
<a href="/collections/roasts/products/colombia-broken-robot-coffee-affogato-espresso" class="c-btn c-btn--full c-btn--primary c-btn--arrow c-btn--small-tab product-btn__btn">Select Options</a>                
</div>

 

I'd probably start by Ctrl + F and searching for "product-btn--hover" in your product template and see if you can't find it. 

Just let me know, send me a DM on here with your store url if you want me to request access and try to get it figured out for you.

If my solution helped you, please like it and accept it as the solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish 😄

Developer-G
Shopify Partner
3033 593 846

Hello @lifson ,

Check in theme settings collection page may be there you have an option to disable it.
If not then you have to edit the collection template and comment/delete the code.

Thanks

- If helpful then please Like and Accept Solution.
- Want to modify or custom changes or bug fix on store Hire me.
- Email: guleriathakur43@gmail.com - Skype: navrocks1 ,
- Try GEMPAGES a great page builder
-Advance Search Filter