Hide 'add to cart' when certain value in dropdown is selected

Question

In relation to question asked on wordpress.stackexchange

I am trying to hide the 'add to cart' woocommerce button when a user selects a specific item in a dropdown list. I am using the WordPress platform and have tried multiple JQuery snippets in both functions.php and through 3rd party plugins but am still struggling to get it to work.

In Functions.php theme file

function load_scripts() {
?>
    <script type="text/javascript">
    $(document).ready(function(){
        $(document.getElementsByName("select-1574795073993")).change(function(){
            $( "select option:selected").each(function(){
                if($(this).attr("value")=="International"){
                    $(".single_add_to_cart_button").hide();
                }
            });
        }).change();
    });
    </script>
<?php
}
add_action('wp_enqueue_scripts', 'load_scripts');

Please can someone assist with simple steps to 1) provide correct code, and 2) insert in the woocommerce.com hosted plarform.

Much appreciated!

Answer 1

Try this below code.

function load_scripts(){ ?>
    <script type="text/javascript">
        (function($){
            $(document).ready(function(){
                $('select[name="select-1574795073993"]').on('change', function() {
                    if( this.value == "International" && $('.product_meta .by-vendor-name-link').text() == 'Sold By Ronks Michael' ){
                        $(".single_add_to_cart_button").hide();
                    }else{
                        $(".single_add_to_cart_button").show(); 
                    }
                });
            });
        })(jQuery);
    </script>
<?php }
add_action( 'wp_footer', 'load_scripts', 10, 1 );