By default, WooCommerce displays all shipping methods that match the customer and the contents of the shopping cart. This means that other shipping methods will not be hidden if “free shipping” is available. This is not optimal from a UX perspective for the checkout.
The feature to hide all other methods and show only free shipping requires either custom PHP code or a plugin.
The PHP code for this has been published by WooCommerce on their site: Open instructions and code
Hide shipping methods for “Free shipping” with Plugin Germanized
If you use Germanized as an extension for WooCommerce, the feature to hide all other methods and show only free shipping can be enabled via setting. The setting is “Force free shipping when method is available” and can be found under WooCommerce Settings -> Germanized -> General -> Checkout.