Ask a question Option in Woocommerce

  • raunhar

    (@raunhar)


    1 year ago

    I am looking for a plugin, which can be integrated with Woocommerce, so that instead of Add to Cart, the button should be As a Question, and on clicking it, a a form should open up with the Product Id/ name in subject.

    It is available in Virutemart Joomla.

Viewing 1 replies (of 1 total)
  • Mayuri

    (@mayuripatel)

    1 year ago

    Hello ,

    there are 2 ways .

    1. With Plugin : Plugin to change addtocart button name : https://wordpress.org/plugins/woo-custom-add-to-cart-button/

      You can use this plugin to show popup : https://nl.wordpress.org/plugins/get-a-quote-button-for-woocommerce/ , it will add 1 button and on click it will show 1 popup.
    2. Without plugin (Programmatically) :

      use below code in your current theme’s functions.php file to change Addtocart button text on Product detail page : 
    
add_filter( 'add_to_cart_text', 'woo_custom_cart_button_text' );                   
add_filter( 'woocommerce_product_single_add_to_cart_text', 'woo_custom_cart_button_text' );

function woo_custom_cart_button_text() {
	return __( 'Ask a Question', 'woocommerce' );
}

    THen add jquery code to your theme’s JS file / header.php to get current Product ID when you click on Addtocart button 

    <script>
// Use your addtocart button's Class name , here i have used my addtocart button's class ".single_add_to_cart_button"
jQuery('.single_add_to_cart_button').click(function(e) {
      e.preventDefault();
      var ProductId = jQuery(this).attr('value');
      addToCart(ProductId);
      return false;
   });    

   function addToCart(ProductId) {
   	  alert(ProductId);
       //show popup with html form 
      // process user data
   }
</script>

    and You can integrate HTML POPUP example listed below As per your requirement :
    reference urL for HTML popup : https://www.cluemediator.com/create-a-modal-popup-using-jquery

    <!DOCTYPE html>
<html>

<head>
  <title>Create a Modal Popup using jQuery - Clue Mediator</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <style type="text/css">
    body {
      font-family: Helvetica, Arial, sans-serif;
    }

    p {
      font-size: 16px;
      line-height: 26px;
      letter-spacing: 0.5px;
      color: #4f4343;
    }

    /* Popup open button */
    .openBtn {
      color: #FFF;
      background: #269faf;
      padding: 10px;
      text-decoration: none;
      border: 1px solid #269faf;
      border-radius: 3px;
    }

    .openBtn:hover {
      background: #35c7db;
    }

    .popup {
      position: fixed;
      top: 0px;
      left: 0px;
      background: rgba(0, 0, 0, 0.58);
      width: 100%;
      height: 100%;
      display: none;
    }

    /* Popup inner div */
    .popup-content {
      width: 600px;
      margin: 0 auto;
      padding: 40px;
      margin-top: 100px;
      border-radius: 3px;
      background: #fff;
      position: relative;
    }

    /* Popup close button */
    .closeBtn {
      position: absolute;
      top: 5px;
      right: 12px;
      font-size: 17px;
      color: #7c7575;
      text-decoration: none;
    }
  </style>
</head>

<body>

  <h2>Create a Modal Popup using jQuery - <a href="https://www.cluemediator.com/" target="_blank" rel="noopener noreferrer">Clue Mediator</a></h2>
  <a class="openBtn" href="javascript:void(0)"> Click to open Popup </a>

  <div class="popup">
    <div class="popup-content">
      <h2>Popup Title</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
        pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
        laborum.</p>
      <a class="closeBtn" href="javascript:void(0)">x</a>
    </div>
  </div>

  <script type="text/javascript">
    $(document).ready(function () {

      // Open Popup
      $('.openBtn').on('click', function () {
        $('.popup').fadeIn(300);
      });

      // Close Popup
      $('.closeBtn').on('click', function () {
        $('.popup').fadeOut(300);
      });

      // Close Popup when Click outside
      $('.popup').on('click', function () {
        $('.popup').fadeOut(300);
      }).children().click(function () {
        return false;
      });

    });
  </script>

</body>

</html>
    • This reply was modified 1 year ago by Mayuri.
Viewing 1 replies (of 1 total)
  • The topic ‘Ask a question Option in Woocommerce’ is closed to new replies.