Quiero cambiar la cadena que se muestra como $0 a Gratis en WooCommerce.

La estructura de mi sitio web es la siguiente:

 <div class="wc-block-components-radio-control__description-group"> <span id="radio-control-0-free_shipping:2__description" class="wc-block-components-radio-control__description"> <span class="wc-block-formatted-money-amount wc-block-components-formatted-money-amount">$0</span>

Entonces, apliqué el siguiente código usando la ruta JS de las herramientas para desarrolladores de Chrome.

 <script> let text = document.querySelector("#radio-control-0-free_shipping\\:2__description > span").innerHTML; document.querySelector("#radio-control-0-free_shipping\\:2__description > span").innerHTML = text.replace("$0", "Free !"); </script>

Pero esto no funciona.

Así que volví a aplicar el código a continuación cambiando el querySelector, pero no funciona.

 <script> let text = document.querySelector(".wc-block-formatted-money-amount.wc-block-components-formatted-money-amount ").innerHTML; document.querySelector(".wc-block-formatted-money-amount.wc-block-components-formatted-money-amount ").innerHTML = text.replace("$0", "Free !"); </script>

Uncaught TypeError: Cannot read properties of null (reading 'innerHTML') .

He probado este código en diferentes casos, y funcionó. Pero no sé por qué no funciona en la página del carrito en WooCommerce.

¿Alguien puede aconsejarme sobre qué piezas debo arreglar?