Change “Shipping to” traduction in woocommerce gutenberg blocks

Hi Dorian,

Thank you for contacting WooCommerce Plugin Support. I understand you are having trouble with the translation of “Shipping to” in WooCommerce Gutenberg blocks.

There are a few possible solutions to the issue. Here are the steps that you can try:

• You can use a plugin like Loco Translate or Say What? to create a custom translation for the text “Shipping to”. These plugins allow you to change the text without editing any code.
• You can use a filter hook to change the text “Shipping to” in your functions.php file. You need to use the ‘woocommerce_shipping_package_name’ filter and specify the text that you want to use instead.
• You can use custom CSS code to hide the text “Shipping to” and replace it with another text using the ::before or ::after pseudo-elements. For this, you need to inspect the element and find the CSS selector that targets the text. For example, you can use something like this:

.wc-block-components-shipping-calculator-address__heading {
  visibility: hidden;
}

.wc-block-components-shipping-calculator-address__heading::before {
  content: "Your custom text";
  visibility: visible;
}

If you want to try this method, please share your site URL with us so that we can check the CSS selector and the code for you.

I hope this helps you to resolve your issue. Let us know if there’s anything else we can help you with.

Thank you for choosing WooCommerce and have a great day!

Hi Afzal,

Thanks for your quick response.

Here is the website link if you want to test : http://package-wp-ecommerce.s193595.planetecom49-001.webo-facto.com/panier/

As i said, i think this text is generated by a js (or .tsx) file, so solutions like Loco Translate or PHP filter won’t work.

For information, when i search the CSS class of the element in all the woocommerce plugin folder, i see it’s used only in js, tsx and CSS/SCSS files :

Hi @doriansgn

The issue you’re experiencing is a bit complex since JavaScript is generating the text, and you want to change it based on the user’s selection. Unfortunately, CSS alone won’t be able to handle this conditionally as it doesn’t have access to the state of the application.

However, there’s still a way to solve this. You can create a JavaScript file in your theme and enqueue it in your functions.php file. In this JavaScript file, you can add an event listener that will watch for changes in the shipping option. When a change is detected, you can then modify the text accordingly.

Please note that writing or providing custom code is not within the scope of our support policy. Therefore, if you need help with custom development tasks, we recommend asking development questions on the #developers channel of the WooCommerce Community Slack. Many of our developers hang out there and will be able to offer insights into your question. You can also seek help from the following:

I wish I could help more, but hopefully, this gets you going in the right direction to get the job done.

Hi Shameem,

Thanks for your response, i will try to do it that way.

Have a nice day,

Dorian