Help customizing variable product display price on shop page

I am no PHP expert by any means, but I managed to piece together this code that goes in my themes functions.php file. Here is that code:

// Change location of variation product price
add_action( 'woocommerce_single_product_summary', 'custom_wc_template_single_price', 10 );
function custom_wc_template_single_price(){
    global $product;

    // Variable product only
    if($product->is_type('variable')):
    
        // Main Price
        $prices = array( $product->get_variation_price( 'min', true ), $product->get_variation_price( 'max', true ) );
        $price = $prices[0] !== $prices[1] ? sprintf( __( 'Starts at %1$s', 'woocommerce' ), wc_price( $prices[0] ) ) : wc_price( $prices[0] );
        $price2 = $prices[0] !== $prices[1] ? sprintf( __( '%1$s', 'woocommerce' ), wc_price( $prices[0] ) ) : wc_price( $prices[0] );

        // Sale Price
        $prices = array( $product->get_variation_regular_price( 'min', true ), $product->get_variation_regular_price( 'max', true ) );
        sort( $prices );
        $saleprice = $prices[0] !== $prices[1] ? sprintf( __( '%1$s', 'woocommerce' ), wc_price( $prices[0] ) ) : wc_price( $prices[0] );

        if ( $price !== $saleprice && $product->is_on_sale() ) {
            $price = 'Starts at <del>' . $saleprice . $product->get_price_suffix() . '</del> <ins>' . $price2 . $product->get_price_suffix() . '</ins>';
        }

        ?>
        <style>
            div.woocommerce-variation-price,
            div.woocommerce-variation-availability,
            div.hidden-variable-price {
                height: 0px !important;
                overflow:hidden;
                position:relative;
                line-height: 0px !important;
                font-size: 0% !important;
            }
        </style>
        <script>
        jQuery(document).ready(function($) {
            $('select').blur( function(){
                if( '' != $('input.variation_id').val() ){
                    $('p.price').html($('div.woocommerce-variation-price > span.price').html()).append('<p class="availability">'+$('div.woocommerce-variation-availability').html()+'</p>');
                    console.log($('input.variation_id').val());
                } else {
                    $('p.price').html($('div.hidden-variable-price').html());
                    if($('p.availability'))
                        $('p.availability').remove();
                    console.log('NULL');
                }
            });
        });
        </script>
        <?php

        echo '<p class="price">'.$price.'</p>
        <div class="hidden-variable-price" >'.$price.'</div>';

    endif;
}

This code changes the way variable products show up on the individual product pages. Here is an example:
https://pr-infrared.com/product/flir-scout-ls-x-r-thermal-monocular/

It takes the typical variation “range” and changes it to say “Starts at $XXXX”. When there is a sale, it shows the regular price crossed out, and the sale price next to it. It works perfectly!

The issue is that on the shop page (or category pages) it doesn’t display the price this way. See the example here:
https://pr-infrared.com/product-category/handheld-and-mobile-thermal-imaging/

I want it to display the price for variable products on sale the exact same way as on the product pages. “Starts at $XXXX” with a line through the original price, and the sale price in red next to it… only when the product is on sale of course.

Can anyone help me solve this? I’m more than happy to pay for someone’s time if they are willing to help.