Disable Next button based on condition

Resolved saratscheff
(@saratscheff)

6 years, 8 months ago

Is it possible to disable the Next button based on a condition?
For example, if cart doesn’t contain at least one product of category X, show step ERROR that contains an explanation and disable the Next button.

Viewing 4 replies - 1 through 4 (of 4 total)

Plugin Author ThemeHigh
(@themehigh)

6 years, 8 months ago
There is no direct option for displaying the next button conditionally. You can add custom code in the wp-head hook to check whether the specific category is available in the cart or not. Based on that you can apply the CSS to hide the next button.

You may try the below code:
```
add_action('wp_head','thwmscf_hide_next_button');
function thwmscf_hide_next_button(){
 if(is_checkout()){
   $have_category = false;

   foreach ( WC()->cart->get_cart() as $item_key => $item_value ){
     $_product = $item_value['data'];
     $product_id = $_product->get_id();

     if(has_term( 'category_name', 'product_cat', $product_id)){
       $have_category = true;
     }  
   }

   if(!$have_category){
     ?>
     <style type="text/css">
       .thwmscf-buttons .button-next{
         display: none !important;
       }
     </style>
     <?php
   }
 }
}
```
Please replace category_name with your category.

Further, please be informed that it is not possible to create a custom step using the lite version of our plugin.

Thank you!
Plugin Author ThemeHigh
(@themehigh)

6 years, 8 months ago

We hope your issue is resolved now. We are going to mark this thread as resolved.

Thank you!
beastit
(@beastit)

6 years, 6 months ago
Your solution is a bit to complex. I figured out an easier one. This disables the Prev Button on the first Page, and the Next Button on the Last Page. Just include to your Page in the Header Section…

Have Fun, i hope you like it and it works on your projects.
```
<script>
jQuery(document).ready(function($){

   if ( $( '#step-1' ).hasClass( 'active' ) ) {
         $( '.button-prev' ).hide();
   }

   $("#action-next").click(function(){

         $( '.button-prev' ).show();

         if ( $( '#step-3' ).hasClass( 'active' ) ) {
               $( '.button-next' ).hide();
         } else {
               $( '.button-next' ).show();
         }
   });

   $("#action-prev").click(function(){

       $( '.button-next' ).show();

       if ( $( '#step-1' ).hasClass( 'active' ) ) {
              $( '.button-prev' ).hide();
       }
   });

});
</script>
```
- This reply was modified 6 years, 6 months ago by beastit.
Plugin Author ThemeHigh
(@themehigh)

6 years, 6 months ago
@beastit The function that we have provided is to hide the Next button based on a condition ( hide Next button if cart doesn’t contain at least one product of a particular category).

If you want to hide the Previous button in the first step and Next button in the last step then you can just add the below style in your theme’s Additional CSS.
```
.thwmscf-last-next {
display: none !important;
}

.thwmscf-first-prev {
display: none !important;
}
```
Please make sure that you are using the latest version of our plugin.

Hope this will help 🙂

Thank you!

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘Disable Next button based on condition’ is closed to new replies.