Woocomerce kinda complicated setup, dropdown of variation results in blank section

Question

This is kinda of a complicated set up. Probably was an easier way to get here but here we are.

So I have variable products in a category called "Mimic"

I have a select dropdown that when a selection is made, it populates the content in a div with the content (via short codes like [product_page id="6477"] ) from the specific product selected in the mimic catagory.

That all works perfectly the way I want.

The problem now is that once a product has been selected, when the user tries to select the size they want, the page instantly changes that section to blank. I'm not quite sure why. I have a feeling it has to do with the use of the dropdown I'm already using for selection but not sure.

This is the page

Answer 1

Its due to the way you have set the event listener on the select this is the cote you are using

$(document).ready(function(){
    $("select").change(function(){
        $(this).find("option:selected").each(function(){
            var optionValue = $(this).attr("value");
            if(optionValue){
                $(".box").not("." + optionValue).hide();
                $("." + optionValue).show();
            } else{
                $(".box").hide();
            }
        });
    }).change();
});

it basically set the change event to all select boxes. best option would be to add a ID to the select used to change the variant. for example the ID "getvariant" then in your javascript you change the code to the following

$(document).ready(function(){
        $("#getvariant").change(function(){
            $(this).find("option:selected").each(function(){
                var optionValue = $(this).attr("value");
                if(optionValue){
                    $(".box").not("." + optionValue).hide();
                    $("." + optionValue).show();
                } else{
                    $(".box").hide();
                }
            });
        }).change();
    });