'Add to Cart' button not working on variants

Site URL: https://www.madabean.com/shop

I successfully added to code so that an "add to cart" button is there instead of taking my customer to the checkout page BUT this only works on products that don't have variants. I have a ring with variants of sizes but when you click add to cart, it says "Unable to add item, the store item was not found". How do I change it so that the variants drop down to choose from prior to adding to cart on the shop all page? Is this possible?

Which code did you use? Can you share link to a variant product? We can check easier

On 2/13/2021 at 10:01 PM, tuanphan said:

Which code did you use? Can you share link to a variant product? We can check easier

Here is the link to a variant item:

https://www.madabean.com/shop/p/athena

I since removed the code because it was causing issues when a customer went to choose a variant item but here is the I used this code: 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<style>
  .products .grid-item {
    padding-bottom: 60px;
    width: 100% !important;
  }
  .products .grid-item .sqs-add-to-cart-button {
    position: absolute;
    z-index: 9999;
    bottom: 0;
    left: 0;
    right: 0;
    width: 200px;
    min-width: 200px;
    margin: auto;
  }
</style>

<script>
  $(".products .grid-item").each(function(e){
    $(this).append('<div class="sqs-add-to-cart-button sqs-suppress-edit-mode sqs-editable-button" role="button" tabindex="0" data-product-type="1" data-original-label="Add To Cart"><div class="sqs-add-to-cart-button-inner">Add To Cart</div></div>');
  });
  $(function() {
    $(".products .grid-item").each(function(e){
      var dataItemId = $(this).attr('data-item-id');
      $(this).find('.sqs-add-to-cart-button').attr('data-item-id', dataItemId);
    });
  });
</script>

Here is the problem with the code. On the Store page proper (index) a button created with this code doesn't have access to a bunch of information about the variants. Also there is no interface for the customer to select those variants. On the Store page for a product with variants of course all the needed info and user options are there. I do not know of an easy way to reproduce the variant information on the Store page proper.

8 minutes ago, creedon said:

Here is the problem with the code. On the Store page proper (index) a button created with this code doesn't have access to a bunch of information about the variants. Also there is no interface for the customer to select those variants. On the Store page for a product with variants of course all the needed info and user options are there. I do not know of an easy way to reproduce the variant information on the Store page proper.

Right. That is why I am asking if there is a way. 🙂