Support » Fixing WordPress » Allowing users to input text that overlays a product’s image

  • Hello, I have been tasked with the objective of allowing a user to enter in a string of text to customize a product and have the string overlay the products image. I have written the HTML/Javascript for it to work within the Atom code editor environment but I cannot get it to work properly within a wordpress & woocommerce product page. The image is either removed and the text takes its place or the text doesn’t show at all (I believe it is behind it). Here is the code. Hope someone can help. Thank you.
    ——————————————————-

    <!DOCTYPE html>
    <html>
    <body>
    
    <div>
    <h1>Bag Customization</h1>
    </div>
    
    <!--Prompt the user to enter the string-->
    Customize <input type="text" id="myText" onfocus="this.value=''" value="Enter Text Here" maxlength="15">
    <!--When the button is clicked accept the string-->
    <button onclick="myFunction()">Submit</button>
    
    <div class="container">
      <img src="backpack test.jpg" alt="alt image" />
      <p class="centered" id="demo">Text Shows here</p>
    </div>
    
    <!--A Function that take the users text input and places it on the image-->
    <script>
    function myFunction() {
      var x = document.getElementById("myText").value;
      document.getElementById("demo").innerHTML = x;
    }
    </script>
    
    </body>
    <style>
    /*Begin css*/
    /* Container holding the image and the text */
    .container {
      margin-top: 50px;
      margin-bottom: 20px;
      margin-right: 200px;
      margin-left: 200px;
      position: relative;
      text-align: center;
      border-style: solid;
      border-color:black;
    }
    
    /* Centered text */
    .centered {
      position: absolute;
      /*Moves the default text to the center of the page*/
      top: 50%;
      left: 50%;
    
      /*Sets the inputted text to the center of the image horizontally*/
      transform: translate(-50%, -50%);
      Color:white;
    
      /*Sets the font for the text*/
      font-family: industry, sans-serif;
      font-style: normal;
      font-weight: 700;
      Font-Size:30px;
    
      /*Remove upon completion*/
      border-style: dashed;
      border-color:Green;
    }
    /*end css*/
    </style>
    </html>
    • This topic was modified 1 year, 2 months ago by jpattwell.
    • This topic was modified 1 year, 2 months ago by Steve Stern.
Viewing 2 replies - 1 through 2 (of 2 total)
  • Hi @jpattwell,

    It looks as though you also need to set a z-index on .centered to make sure your text displays above the image.

    The highest z-index you can set is 9999 which you can use initially to make sure that the z-index is definitely the issue, but then make sure you reduce it as much as possible so that your text doesn’t display over the top of other things as you scroll (often an issue on mobile devices). Good practice is usually to set things in multiples of 10 so in this case a final z-index: 10; should be sufficient.

    I hope that helps 🙂

    Thank you for the advice. I will have time to test it later in the week and get back to you to see if that solved it.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Allowing users to input text that overlays a product’s image’ is closed to new replies.