Ecommerce Shopify WordPress Discussion

Issue with changing the text of the 'Proceed to Checkout' button in WooCommerce

I am facing an issue while trying to change the text of the 'Proceed to Checkout' button in WooCommerce. My theme is in Spanish, and it's a 'GeneratePress' template. However, the shopping cart button and the 'Remove item' link have remained in English. I have tried several solutions, including translation filters, DOM manipulation with JavaScript, and other methods suggested online, but none have been successful. I am using WordPress with WooCommerce, and my goal is to change the text of the 'Proceed to Checkout' button to 'Ir a Pagar' and 'Remove item' to 'Eliminar' in my online store. I have tried the following solutions as functions within the functions.php file of my theme: function custom_proceed_to_checkout_text() { ?> <script type="text/javascript"> jQuery(document).ready(function($) { $('body').on('updated_checkout', function() { var buttonText = 'Ir a Pagar'; $('.wp-block-woocommerce-proceed-to-checkout-block .wc-forward').text(buttonText); }); }); </script> <?php } add_action('wp_footer', 'custom_proceed_to_checkout_text'); The previous function uses jQuery, as does the following one: // Función para cambiar el texto del botón de checkout function custom_proceed_to_checkout_text() { ?> <script type="text/javascript"> jQuery(document).ready(function($) { $(document.body).on('updated_cart_totals', function () { var buttonText = 'Ir a Pagar'; $('.wp-block-woocommerce-proceed-to-checkout-block').html('<a class="checkout-button button alt wc-forward" href="' + wc_checkout_params.checkout_url + '">' + buttonText + '</a>'); }); }); </script> <?php } add_action('wp_footer', 'custom_proceed_to_checkout_text'); Neither of the two worked; then I tried with the following: function custom_proceed_to_checkout_text() { ?> <script type="text/javascript"> jQuery(document).ready(function($) { $('.wp-block-woocommerce-proceed-to-checkout-block').find('.wc-forward').text('Ir a Pagar'); }); </script> <?php } add_action('wp_footer', 'custom_proceed_to_checkout_text'); And with this other one: function custom_translate_text($translated, $text, $domain) { if ($text === 'Proceed to checkout') { $translated = 'Ir a Pagar'; } return $translated; } add_filter('gettext', 'custom_translate_text', 20, 3); Then, there is one with JavaScript: function custom_proceed_to_checkout_text() { ?> <script type="text/javascript"> document.addEventListener('DOMContentLoaded', function() { // Espera a que se cargue el DOM var checkoutButton = document.querySelector('.wp-block-woocommerce-proceed-to-checkout-block a.wc-block-components-button'); if (checkoutButton) { // Cambia el texto del botón checkoutButton.textContent = 'Ir a Pagar'; } }); </script> <?php } add_action('wp_footer', 'custom_proceed_to_checkout_text'); I would greatly appreciate if someone could provide a solution or suggest a different approach to achieve this text change on the checkout button and the 'Remove item' link. Thank you in advance!
I'm making the assumption that your selector is correct. Be sure to test that if this doesn't work. My solution supposes that this button text in coming into being after the page loads and so you need to come along and set the text after. Also, note the comment to add some conditional logic so that the following only runs when it needs to rather than on every page of the site. function custom_proceed_to_checkout_text() { // add a conditional here to determine if you are on a page where // this button will appear, and also for if the language is set to Spanish ?> <script type="text/javascript"> jQuery(document).ready(function($) { var buttonTextInterval = setInterval( function(){ if( $('.wp-block-woocommerce-proceed-to-checkout-block .wc-forward') ){ var buttonText = 'Ir a Pagar'; $('.wp-block-woocommerce-proceed-to-checkout-block .wc-forward').text(buttonText); clearInterval(buttonTextInterval); }, 250); // this will check 4 times per second }); }); </script> <?php } add_action('wp_footer', 'custom_proceed_to_checkout_text');

January 17, 2024

TurboCommerce make the better internet purchasing globaly

Turbo Multi-language Translator

Make the better internet purchasing globaly

Turbosify SEO Speed Booster

5.0 (7) Free plan available
Get better conversions by improving store loading speed Installed

Turbo Multi-language Chat - AI Customer service in one hand

TurboCommerce make the better internet purchasing globaly
Our products

The help you need, when you need it

App by Turbo Engine

3 apps • 5.0 average rating

Turbosify Speed Booster

5.0 (7)
Get better conversions by optimizing shopify store Google page speed Installed

Turbosify Translator for Wordpress Woocommerce

5.0 (74) Free Wordpress Woocommerce Plugin
Translate your wordpress website to multiple language within 1 click, no configuration needed, no No technical required

Grow your business here

Whether you want to sell products down the street or around the world, we have all the tools you need.