Hide element with JQuery and activate button

Question

I am making a product with 3 variables. A customer can pickup the products at our place, or we can deliver the products. Because of practical things, we choose to sell products there should be delivered as packages with 30, 60 or 90 products in.

Before a price can be shown, all 3 variables need to get selected. So here comes the problem. If a person wants to pickup the products at our place only 2 variables need to be selected: Length in m and Pickup or Delivery. But that will not give a price. Therefore I need to insert "Pickup" in "Packages" again to get a price.

But I would like to hide "pickup" in packages, so I do not confuse the visitor to much. The image describes what I am looking for:

The page can [be seen here][2]

This is the code I have until now, but as I see it either my code is not executed or the code is simply wrong. The page is looking excact the same as before I added my code to functions.php, and none of the functions are executed.

Based on my description does anybody have a good idea to what is wrong with my code?

HTML:

<ul class="variable-items-wrapper button-variable-wrapper" data-attribute_name="attribute_pa_packages">
    <li data-wvstooltip="pickup" class="variable-item button-variable-item button-variable-item-pickup" title="pickup" data-value="pickup">
        <span class="variable-item-span variable-item-span-button">pickup</span>
    </li>
</ul>

<ul class="variable-items-wrapper button-variable-wrapper" data-attribute_name="attribute_pa_packages">
    <li data-wvstooltip="pickup" class="variable-item button-variable-item button-variable-item-pickup selected" title="pickup" data-value="pickup">
        <span class="variable-item-span variable-item-span-button">pickup</span></li>
    </li>
</ul>

PHP and script:

function custom_script_name(){
    ?>
    <script>
    jQuery("ul[data-attribute_name=attribute_pa_pickup-og-delivery] li").click(function(){
        var selectedDelivery = jQuery("ul[data-attribute_name=attribute_pa_pickup-og-delivery]").find("li.selected").attr("data-value");
        if (selectedDelivery == "pickup"){
            jQuery("ul[data-attribute_name=attribute_pa_packages] li[data-value=pickup] span").click();
            jQuery("ul[data-attribute_name=attribute_pa_packages] li[data-value=pickup]").hide(); // hide the "pickup" option in "Packages" if you like
        }
    });
    </script>
    <?php
    }
    add_action('wp_head', 'custom_script_name');

Answer 1

If I understand the question correct:

• you wanna hide the PickUp button in "Pickup or Delivery" on page load
• Show the Pickup button in "Packages" when User clicks Pickup from "Pickup or Delivery".

Here's a JS way of doing it:

• Disable the Pickup button in "Packages" on page load.
• Enable Pickup button in "Packages" when user clicks on Pickup button in "Pickup or Delivery"
• Disable Pickup button in "Packages" when user clicks on Delivery button in "Pickup or Delivery"

Here's a sample codewith simpler HTML(Live stackblitz: https://stackblitz.com/edit/js-l9ddiq):

<div>
  <span>Length</span>
  <button>4.2m</button>
  <button>5.1m</buton>
</div>

<div>
  <span>Pickup or delivery</span>
  <button id="pickup-button">Pickup</button>
  <button id="delivery-button">Delivery</buton>
</div>

<div id="packages">
  <span>Packages</span>
  <button class="toggle-button" style="display: none;">Pickup</button>
  <button>30</button>
  <button>60</button>
  <button>90</button>
</div>

JS:

const pickUpButton = document.getElementById('pickup-button');
pickUpButton.addEventListener('click', event => {
  const packageButtons = document.querySelector('#packages').querySelectorAll('button');
  packageButtons.forEach(button => {
    if (button.classList.contains('toggle-button')) {
      button.style.display = 'block';
    } else {
      button.disabled = true;
    }
  });
});

const deliveryButton = document.getElementById('delivery-button');
deliveryButton.addEventListener('click', event => {
  const packageButtons = document.querySelector('#packages').querySelectorAll('button');
  packageButtons.forEach(button => {
    if (button.classList.contains('toggle-button')) {
      button.style.display = 'none';
    } else {
      button.disabled = false;
    }
  });
});

Answer 2

If i understand the question properly, You do not need the secomd pickup button. All you need to do is to play around on when to show the price. Whenever the length, pickup or delivery or packages button is clicked, check if all the required conditions are met to show the price, then show the price. The check could be like, if delivery is selected, then packages should also be selected, else, if pickup is selected, packages is not required.

Answer 3

You can try below code it will hide the button but on click pickup, it is selected. just update the jquery and try once. hope it was work

jQuery(document).ready(function(){
     jQuery("ul[data-attribute_name=attribute_pa_packages] li[data-value=pickup]").hide();
    jQuery("ul[data-attribute_name=attribute_pa_pickup-og-delivery] li").click(function(){
        var selectedDelivery = jQuery("ul[data-attribute_name=attribute_pa_pickup-og-delivery]").find("li.selected").attr("data-value");
        if (selectedDelivery == "pickup"){
            jQuery("ul[data-attribute_name=attribute_pa_packages] li[data-value=pickup] span").click();
            jQuery("ul[data-attribute_name=attribute_pa_packages] li[data-value=pickup]").hide(); // hide the "pickup" option in "Packages" if you like
        }
    });
});