Woocommerce Question posted in
The official Woocommerce documentation can be found here.

Add CSS via javascript to an element works in console but not in html structure – Woocommerce

I want to add css (margin-top) to an element on woocommerce checkout page that contains the card error messages.

This is the code:

const cardError = document.getElementsByClassName('sumo-pp-stripe-card-errors');
cardError[0].style.marginTop = '100px';
console.log(cardError[0]);

It works fine when I look at it in the console tab.
enter image description here

But in the real html structure I can not see any changes.
enter image description here

What have I done wrong?

Tags:

3

Answers


  1. 0

    To add to html

    <div id="myDIV">
This is a DIV element.
</div>

    First make a css class
    you can change your desire css style inside here

    .mystyle {
  width: 100%;
  padding: 25px;
  background-color: coral;
  color: white;
  font-size: 25px;
  box-sizing: border-box;
}

    then write js like this

     var element = document.getElementById("myDIV");
   element.classList.add("mystyle");
    Login or Signup to reply.
  2. 0 
    const cardError = document.querySelector('.sumo-pp-stripe-card-errors');
cardError.style.marginTop = '100px';
    <div class="sumo-pp-stripe-card-errors">
  some test div
</div>

    Well this works Check!

    Login or Signup to reply.
  3. 0

    You need to make sure that your JavaScript runs after the DOM contains the elements.

    If you are adding the JavaScript code to the page itself, insert your <script> element at the end of the <body> element.

    If you are adding your code to an existing script that is at the start of the document, put your code in a function, then call that function when the DOM has loaded. Like this: document.addEventListener("load", myFunction)

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search