How to: product variant button as individually designed card?

[Teo_Valatkevicius]

Hey folks,
I’m strugling on ecommerce website to implement more sophisticated product variant check. As I understand, webflow provides automaticly generated buttons from product variants which are unable to modify individualy. In my case I need to have product variant cards with adittional blocks of various information. Cards must change visually when thr product variant is selected.
There is no way to modify automatically generated produvt variant buttons (e.g. to add inside divs with individual informations).

I made an interaction to have faux product variant cards actinable, but I can not figure out, how to link click on card action to selecting a real product variant

here is how it looks like on live website:

here is showing product variant pick “invisible” button under faux product variant card:

Thank you all so much for your help

---

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

[Teo_Valatkevicius]

I figured out how to handle this implementation myself

There is a simple javascript to implement the click event listener function:

<script>
  document.addEventListener("DOMContentLoaded", function() {
    // Get the trigger divs
    const triggerDiv1 = document.querySelector('.variants_card_top');
    const triggerDiv2 = document.querySelector('.variants_card_middle');
    const triggerDiv3 = document.querySelector('.variants_card_bottom');

    // Function to trigger button click
    function triggerButtonClick(dataOptionId) {
      const button = document.querySelector(`[data-option-id="${dataOptionId}"]`);
      if (button) {
        button.click();
      } else {
        console.log(`Button with data-option-id="${dataOptionId}" not found`);
      }
    }

    // Add click event listeners to the trigger divs
    triggerDiv1.addEventListener('click', function() {
      triggerButtonClick('02670c6c720ef68e2611ee2b079b7630');
    });

    triggerDiv2.addEventListener('click', function() {
      triggerButtonClick('e382ab27ea28dcd155afeb58650b10cb');
    });

    triggerDiv3.addEventListener('click', function() {
      triggerButtonClick('bcae688b85385576fbfcdb9e694f8029');
    });
  });
</script>

Trigger element is the div for the card (top, middle, bottom):

The click triggers automatically generated div for product variant button with data-option-id=“xxx” (I got it from inspector)