I’m trying to make a simple dropdown menu for my WordPress shop (WooCommerce) – https://shop.sin.org.pl/sklep/ .

The problem is, while the dropdown menu does show up, the image it should return does not. Does anyone know how to force show it right next to the dropdown?

Code: https://pastebin.com/2ZcyKAh8

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Testy</title>
<style type="text/css">
   .box{
    color: #000000;
    padding: 0px;
    display: none;
    margin-top: 0px;
    background-color: #ffffff; 
    text-align: center;
}

</style>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js">            </script>
<script type="text/javascript">
$(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();
});
</script>
</head>
<body>
<div>
    <select>
        <option>Wybierz substancje</option>
        <option value="1">LSD</option>
    </select>
</div>
<div class="1 box">
    <a href="http://sin.org.pl" target="_blank">
        <img src="https://s14.postimg.org/s15q8k3u9/Untitled-1.jpg" />
    </a>
</div>
</body>
</html>

Read more here: JQuery dropdown menu not working on a wordpress WooCommerce shop page


Solution:

If you know the solution of this issue, please leave us a reply in Comment section, to update the question.


Wordpress related questions and answers: