i have created a plugin.
the plugin replace the add to cart button, to popup with continue botton.for every product that the shop owner choose.
i want that to redirect the user to my custom page when the button is clicked. and i need that the page will display diffrent thing for diffrent product id. where do i put the page in my plugin folder?

how to i redirect to it ?

i need that the page will use the shop theme, for example i want that the page will display the product page as is, by getting the product id in the url …

the code is the function that replace the button by id.

function replacing_add_to_cart_button( $button, $product  ) {
  $product_id = $product->get_id();
  global $wpdb;

  $shopName = getShopName();
  $existQuary = "SELECT * FROM `wp_onePlusOne` WHERE `id` = '$product_id'";
  $existQuaryRes = $wpdb->get_results($existQuary);//simplafy query

    $id_onePlusOne = get_object_vars($existQuaryRes[0])['id'];
    $button_text = __("1+1", "woocommerce");
    $button ="<div>".$button."
    <button id='myBtn".$id_onePlusOne."' onclick='display".$id_onePlusOne."()'>1+1</button>
      <div id='myModal".$id_onePlusOne."' class='modal'>
        <div class='modal-content".$id_onePlusOne."'>
          <span id='close".$id_onePlusOne."' class='close".$id_onePlusOne."'  onclick='spanDisplay".$id_onePlusOne."()'>&times;</span>
          <p id='".$id_onePlusOne."'><a href='http://linlRedirectTo."/".$id_onePlusOne."'  onclick='unDisplay".$id_onePlusOne."()' target='_blank'>" . $button_text . '</a>'  ."</p>
      .modal {
          display: none;
          position: fixed;
          z-index: 1;
          padding-top: 100px;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
          overflow: auto;
          background-color: rgb(0,0,0);
          background-color: rgba(0,0,0,0.4);
      .modal-content".$id_onePlusOne." {
          background-color: #fefefe;
          margin: auto;
          padding: 20px;
          border: 1px solid #888;
          width: 80%;
      .close".$id_onePlusOne." {
          color: #aaaaaa;
          float: right;
          font-size: 28px;
          font-weight: bold;
      .close".$id_onePlusOne.":focus {
          color: #000;
          text-decoration: none;
          cursor: pointer;
    function display".$id_onePlusOne."() {
        document.getElementById('myModal".$id_onePlusOne."').style.display = 'block';
    function unDisplay".$id_onePlusOne."() {
        document.getElementById('myModal".$id_onePlusOne."').style.display = 'none';
    function spanDisplay".$id_onePlusOne."() {
        document.getElementById('myModal".$id_onePlusOne."').style.display = 'none';
    window.onclick = function(event) {
        if (event.target == document.getElementById('myModal".$id_onePlusOne."')) {
            document.getElementById('myModal".$id_onePlusOne."').style.display = 'none';
    </script></div>" ;

  return $button;


thank you !!!


You can use the template_include filter that will change the usual template for your redirect link. You can also mix it with template_redirect action. https://codex.wordpress.org/Plugin_API/Filter_Reference/template_include

  • that might work. but few more questions: 1.how can i connect that code to a specific button? 2.i need to send an id param with the url so the page will reload diffrent products how to do it?
    – bogin
    May 10 '18 at 11:57

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.