Home Forums WoodMart support forum how to add a block to show some info below “add to cart” button

how to add a block to show some info below “add to cart” button

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #611213

    bestshop24h
    Participant

    hi

    hi
    i would like to add a block to show the following info below “add to cart” button on the product detail page,

    just like the attached image,similar to
    https://www.banggood.com/LAOTIE-52V-1200W-Motor-10inch-Wheel-Electric-Scooter-Hub-Motor-Front-or-Rear-Drive-Brushless-Motor-For-LAOTIE-ES18-Lite-p-1975107.html?cur_warehouse=CN&ID=6290405&rmmds=search

    what should i do?

    sincerely

    Attachments:
    You must be logged in to view attached files.
    #611225

    bestshop24h
    Participant

    now i have known how to add some info below “add to cart” button at theme setting-single product-add to cart-After “Add to cart button”

    the new question is how to show up some text when hovering over a word text?
    just like the attached image

    thanks

    Attachments:
    You must be logged in to view attached files.
    #611337

    Hello,

    You need to find any third-party plugin to achieve more functionality that best suits you.
    https://essential-addons.com/tooltip/

    Best Regards

    #611340

    bestshop24h
    Participant

    problem solved
    1,create a html block for After “Add to cart button”

    2, select “html code” and add following code

    <span class="hover-textbest">Quality Guarantee<span class="tooltipbest">Some of Ebikedcmotor items enjoy [Quality Guarantee].<br> If the item you purchased has quality issues or problems caused by non-users,<br> and enjoys "Quality Guarantee", banggood will provide comprehensive after-sale service.</span></span> 
    

    3,add following code to theme setting-custome css

      /* Add this CSS to your page’s Additional CSS or inline */
      .hover-textbest {
          position: relative;
          cursor: pointer;
    		  color:black;
          display: inline-block;
      }
      
      .tooltipbest {
          display: none;
          position: absolute;
          bottom: 120%; /* Adjust as needed */
          left: 0;
          background-color: white;
          color: black;
          padding: 5px 10px;
          border-radius: 5px;
          font-size: 14px;
          white-space: nowrap;
          z-index: 1000;
      }
    
      .hover-textbest:hover .tooltipbest {
          display: block;
      }
    #611493

    Hello,

    You are Most Welcome.

    We are glad that you managed to solve the problem yourself. You are Great!!!

    Let us know if there’s anything else we can do for you! You can always reach us at any time. We are always here to help you.

    Have a wonderful day.

    Topic Closed.
    Best Regards.

Viewing 5 posts - 1 through 5 (of 5 total)

The topic ‘how to add a block to show some info below “add to cart” button’ is closed to new replies.