combine Code 1 with Code 2

Modified PHP code

<?php
// First, define these.
$max_cat_count = 32; // this is 'x'
$qty_per_column = 8; // this is 'y'

// Then the $args array.
$args = array(
    'taxonomy'   => 'product_cat',
    'number'     => $max_cat_count + 1, // keep the + 1
    'hide_empty' => 0,
    // ... your other args here ...
);

// Get the categories list.
$get_cats = get_terms( $args );
$get_cats = ( ! is_wp_error( $get_cats ) ) ? $get_cats : [];

// Default thumbnail URL.
$default_thumb = content_url( '/uploads/woocommerce-placeholder-100x100.png' );

$total = count( $get_cats );
$list_number = 1;
$_new_col = false;

$columns="";
foreach ( $get_cats as $i => $cat ) {
    if ( $i >= $max_cat_count ) {
        break;
    }

    if ( $i % $qty_per_column === 0 ) {
        // Close previous column, if any.
        if ( $_new_col ) {
            $columns .= '</ul></div><!-- .cat_columns -->';
        }

        // Open new column.
        $id = 'cat-col-' . $list_number;
        $columns .= '<div class="menu cat_columns" id="' . $id . '">';
        $columns .= '<ul class="hoverimage">';

        $_new_col = true;
        $list_number++; // increment the columns count
    }

    if ( $total > $max_cat_count && $i === $max_cat_count - 1 ) {
        // Make sure to change the # to the proper URL.
        $columns .= '<li class="menu-item"><a href="#">View All</a></li>';
    } else {
        $thumbnail_id = get_term_meta( $cat->term_id, 'thumbnail_id', true );
        $image = $thumbnail_id ? wp_get_attachment_url( $thumbnail_id ) : '';
        // If $image is empty, just let it be. JS will set it to $default_thumb.
        // That way, the page source/HTML will be less.

        $link = '<a href="' . esc_url( get_term_link( $cat ) ) . '">' . esc_html( $cat->name ) . '</a>';
        $columns .= '<li class="menu-item" data-image="' . esc_url( $image ) . '">' . $link . '</li>';
    }
}
// Close last column, if any.
if ( $_new_col ) {
    $columns .= '</ul></div><!-- .cat_columns -->';
}
?>
<div class="design">
    <div class="zoom-preview">
        <div class="img_container" data-default_thumb="https://wordpress.stackexchange.com/questions/352360/<?php echo esc_url( $default_thumb ); ?>">
        </div>
    </div>
    <?php echo $columns; ?>
    <div class="clear"></div>
</div>

Modified jQuery code

jQuery(function( $ ){
    var imageContainer=".img_container",
        imageList=".hoverimage",
        maxWidth="100%"; // parent or specific css width;

    var $imageContainer = $(imageContainer).eq(0);
    var $imageList      = $(imageList);

    /*
     * I moved this var to here, and use data-default_thumb to specify the
     * default thumbnail URL. That way, you can - and should - avoid using
     * PHP in JS. So your opening DIV tag would look like:
     * <div class="img_container" data-default_thumb="http://example.com/image.png">
     */
    var defImage        = $imageContainer.data( 'default_thumb' );

    if (maxWidth === 'parent') {
        maxWidth = $imageContainer.width() + 'px';
    }

    // Load images and set hover::
    $imageList.find('li[data-image]').each(function(index){
        if (typeof $(this).data('image') === 'string') {
            var thumb_url = $( this ).data( 'image' ) || defImage;
            $imageContainer.append(
                "<img id='imageToggle"+index+
                "' src=""+ thumb_url +
                "" style="max-width: "+maxWidth+"; max-height:100%; display:none;" />"
            );
            $(this).data("image","imageToggle"+index);
            $(this).hover(
                function(){ loadImage($(this).data('image')); },
                function(){ loadImage('imageToggleDef'); }
            );
        }
    });

    // Load default:
    $imageContainer.append(
        "<img id='imageToggleDef"+
        "' src=""+defImage+
        "" style="max-width: "+maxWidth+"; max-height:100%" />"
    );

    // Toggle images:
    function loadImage(imageId) {
        $imageContainer.stop(true).fadeOut('fast', function(){
            $(this).find('img').hide();
            $(this).find('img#'+imageId).show();
            $(this).fadeIn('fast');
        });
    }
});

Sample CSS code

.cat_columns {
    float: left;
    width: 20%;
}

.zoom-preview {
    float: left;
    width: 20%;
    text-align: center;
}

.clear {
    clear: both;
}

So basically, just “play” with the CSS to get the proper layout — e.g. without the thumbnail preview, the .cat_columns would have a width of 25% (to have a total of 4 columns in a row).

And after you implemented all the code, the generated markup/HTML would look something like so:

<div class="design">
  <div class="zoom-preview">
    <div class="img_container" data-default_thumb="{Default thumbnail URL}">
      {Thumbnails added via JS}
    </div>
  </div>
  <div class="menu cat_columns">
    <ul class="hoverimage">
      <li class="menu-item" data-image="{Thumbnail URL}"><a href="https://wordpress.stackexchange.com/questions/352360/{Category URL}">{Category Name}</a></li>
      <li class="menu-item" data-image="{Thumbnail URL}"><a href="https://wordpress.stackexchange.com/questions/352360/{Category URL}">{Category Name}</a></li>
      ...
    </ul>
  </div>
  <div class="menu cat_columns">
    <ul class="hoverimage">
      <li class="menu-item" data-image="{Thumbnail URL}"><a href="https://wordpress.stackexchange.com/questions/352360/{Category URL}">{Category Name}</a></li>
      <li class="menu-item" data-image="{Thumbnail URL}"><a href="https://wordpress.stackexchange.com/questions/352360/{Category URL}">{Category Name}</a></li>
      ...
    </ul>
  </div>
  ...
  <div class="clear"></div>
</div>

Try a demo on JS Fiddle

Additional Notes

1. The arguments title_li, echo, style and show_count are to be used with wp_list_categories(), and have no effects in get_terms().

2. I used content_url() to retrieve the WordPress “content” URL which looks like http://example.com/wp-content.

3. After you’ve tested everything, you should put the jQuery script in an external script and use the wp_enqueue_scripts hook and wp_enqueue_script() to load the script. (I’ve recently posted this answer which might help you with wp_enqueue_script().)

UPDATE

If you want the default thumbnail to be loaded immediately, then you should manually add the <img> to the HTML:

<!-- With this version, no need for data-default_thumb -->
<div class="img_container">
        <img id="imageToggleDef" src="https://wordpress.stackexchange.com/questions/352360/<?php echo esc_url( $default_thumb ); ?>" alt="" style="max-width: 100%; max-height: 100%" />
</div>

You can try a demo here and be sure to use the JS there and not the one originally posted above.