How to load custom template for woocommerce mini cart in custom widget

Question

I want to create a custom widget for WooCommerce Mini Cart, but want to keep WC's default Mini Cart widget too, so I don't want a template override by copying mini-cart.php to my theme. I've just copied the widget class from plugin's widget directory(plugins/woocommerce/includes/widgets/class-wc-widget-cart.php) and also created a new template file for mini cart by copying default mini-cart.php's code in a file under my theme's directory e.g. custom-mini-cart.php which is just a modified version of core file. Now I want to load that template file for my widget. The widget class I'm using which as you can see is very similar to the core widget's 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 );
    }

}

The point where WooCommerce calls that file inside widget function of the class is:

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

but WooCommerce does it in a javascript way which I am not able to work around. What are the steps to do it here?

Answer 1

A simpler solution would be to use WooCommerce Hooks:

https://woocommerce.github.io/code-reference/namespaces/default.html

mini cart hook:

https://woocommerce.github.io/code-reference/namespaces/default.html#function_woocommerce_mini_cart

You can create a custom template in your case the code you copied and modified from WooCommerce original code and then remove WooCommerce default using this action:

remove_action( 'woocommerce_after_mini_cart', 'action_woocommerce_after_mini_cart', 10, 0 );

and then load your template/file instead by using the action:

add_action( 'woocommerce_after_mini_cart', get_template_part('your-template-path'), 10, 0 );

WooCommerce has very nice hooks you can leverage in your theme development, please check the first link to see all the hooks.

Happy coding :)