Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

WordPress

Angelic Sanoy
seal-mask
.a{fill-rule:evenodd;}techdegree
Angelic Sanoy
Full Stack JavaScript Techdegree Student 6,583 Points

WordPress for Php:: WooCommerce :: Checkout Extra Option

Hi guy. I'm trying to create an if statement. If the Pickup label set to yes>. I want to hide the shipping address. If it is nothen I want to keep it visible. I added the code in my function.php. Any idea how to fix it? Here's the link

Name of the custom class is select2-selection__rendered and ID is select2-pickup_-container with two options title. Yes and Not

Check the image1 here for reference Check the image2 here for reference

function (woocommerce_disable_shipment_option_if_pickup_is_true){
$pickup-options = array (
    'Yes' => true,
    'No' => false
) 

if ( $pickup-options == 'Yes') ) {
        add_filter( 'woocommerce_cart_needs_shipping_address', '__return_false'); 
    }
if else ($pickup-options == 'No' ) {
        add_filter( 'woocommerce_cart_needs_shipping_address', '__return_true'); 
    }

}

5 Answers

Angelic

paste this in, ive tested this on your site and it works

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

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

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

      if ( selected === "Yes" ) {
        $(".woocommerce-shipping-fields").hide();
      } else {
        $(".woocommerce-shipping-fields").show();
      }
    };

    bindEvents();
  })(jQuery);

then remove the console.log once your satisfied the correct values are being passed

Good Luck!

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

Angelic Sanoy
seal-mask
.a{fill-rule:evenodd;}techdegree
Angelic Sanoy
Full Stack JavaScript Techdegree Student 6,583 Points

Hi Liam. Thank you for responding. The issue if use "hide" via javascript. The checkout won't proceed completely because it has a mandatory fields?

example link

I tried jQuery.. Ahhmm.. Actually, my code is not working. Any idea why?

<script>
(function($) {
    $(document).ready(function() {
if("#select2-pickup_-container[title|='Yes']") {
  $('input#ship-to-different-address-checkbox').hide();
}else{
  $('input#ship-to-different-address-checkbox').show();
}
    });
})(jQuery)
</script>

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

Angelic Sanoy
seal-mask
.a{fill-rule:evenodd;}techdegree
Angelic Sanoy
Full Stack JavaScript Techdegree Student 6,583 Points

Yes, it is set required.. You can try to checkout https://berggallery.com/product/bugaboos-giants/ . I think I'm not targetting the title yes correctly.

Looks like my code is not working. Here's the screen recording https://www.useloom.com/share/29a8759b64e7415bb1030e65e40111bc

My script is

<script>
<script>
(function($) {
    $(document).ready(function() {
if("span.select2-selection__rendered#select2-pickup_-container[title|='Yes']") {
  $('div.woocommerce-shipping-fields').hide();
}else{
  $('div.woocommerce-shipping-fields').show();
}
    });
})(jQuery)
</script>
</script>

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

Angelic Sanoy
seal-mask
.a{fill-rule:evenodd;}techdegree
Angelic Sanoy
Full Stack JavaScript Techdegree Student 6,583 Points

Sorry, noob here but it makes me confused now? There's no more if statement? I tried code below but it still doesn't work

<script>
(function($) {
  $(document).ready(function() {
    var select = $("#select2-pickup_-container[title|='Yes']");

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

    var toggleDifferentAddress = function(event) {
      $(".ship-to-different-address-checkbox").toggle();
    };

    bindEvents();
});
  })(jQuery);
</script>

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

It does work on a form I have set up locally but your right, it won’t work for you.

You need to take that code and change the variables so they match the ones you are using.

Do you version control your project? If so, it would be much easier to see the full project on git rather than guessing

Angelic Sanoy
seal-mask
.a{fill-rule:evenodd;}techdegree
Angelic Sanoy
Full Stack JavaScript Techdegree Student 6,583 Points

It's a WordPress site from my client, I don't usually put on version control but let me create a local version. I'll get back to you, thank u so much Liam.