Use Jquery to swap out text without the need for a separate update button

Question

Use Jquery to swap out text without the need for a separate update button

Looking to replace "Gastos de envío: " with "Shipping costs" on the English page.

I currently have this jQuery code (which is working), but it only replaces the text the first time you visit the page. If you update the shipping costs, the jquery does not replace the text again.

Is there a way to automatically replace the text without needing an update button?:

jQuery(function ($) {

  jQuery('label[for^="shipping_method_0').contents().filter(function() { 
    return this.nodeType === 3 && jQuery.trim(this.textContent).length;
  })
  .replaceWith('Shipping\ costs: ');

});

https://i.sstatic.net/ZSJtC.png https://i.sstatic.net/qk5sQ.png

Update: Not permitted to alter the HTML code

html jquery css

Answer 1

Answer №1

If you're looking for a way to customize your shipping costs display, you can follow this example:

<label>
    Shipping Costs
    <span class="woocommerce-Price....">120.87 €</span>
    <small>(incl. VAT)</small>
</label>
<button id="YourBTN">SUBMIT</button>

And if you want to change the text using JavaScript, here's how you can do it:

<script>
    $(document).ready(function(){
        $("#YourBTN").click(function(){
            $("label").each(function() {
              var text = $(this).text();
                text = text.replace("Shipping Costs", "New Shipping Label");
                $(this).text(text);
          });
        });
    });
</script>

Hope this helps!

Answer 2

If you're looking for a way to customize your shipping costs display, you can follow this example:

<label>
    Shipping Costs
    <span class="woocommerce-Price....">120.87 €</span>
    <small>(incl. VAT)</small>
</label>
<button id="YourBTN">SUBMIT</button>

And if you want to change the text using JavaScript, here's how you can do it:

<script>
    $(document).ready(function(){
        $("#YourBTN").click(function(){
            $("label").each(function() {
              var text = $(this).text();
                text = text.replace("Shipping Costs", "New Shipping Label");
                $(this).text(text);
          });
        });
    });
</script>

Hope this helps!

Use Jquery to swap out text without the need for a separate update button

Answer №1

Similar questions

What could be causing my Bootstrap carousel to only slide once?

Avoiding cheating in a JavaScript game

The conceal feature doesn't appear to be functioning properly on jQuery Mobile

AJAX call using jQuery not returning the expected callback result

I'm confused about what I did wrong with Node.js. The server.js is up and running, but I'm unable to view the

Utilizing the Power of ChartJs

Change the text inside a container without losing any associated event listeners using JavaScript or jQuery

Updating multiple divs with the same class using different values returned from an AJAX success callback in jQuery

Passing a JSON object to a different page using jQuery

Instructions on setting div opacity when Overflow is set to visibleExplanation on setting opacity for div with Overflow

Tips for showing a form's help text when manually rendering fields in Django forms?

Differences between using tables and divs for form layouts

Align the text to the center within the Paper component using React and Material-ui

The themes showcased in the Bespoke.js documentation and demo exhibit unique designs

How can I display base64 image data in a new window without triggering a block?

Resize images within a button using table cell size in Bootstrap

Creating two interactive animations utilizing a combination of CSS and Javascript, triggered by the click event on

What's the deal with jQuery and Intraweb?

I'm experiencing issues with my code involving HTML, CSS, and jQuery

Transferring an HTML file to a destination stream