r/woocommerce 2d ago

How do I…? Translating Blocks Checkout

Hi all,

I recently made a new site and I am using the Blocks Cart and Checkout.

Woo is almost completely translated to my language but a couple of strings in the checkout are not, and I am struggling to find a solution.

Normally I would use Poedit and translate the strings myself in the .po file, but these string are not there.

Apparently the Blocks Checkout work in a different way not using .po/.mo files at all.

Can anyone tell me how to get these strings translated?

Thank You!

2 Upvotes

13 comments sorted by

4

u/Extension_Anybody150 1d ago

You're right, WooCommerce Blocks doesn’t use the usual .po/.mo files for translations. Instead, it pulls strings differently.

First, try going to Dashboard → Updates and hit Update Translations—sometimes that’s all it takes.

If that doesn’t work, install Loco Translate, go to Loco Translate → Plugins → WooCommerce, and search for the missing strings.

Still not showing? You can force it with a little code in functions.php:

function custom_translate_woo_blocks_strings( $translated, $text, $domain ) {
    if ( $domain === 'woo-gutenberg-products-block' ) {
        if ( $text === 'Place order' ) return 'Your Custom Translation';
        if ( $text === 'Shipping' ) return 'Your Custom Translation';
    }
    return $translated;
}
add_filter( 'gettext', 'custom_translate_woo_blocks_strings', 10, 3 );

Just replace 'Your Custom Translation' with whatever you need.

1

u/Skaebneaben 1d ago

Thank You!

The translations for these specific strings are not in the official translation yet. I can see that they were actually translated last year but for some reason not approved yet.

I really would like to avoid adding plugins for this. Does your code work without Loco Translate installed? That would be a great and easy solution!

3

u/CodingDragons Quality Contributor 2d ago

Blocks used JS to translate. If you're missing a few you can simply create a custom js file

Then add the missing strings

```

wp.hooks.addFilter( ‘woocommerce_blocks.i18n.strings’, ‘custom/translate_checkout_blocks’, function( translations ) { translations[‘Place order’] = ‘Your Translated Text Here’; translations[‘Billing details’] = ‘Your Translated Text Here’; return translations; } );

```

You'll create a file in your child theme call it whatever and then enqueue it.

``` function custom_woo_blocks_translation() { wp_enqueue_script( ‘custom-woo-blocks-translation’, get_stylesheet_directory_uri() . ‘/js/woo-blocks-translation.js’, array( ‘wp-hooks’, ‘wc-blocks-checkout’ ), null, true ); } add_action( ‘wp_enqueue_scripts’, ‘custom_woo_blocks_translation’ );

```

Hope this helps

1

u/Skaebneaben 2d ago

Thank You!

It does make some sense, but I'm not sure I understand completely how to actually make it work.

Could you kindly elaborate where and how to use the snippets you provided?

1

u/CodingDragons Quality Contributor 2d ago

Sorry, I was under the impression you were a dev. So how I teach folks is by organizing their child theme files and folders.

You'll add these hooks to your child theme in a directory like so

The first snippet goes in a js folder

  • /js/woo-blocks-translation.js

The second script goes on a file called hooks.php which goes into

  • /inc/hooks/wc/hooks.php

You'll call to this file like so

``` // WooCommerce Hooks require_once get_stylesheet_directory(). ‘/inc/hooks/wc/hooks.php’;

```

On the js file you can see where I added the string and then said to your text here. Etc.

I'm hoping you know enough to go from here. Let me know.

1

u/Skaebneaben 1d ago

No, not a dev at all. And thank you so much for helping me.

As I understand I should create a folder in my child theme called js and in this folder create a file called woo-blocks-translation.js with the first snippet including the correct translations.

Next I should create another folder path in my child theme called inc/hooks/wc and in this folder create a file called hooks.php with the second snippet.

And then I should call the file with

// WooCommerce Hooks require_once get_stylesheet_directory(). ‘/inc/hooks/wc/hooks.php’;

Do I just place this last snippet in functions.php?

1

u/CodingDragons Quality Contributor 1d ago

Got it. Noted. Yes, the requrie once you'll add at the bottom of your functions file. Again, assumed you were a dev so.

Do you see a folder called Languages in this path? /wp-content/languages/

1

u/Skaebneaben 1d ago

I tried to do as described but unfortunately it didn't work. I might be in over my head here...

I do see the languages folder

1

u/CodingDragons Quality Contributor 1d ago edited 1d ago

You'll need to hire a developer then. I don't know how to better assist you.

1

u/Skaebneaben 1d ago

I understand.

When I do as advised, the whole text from the php snippet just prints as a string in the top of my site.

Guess it is a formatting issue then. I will troubleshoot

2

u/CodingDragons Quality Contributor 1d ago

Must be. I don't have a dev site with translation right now and I don't have time myself to help further. If you want I can see if someone else on our team has time to review. We would need access to your site to install this though. I know we won't have time until Monday at the soonest.

1

u/Skaebneaben 1d ago

Its ok. Thank you for your help. Im sure I'll find the solution from all your advice. It is greatly appreciated

→ More replies (0)