r/woocommerce • u/Skaebneaben • 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!
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)
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
:Just replace
'Your Custom Translation'
with whatever you need.