How can I override these WooCommerce widget cart button functions

by

I have already tried about 20 different methods to get this working with no solution.

I am trying to change the classes of the buttons in the WooCommerce mini cart widget as shown below.

enter image description here

The mark up for those buttons is written in two functions inside the wc-template-functions.php file:

if ( ! function_exists( 'woocommerce_widget_shopping_cart_button_view_cart' ) ) {

        /**
         * Output the proceed to checkout button.
         *
         * @subpackage  Cart
         */
        function woocommerce_widget_shopping_cart_button_view_cart() {
            echo '<a href="' . esc_url( wc_get_cart_url() ) . '" class="button wc-forward">' . esc_html__( 'View cart', 'woocommerce' ) . '</a>';
        }
    }

    if ( ! function_exists( 'woocommerce_widget_shopping_cart_proceed_to_checkout' ) ) {

        /**
         * Output the proceed to checkout button.
         *
         * @subpackage  Cart
         */
        function woocommerce_widget_shopping_cart_proceed_to_checkout() {
            echo '<a href="' . esc_url( wc_get_checkout_url() ) . '" class="button checkout wc-forward">' . esc_html__( 'Checkout', 'woocommerce' ) . '</a>';
        }
    }

What is the correct way to override these functions within my own theme so that i can change the classes of those two buttons?

2 Answers
2

Not sure if you still need help with this but this might help others in your situation.

If you want to change the class of the <p> tag in your example, the file you need to edit can be found in /wp-content/plugins/woocommerce/templates/cart/mini-cart.php

Obviously, don’t directly edit the file. Copy it in to your theme (or preferably child theme) folder under /wp-content/themes/your-theme-folder/woocommerce/cart/mini-cart.php and you can edit line #75 to put in your own CSS class(es). Line #75 reads:

<p class="woocommerce-mini-cart__buttons buttons"><?php do_action( 'woocommerce_widget_shopping_cart_buttons' ); ?></p>

If you want to alter the CSS class of the <a> tag, then you’ll need to remove the default ‘action’ and create your own within your theme (or preferably child themes) functions.php file eg.

remove_action( 'woocommerce_widget_shopping_cart_buttons', 'woocommerce_widget_shopping_cart_button_view_cart', 10 );
remove_action( 'woocommerce_widget_shopping_cart_buttons', 'woocommerce_widget_shopping_cart_proceed_to_checkout', 20 );

function my_woocommerce_widget_shopping_cart_button_view_cart() {
    echo '<a href="' . esc_url( wc_get_cart_url() ) . '" class="btn btn-default">' . esc_html__( 'View cart', 'woocommerce' ) . '</a>';
}
function my_woocommerce_widget_shopping_cart_proceed_to_checkout() {
    echo '<a href="' . esc_url( wc_get_checkout_url() ) . '" class="btn btn-default">' . esc_html__( 'Checkout', 'woocommerce' ) . '</a>';
}
add_action( 'woocommerce_widget_shopping_cart_buttons', 'my_woocommerce_widget_shopping_cart_button_view_cart', 10 );
add_action( 'woocommerce_widget_shopping_cart_buttons', 'my_woocommerce_widget_shopping_cart_proceed_to_checkout', 20 );

You’ll need to clear your browser cache or add another item to the cart to see the changes as the cart content is saved in the browsers sessionStorage to avoid pulling a new copy on every page.

Leave a Comment