Filter to remove default image sizes (WordPress & WooCommerce) from your theme and add custom image sizes instead.

wp-custom-image-sizes.php

<?php
/*
 * WordPress filters to remove default image sizes and add custom sizes.
 * Replace PREFIX with your theme's prefix as necessary.
 * Regenerate thumbnails after adding this to your theme's functions.php file.
 */
 
// This function unsets the default image sizes
function PREFIX_remove_default_image_sizes( $sizes ) {
  
    /* Default WordPress */
    unset( $sizes[ 'thumbnail' ] );      // Remove Thumbnail (150x150)
    unset( $sizes[ 'medium' ] );         // Remove Medium resolution (300x300)
    unset( $sizes[ 'medium_large' ] );   // Remove Medium Large resolution (768x0, hidden in WP Admin)
    unset( $sizes[ 'large' ] );          // Remove Large resolution (1024x1024)

    /* With WooCommerce */
    unset( $sizes[ 'shop_thumbnail' ] ); // Remove Shop thumbnail (180x180)
    unset( $sizes[ 'shop_catalog' ] );   // Remove Shop catalog (300x300)
    unset( $sizes[ 'shop_single' ] );    // Shop single (600x600)
  
    return $sizes;
}
add_filter( 'intermediate_image_sizes_advanced', 'PREFIX_remove_default_image_sizes' );

// This function creates new image sizes
function PREFIX_add_custom_image_sizes() {
    // Custom post image sizes for responsive images
    add_image_size( 'small', 640, 9999 );       // 2x the 320px width of small phones
    add_image_size( 'mid_size', 800, 9999 );    // For 400px wide max images
    add_image_size( 'larger', 2000, 9999 );     // 2000px wide unlimited height
    add_image_size( 'full_width', 3000, 9999 ); // 3000px wide unlimited height
}
// Run a function after the theme is setup (or add the above function to your other after-theme actions)
add_action( 'after_setup_theme', 'PREFIX_add_custom_image_sizes' );

// Give your custom image sizes readable names
function PREFIX_add_custom_image_size_names( $sizes ) {
    return array_merge( $sizes, array(
        'small' => __( 'Small' ),
        'mid_size' => __( 'Medium' ),
        'larger' => __( 'Large' ),
        'full_width' => __( 'Full Width' ),
    ) );
}
// Run the filter to apply custom image size names to your new image sizes
add_filter( 'image_size_names_choose', 'PREFIX_add_custom_image_size_names' );

// Provide custom size attributes to each custom image size
function PREFIX_custom_responsive_image_sizes( $sizes, $size ) {
    // Get the image's width from the $size array
    $image_width = $size[0];
    // The max width of your theme, if applicable
    $max_width = 1500;

    if( $image_width === 640 ) {
        // For small images
        $sizes = '(max-width: ' . $max_width . 'px) 25vw, ' . $max_width / 4 . 'px';
    } elseif( $image_width === 800 ) {
        // For mid-size images
        $sizes = '(max-width: ' . $max_width . 'px) 33vw, ' . $max_width / 3 . 'px';
    } elseif( $image_width === 2000 ) {
        // For larger images
        $sizes = '(max-width: ' . $max_width . 'px) 75vw, ' . $max_width / 1.333 . 'px';
    } elseif( $image_width === 3000 ) {
        // For full-width images
        $sizes = '(max-width: ' . $max_width . 'px) 100vw, ' . $max_width . 'px';
    } else {
        // Default if no image sizes match
        $sizes = '(max-width: ' . $max_width . 'px) 100vw, ' . $max_width . 'px';
    }

    return $sizes;
}
// Run the filter to apply custom responsive image sizes
add_filter( 'wp_calculate_image_sizes', 'PREFIX_custom_responsive_image_sizes', 10 , 2 );
?>

Thank you so much for this- really helped me!