CODEWITHSUNDEEP
woocommerce
Tanmay Vats
Tanmay Vats

Reputation: 429

Woocommerce remove shipping charges on checkout page

In my project there is 2 radio buttons on checkout page with options: Pickup Radio Button & Shipping Radio Button .

When user selects Pickup option. Then, it shows pickup locations (stored in custom table). And when user selects ship option. It shows woocommerce "Ship to a different address?" options.

Now, I want to remove shipping charges via AJAX if user selects "Pick up?" option. And re-add shipping charges if user selects "Ship?" option.

Please help me out.

Upvotes: 0

Views: 2840

Answers (1)

Tanmay Vats
Tanmay Vats

Reputation: 429

Finally I reached to the solution.

I have set to shipping metthod (store pickup & local delivery). And hiding the unchecked shipping method. Once customer changed the option (clicked on custom radio buttons) ie Pickup Radio Button & Shipping Radio Button. On Pickup radio button checked I am setting store pickup shipping method to checked and triggering the jquery function that runs ajax and updating the cart total & shipping amount. And on another end I am hidding the local delivery shipping method radio button. And same is happening with vice versa.

Style.css

.woocommerce ul#shipping_method li input {
   position: absolute; left: -25px; 
}
 .woocommerce ul#shipping_method li {
  margin: 0; overflow: hidden; padding: 0; position: relative;
  text-indent: 0; display: none; 
} 
.woocommerce.pickup ul#shipping_method li:first-child {
  display: block;
 } 
.woocommerce.ship ul#shipping_method li:last-child {
  display: block;
}

jQuery

$('[name="order_type"]').on("change",function(){
   /* Pickup Radio Button / Shipping Radio Button ?*/
    showHideOrderTypeOptions();
});
function showHideOrderTypeOptions()
{
  var order_type = $('[name="order_type"]:checked').val();
  if(order_type == "Ship")
  {
      $(".shipping_address, #ship-to-different-address").show();
      $(".store-locations-wrapper").hide();
      $("#store_address_id").val("");
      $("#ship-to-different-address-checkbox").attr("checked",true);
      $('[name="store_address"]').attr("checked",false);
      $(".woocommerce").removeClass('pickup').addClass("ship");
      $("#shipping_method li").eq(1).find("input").trigger("click");
  }
  else
  {
      $(".shipping_address, #ship-to-different-address").hide();
      $(".store-locations-wrapper").show();
      $("#ship-to-different-address-checkbox").attr("checked",false);
      $(".woocommerce").removeClass('ship').addClass("pickup");
      $("#shipping_method li").eq(0).find("input").trigger("click");
  }

}

woocommerce >> form-billing.php

<div class="order-type-wrapper">
    <h3>Order Type - </h3>
    <input id="order-type-pickup" class="input-radio" <?php checked( $order_type, 'Pickup' ); ?> type="radio" name="order_type" value="Pickup" />
    <label for="order-type-pickup" class="radio"><?php _e( 'Pick up?', 'woocommerce' ); ?></label>

    &nbsp;
    <input id="order-type-ship" class="input-radio" <?php checked( $order_type, 'Ship' ); ?> type="radio" name="order_type" value="Ship" />
    <label for="order-type-ship" class="radio"><?php _e( 'Ship?', 'woocommerce' ); ?></label>
</div>
<div class="store-locations-wrapper">
    <input type="hidden" id="store_address_id" name="store_address_id" value="<?php echo $store_address_id; ?>" />
    <h3>Pickup Location</h3>
  Store locations goes here.
</div>

Upvotes: 1

Related Questions