WordPress for Php:: WooCommerce :: Checkout Extra Option

Hi Angelic

Correct me if im wrong but it sounds like your trying to dynamically show or hide the shipping information?

You cannot do this with php, php is executed on the server, therefore a change in a drop-down box will have no affect on how the page looks.

What you need is something client-side like javascript that will listen for an event, and display or hide the information.

Now there are ways to do it with php, but the information has to go back to the server. e.g. a refresh of the page will run the page again at the server.

Also, probably irrelevant now but you have an invalid elseif statement, if should be this:

if ( something ){
  ...
}
elseif ( something_else ){ // Note the combination of the words.
   ...
}

Hope this makes sense

Ok, i need a bit more information then.

how are you submitting the form data?

and are the required fields on the server side or client?

a potential solution is an ajax call with javascript, depending on your answer to the above two questions

Try something like this:

$(document).ready(function() {
  (function($) {
    var dropdown = $("#pickup_");
    var selected = $("#select2-pickup_-container").attr("title");

    var bindEvents = function() {
      dropdown.on("change", toggleDifferentAddress);
    };

    var toggleDifferentAddress = function() {
      if ( selected === "Yes" ) {
        $(".ship-to-different-address-checkbox").hide();
      } else {
        $(".ship-to-different-address-checkbox").show();
      }
    };

    bindEvents();
  })(jQuery);
});

change the select variable with the dropdown select id, you also need an if statement to determine what the value is on the event of change

EDIT: Ok so ive tried this code and it works.

it gets the dropdown select ID and the selected title attriute

on the change event, the selected title attribute is set to the dropdown value (either yes or no)

if the value is yes hide, else show

  (function($) {
    var dropdown = $("#pickup_");
    var selected = $("#select2-pickup_-container").attr("title");

    var bindEvents = function() {
      dropdown.on("change", toggleDifferentAddress);
    };

    var toggleDifferentAddress = function() {
      selected = $(this).val();

      if ( selected === "Yes" ) {
        $(".ship-to-different-address-checkbox").hide();
      } else {
        $(".ship-to-different-address-checkbox").show();
      }
    };

    bindEvents();
  })(jQuery);

... thats the javascript sorted but i feel we've gone off track as this isnt what i originally though the problem was