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

Javascript: Issue with hiding a section – Woocommerce

Background

If users have the item called Get All X in their cart, then I want to hide the upsell section called wcf-bump-order-content.

What I have tried

window.addEventListener("load", function () {
  var you1 = document.getElementsByClassName("product-name");
  var you5 = "";

  for (var i = 0; i < you1.length; i++) {
    var you2 = you1[i].textContent;
    var you3 = you2.replace(/s/g, "");
    var you4 = you3.replace("Xs", "");
    you5 += you4;
  }
  var you6 = you5.includes("GetAllX");
  if (you6 = "true") {
    document.getElementsByClassName("wcf-bump-order-content")[0]
            .setAttribute("style", "display:none !important");
  }
  console.log(you6);
  console.log("finish");
});

Full code + HTML: https://jsfiddle.net/lindychen/14vLfcy5/

Results

As you can see from the JS fiddle, my code works and hides the relevant section. However, when I test this on my live website, it doesn’t work (ie. the upsell section still shows). I can’t figure out what’s wrong especially since console log shows you6 to be true and finish is also shown.

Thanks.

Tags:

2

Answers


  1. 0

    There are a couple of issues. First, you have a mistake in the conditional if (you6 = "true") should be if (you6 === true) or just if(you6). The single equals vs. == or === and the string "true" vs the boolean value true.

    The second problem I found after fixing the conditional in the jsfiddle and it stopped working. The problem was using <td> tags without the requisite <table><tbody><tr> around it was causing the query not to return a valid element list.

    After fixing that, the jsfiddle was working again. https://jsfiddle.net/evrmorr/k481pyjm/14/

    Login or Signup to reply.
  2. 0

    Instead of

    if (you6 = "true") {
...
}

    use

    if (you6) {  //or if(you6 == true) or if(you6 =="true") or if (you6 === true)
...
}

    because you6 = "true" is an assignment, not a comparison and it will always be considered true unless you assign null or empty string to you6.

    For example:

    if(x="")
{ console.log('a')} 
else 
{console.log('b')}

//will display b

    however

    if(x="anything other than empty string will be considered true")
{ console.log('a')} 
else 
{console.log('b')}

//will display a
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search