Adding markup to sub menu based on class

Question

I would like to add a div at the after a sub menu. I would like to apply this change only if the parent menu item has a class name of product-menu (comes from CSS class field under menus section in WP Admin).

This is the markup I want.

<li id="" class="product-menu menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-has-children">
  <a href="">Categories</a>
  <div class="sub-menu__wrapper">
    <ul class="sub-menu sub-menu-level-1">
      <li id="" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-has-children">
        <a href="">Vehicles</a>
        <ul class="sub-menu sub-menu-level-2">
          <li id="" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat"><a href="">Cars and Bikes</a></li>
          <li id="" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat"><a href="">Finance And Hire</a></li>
        </ul>
      </li>
      <li id="" class="menu-item menu-item-type-taxonomy menu-item-object-product_catmenu-item-has-children">
        <a href="">Beauty</a>
        <ul class="sub-menu sub-menu-level-2">
          <li id="" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat"><a href="">Cosmetics</a></li>
          <li id="" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat"><a href="">Haircare</a></li>
          <li id="" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat"><a href="">Hygiene & Sanitary</a></li>
        </ul>
      </li>
    </ul>
    <div>SHOW ONCE</div>
  </div>
</li>

This is what I have so far.

class WP_Walker extends Walker_Nav_Menu {

    function start_lvl( &$output, $depth = 0, $args = array() ) {
            $indent = ( $depth > 0  ? str_repeat( "\t", $depth ) : '' ); // code indent
            $display_depth = ( $depth + 1); // because it counts the first submenu as 0
            $classes = array(
                    'sub-menu',
                    'sub-menu-level-' . $display_depth
            );
            $class_names = implode( ' ', $classes );

            if ($display_depth == 1) {
                    $output .= "\n" . $indent . '<div class="sub-menu__wrapper"><ul class="' . $class_names . '">' . "\n";
            } else {
                    $output .= "\n" . $indent . '<ul class="' . $class_names . '">' . "\n";
            }
    }

    function end_lvl(&$output, $depth = 0, $args = array()) {
      if ($depth = 2){
        $output .= '<div>SHOW ONCE</div></ul>';
      } else {
        $output .= '</ul>';
      }
  }    
}

And what is currently being returned.

<li id="" class="product-menu menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-has-children">
  <a href="">Categories</a>
  <div class="sub-menu__wrapper">
    <ul class="sub-menu sub-menu-level-1">
      <li id="" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-has-children">
        <a href="">Vehicles</a>
        <ul class="sub-menu sub-menu-level-2">
          <li id="" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat"><a href="">Cars and Bikes</a></li>
          <li id="" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat"><a href="">Finance And Hire</a></li>
          <div>SHOW ONCE</div>
        </ul>
      </li>
      <li id="" class="menu-item menu-item-type-taxonomy menu-item-object-product_catmenu-item-has-children">
        <a href="">Beauty</a>
        <ul class="sub-menu sub-menu-level-2">
          <li id="" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat"><a href="">Cosmetics</a></li>
          <li id="" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat"><a href="">Haircare</a></li>
          <li id="" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat"><a href="">Hygiene & Sanitary</a></li>
          <div>SHOW ONCE</div>
        </ul>
      </li>
      <div>SHOW ONCE</div>
    </ul>
  </div>
</li>

As you can see the div I'm trying to add is getting added multiple times. How can I get the div to only appear once straight after the sub-menu-level-1 list?

Also how can I apply this change so it only applies for this particular menu with the class name of product-menu? Other sub menus don't require this additional div hence why I'm trying to do it by class name.

Answer 1

Here is your code

<script>
 $(document).ready(function(){
 $( ".product-menu .sub-menu-level-1" ).after( "<div>SHOW ONCE</div>" );
 });
</script>

This will automatically add the div if the parent has a class name of product-menu. Let me know if I miss something. and if this solved your issue, give a thumb