skip to Main Content

Im building e-commerce website on wordpress and I want to style woocommerce preorder countdown.
Countdown is created with jQuery Countdown by Keith Wood. What I need is to style only numbers: change their size and background. Im not familiar with Jquery and i dont know how to split text or something like this. Also, I dont know is that really possible.

<div class="woocommerce-pre-orders-countdown hasCountdown" id="woocommerce-pre-orders-countdown-1592892000">  6 Days 22 Hours 58 Minutes 12 Seconds</div>

2

Answers


  1. var txt = $('.hasCountdown').text();
    var splited = txt.split('');
    var flag = true;
    var man = '';
    var st = '';
    for (var i = 0; i < splited.length; i++) {
      if ((48 >= splited[i].charCodeAt(0)) || (splited[i].charCodeAt(0) <= 57)) {
        st += splited[i];
        flag = false;
      } else {
        flag = true;
      }
      if (flag && st) {
        man += '&nbsp<span style="font-size:40px;background:red">' + st + '</span>&nbsp' + splited[i];
        st = '';
      } else {
        if (flag && !st) {
          man += splited[i];
        }
      }
    }
    $('.hasCountdown').html(man);
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <div class="woocommerce-pre-orders-countdown hasCountdown" id="woocommerce-pre-orders-countdown-1592892000"> 6 Days 22 Hours 58 Minutes 12 Seconds</div>
    Login or Signup to reply.
  2. Here’s a vanilla-flavored solution that grabs the contents of the div, wraps each number is a styled span element, and overwrites the div contents with the new version.

    You can choose your preferred size and color by changing the values of sizeMultiplier and background variables. It’d be cleaner to use a CSS class to provide the formatting (and the script would just apply the CSS class) but I didn’t know how easy it would be for you to modify the CSS files.

    See the in-code comments for some further explanation.

    let
      // Options -- these determine the number formatting
      sizeMultiplier = 1.5,
      background = "lightskyblue";
    
    const
      // Identifies HTML elements
      element = document.getElementById("my-div"),
      tempDiv = document.createElement("div"),
      btn = document.querySelector('button');
    
    // Makes button work for demo
    btn.addEventListener('click', formatNums);
    
    // Replaces HTML in element with formatted version
    function formatNums(){
      // Makes array from div contents, then converts item to DOM nodes
      const tokens = element.textContent.split(" ");
      const nodes = tokens.map( (token) =>
        // Numbers get formatted, other text is left as-is
        isNum(token)
          ? numSpan(token, sizeMultiplier, background)
          : textNode(token)
      );
      // Puts all the nodes into an empty div
      nodes.forEach( (node, i) => {
        tempDiv.appendChild(node);
        tempDiv.insertAdjacentHTML("beforeend",
          i < nodes.length - 1 ? " " : ""
        );
      });
      // Replaces contents of original element
      element.innerHTML = tempDiv.innerHTML;
    }
    
    // Tests whether each item is a number
    function isNum(token){
      return parseFloat(token) < Infinity
    }
    
    // Makes basic nodes for regular text
    function textNode(word){
      return document.createTextNode(word);
    }
    // Makes a styled span for a number
    function numSpan(num, size, color){
      const span = document.createElement("span");
      span.style.fontSize = size +"em";
      span.style.padding = size/4 + "ch"; // Makes background wider than num
      span.style.backgroundColor = color;
      span.textContent = num;
      return span;
    }
    button{ margin: 10px; border-radius: 0.3em; }
    <button>APPLY FORMATTING</button>
    <div id="my-div"> 6 Days 22 Hours 58 Minutes 12 Seconds</div>
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search