How to load custom woocommerce mini cart template in custom widget

I want to create a custom widget for WooCommerce Mini Cart, but I also want to keep the default Mini Cart Mini widget, so I don't want the template to overlap by copying the mini-cart.php into my theme. I just copied the widget class from the plugins widget directory (plugins / woocommerce / includes / widgets / class-wc-widget-cart.php) and also created a new templates file for the mini-cart by copying the default mini-cart.php file in a file under my theme directory like custom-mini-cart.php, which is just a modified version of the main file. Now I want to load this template file for my widget. The widget class I'm using, which as you can see, is very similar to the main widget class:

class WC_Dropdown_Cart extends WC_Widget {

    public function __construct() {
        $this->widget_cssclass    = 'woocommerce widget_shopping_cart';
        $this->widget_description = __( "Custom Mini Cart", 'woocommerce' );
        $this->widget_name        = __( 'Custom Mini Cart', 'woocommerce' );
        $this->widget_id          = 'woocommerce_widget_custom_mini_cart';
        $this->settings           = array(
            'title'  => array(
                'type'  => 'text',
                'std'   => __( 'Cart', 'woocommerce' ),
                'label' => __( 'Title', 'woocommerce' )
            ),
            'hide_if_empty' => array(
                'type'  => 'checkbox',
                'std'   => 0,
                'label' => __( 'Hide if cart is empty', 'woocommerce' )
            )
        );
        parent::__construct();
    }

    function widget( $args, $instance ) {
    if ( is_cart() || is_checkout() ) {
        return;
    }

        $hide_if_empty = empty( $instance['hide_if_empty'] ) ? 0 : 1;

        $this->widget_start( $args, $instance );

        if ( $hide_if_empty ) {
            echo '<div class="hide_cart_widget_if_empty">';
        }

        // Insert cart widget placeholder - code in woocommerce.js will update this on page load
        echo '<div class="widget_shopping_cart_content"></div>';

        if ( $hide_if_empty ) {
            echo '</div>';
        }

        $this->widget_end( $args );
    }

}

      

        
        
        
      

    

Point at which WooCommerce calls this file inside the class widget function:

echo '<div class="widget_shopping_cart_content"></div>';

      

        
        
        
      

    

but WooCommerce does it with javascript which I can't seem to work with. What are the steps for doing this here?