2

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?

1

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.

  • The solutions looks like it should work, but it's not working for me. I added it to the functions.php in child theme but the changes seem not to work. Is there any other cache mechanism maybe? – Karl Adler Jan 6 '18 at 13:36
  • NVM i used a sub-theme for an sub-theme which didn't used the widget functions... – Karl Adler Jan 6 '18 at 13:49

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.