How to properly override “Start shopping” button text in Mini Cart block
-
I’m trying to customize the “Start shopping” button text in the WooCommerce Mini Cart block to display “Explore my art” instead. This text appears to be defined in:
plugins/woocommerce/assets/client/blocks/mini-cart-contents-block/shopping-button-frontend.js
Looking at the file, I can see the text is defined with:
const l=(0,n(7723).__)("Start shopping","woocommerce");
My Use Case
I’m building an art store and need to customize this text to better match the brand voice. Since this is a core WooCommerce file that would be overwritten during updates, I need a proper way to override just this text. What I’ve Tried
- Using the
gettext
filter (didn’t work):
function custom_woocommerce_button_text( $translated_text, $text, $domain ) {
if ( $text === 'Start shopping' && $domain === 'woocommerce' ) {
return 'Explore my art';
}
return $translated_text;
}
add_filter( 'gettext', 'custom_woocommerce_button_text', 20, 3 );- Direct DOM manipulation as a workaround (this works but feels hacky):
function custom_mini_cart_button_text_script() { ?> <script> document.addEventListener('DOMContentLoaded', function() { const observer = new MutationObserver(function(mutations) { const buttons = document.querySelectorAll('.wc-block-mini-cart__shopping-button'); buttons.forEach(function(button) { if (button.textContent.includes('Start shopping')) { button.textContent = 'Explore my art'; } }); }); observer.observe(document.body, { childList: true, subtree: true }); }); </script> <?php } add_action( 'wp_footer', 'custom_mini_cart_button_text_script' );
Question
What is the proper/recommended way to override this button text? Is there a specific hook or filter I should be using instead of manipulating the DOM directly?
The page I need help with: [log in to see the link]
- Using the
- You must be logged in to reply to this topic.