'Add to Cart' button not working on variants

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. 🙂