0

I have to add the image in my dropdown. I know I can do this with CSS Classes (optional) but I don't want to do this. I want to add dynamically instead of open the code and change or add it.

What I am doing is, I have my products and I have to add my products to the dropdown menu along with the product image and heading.

My expectation dropdown output

enter image description here

I don't want to use any plugin. I need a custom code to solve this issue. I am using the below code. would you help me out with this?

//hook event for upload image on menu
function add_image_on_menu_module()
{
    // Add these actions for  add
    add_action('create_menu', 'save_image');
    add_action('menu_add_form_fields', 'add_image_menu');//display image upload option on menu
}
add_action('init', 'add_image_on_menu_module');

//display image upload option 
function add_image_menu($tag)
{
    $menu_image = get_option('menu_image');
    $menu_img = '';
    if (is_array($menu_image) && array_key_exists($tag->term_id, $menu_image)) {
        $menu_img = $menu_image[$tag->term_id];
    }
    ?>
    <div>
        <p><label>Image</label></p>
        <p>
            <?php
                if ($menu_img != "") {
                    ?>
                <img src="<?php echo $menu_img; ?>" alt="" title=""  style="width:300px;"  />
            <?php
                }
                ?>
            <br />
            <!-- Add this html here -->
            <input type="text" class="regular-text" id="custom_menu_image" name="menu_image" value="<?php echo $menu_img; ?>">
            <button class="set_menu_image button">Set Image url</button>
        </p>
    </div>

<?php
}


function save_image($term_id)
{
    if (isset($_POST['menu_image'])) {
        //load existing category featured option
        $menu_image = get_option('menu_image');
        //set featured post ID to proper category ID in options array
        $menu_image[$term_id] =  $_POST['menu_image'];
        //save the option array
        update_option('menu_image', $menu_image);
    }
}


// Enquey media elements
add_action('admin_enqueue_scripts', function () {
    if (is_admin())
        wp_enqueue_media();
});

// Add JS using admin_footer or enque thorugh hooks
add_action('admin_footer', 'my_footer_scripts');
function my_footer_scripts()
{
    ?>
    <script>
        jQuery(document).ready(function() {
            if (jQuery('.set_menu_image').length > 0) {
                if (typeof wp !== 'undefined' && wp.media && wp.media.editor) {
                    jQuery('.set_menu_image').on('click', function(e) {
                        e.preventDefault();
                        var button = jQuery(this);
                        var url_input = jQuery("#custom_menu_image");
                        wp.media.editor.send.attachment = function(props, attachment) {
                            url_input.val(attachment.url);
                        };
                        wp.media.editor.open(button);
                        return false;
                    });
                }
            }
        });
    </script>
<?php
}
 ?>

Would you help me out with this issue?

6
  • What is the problem you're having? Which code/part isn't giving you the expected outcome? Commented Feb 10, 2021 at 6:36
  • @SallyCJ, I have to add the products to the dropdown menu so I added them as normally as we are adding the menu. Now my boss told me that I have to add the product image too. So how can I add the product image? I can't use the class option because images are dynamically Commented Feb 10, 2021 at 7:14
  • "the dropdown menu" - you mean wp_nav_menu()? Can you show the code you used to display that dropdown? Commented Feb 10, 2021 at 10:47
  • @SallyCJ, I think, My issue got resolved, I have a create a custom text called the shop and once the user clicks on shop then it will display the dropdown. What I did, I added a shortcode to display all the products in the dropdown <?php echo do_shortcode ("[products orderby='date']"); // this is the woocommerce shortcode?> and I am getting my expected output Commented Feb 10, 2021 at 11:12
  • 1
    Good for you then, but you should post that as an answer. Commented Feb 10, 2021 at 11:34

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.