Title: Customizing a checkbox
Last modified: December 8, 2021

---

# Customizing a checkbox

 *  Resolved [jazzu](https://wordpress.org/support/users/jazzu/)
 * (@jazzu)
 * [4 years, 5 months ago](https://wordpress.org/support/topic/customizing-a-checkbox/)
 * Hello everyone!
 * I added an optional checkbox to my site by adding a bit of code to functions.
   php. It’s great and all, however I want it to look just like the delivery checkbox.
   Instead of clicking on the checkbox to reveal the price, I want there to be “
   Assembly” under the delivery fee, and on the right side I want the default option
   to be No assembly and the option under to be Assembly – 170€ (for each product).
   I made a few screenshots AND I Photoshopped exactly what I need.
 * [THIS](https://ibb.co/m6Fzcd5) is what it looks like when it’s not checked (Montaža)
   
   [THIS](https://ibb.co/KsB9Jhc) is what it looks like when it’s checked – I just
   want to disable the first checkbox, so it looks the way it it when it’s checked.
 * [THIS is what I’m looking for.](https://ibb.co/KsB9Jhc)
 * I hope since you have the checkbox for delivery by default on WooCommerce, that
   adding the same checkbox, just with different options will be easy to solve.
 * The code I added to functions.php:
 *     ```
       // Display the custom checkbow field in checkout
       add_action( 'woocommerce_review_order_before_order_total', 'fee_installment_checkbox_field', 20 );
       function fee_installment_checkbox_field(){
           echo '<tr class="packing-select"><th>';
   
           woocommerce_form_field( 'installment_fee', array(
               'type'          => 'checkbox',
               'class'         => array('installment-fee form-row-wide'),
               'label'         => __('Montaža v 14 dneh'),
               'placeholder'   => __(''),
           ), WC()->session->get('installment_fee') ? '1' : '' );
   
           echo '</th><td>';
       }
   
       // jQuery - Ajax script
       add_action( 'wp_footer', 'checkout_fee_script' );
       function checkout_fee_script() {
           // Only on Checkout
           if( is_checkout() && ! is_wc_endpoint_url() ) :
   
           if( WC()->session->__isset('installment_fee') )
               WC()->session->__unset('installment_fee')
           ?>
           <script type="text/javascript">
           jQuery( function($){
               if (typeof wc_checkout_params === 'undefined')
                   return false;
   
               $('form.checkout').on('change', 'input[name=installment_fee]', function(){
                   var fee = $(this).prop('checked') === true ? '1' : '';
   
                   $.ajax({
                       type: 'POST',
                       url: wc_checkout_params.ajax_url,
                       data: {
                           'action': 'installment_fee',
                           'installment_fee': fee,
                       },
                       success: function (result) {
                           $('body').trigger('update_checkout');
                       },
                   });
               });
           });
           </script>
           <?php
           endif;
       }
   
       // Get Ajax request and saving to WC session
       add_action( 'wp_ajax_installment_fee', 'get_installment_fee' );
       add_action( 'wp_ajax_nopriv_installment_fee', 'get_installment_fee' );
       function get_installment_fee() {
           if ( isset($_POST['installment_fee']) ) {
               WC()->session->set('installment_fee', ($_POST['installment_fee'] ? true : false) );
           }
           die();
       }
   
       // Add a custom calculated fee conditionally
       add_action( 'woocommerce_cart_calculate_fees', 'set_installment_fee' );
       function set_installment_fee( $cart ){
           if ( is_admin() && ! defined('DOING_AJAX') || ! is_checkout() )
               return;
   
           if ( did_action('woocommerce_cart_calculate_fees') >= 2 )
               return;
   
           if ( 1 == WC()->session->get('installment_fee') ) {
               $items_count = WC()->cart->get_cart_contents_count();
               $fee_label   = sprintf( __( "Montaža" ), '&times;', $items_count );
               $fee_amount  = 170 * $items_count;
               WC()->cart->add_fee( $fee_label, $fee_amount );
           }
       }
   
       add_filter( 'woocommerce_form_field' , 'remove_optional_txt_from_installment_checkbox', 10, 4 );
       function remove_optional_txt_from_installment_checkbox( $field, $key, $args, $value ) {
           // Only on checkout page for Order notes field
           if( 'installment_fee' === $key && is_checkout() ) {
               $optional = '&nbsp;<span class="optional">(' . esc_html__( 'optional', 'woocommerce' ) . ')</span>';
               $field = str_replace( $optional, '', $field );
           }
           return $field;
       }
       ```
   
 * Kind regards
 * The page I need help with: _[[log in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Fcustomizing-a-checkbox%2F%3Foutput_format%3Dmd&locale=en_US)
   to see the link]_

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

 *  [Margaret S. woo-hc](https://wordpress.org/support/users/margaretwporg/)
 * (@margaretwporg)
 * [4 years, 5 months ago](https://wordpress.org/support/topic/customizing-a-checkbox/#post-15143143)
 * Hi [@jazzu](https://wordpress.org/support/users/jazzu/)
 * Please be informed that we are unable to provide support for customizations per
   our [Support Policy](https://woocommerce.com/support-policy/). If you need any
   assistance with the code and/or customization, please reach out to a web developer
   or one of our [experts](https://woocommerce.com/customizations/).
 * I can also recommend the following places for more development-oriented questions:
    - WooCommerce Slack Community: [https://woocommerce.com/community-slack/](https://woocommerce.com/community-slack/)
    - WooCommerce Community on Facebook: [https://www.facebook.com/groups/advanced.woocommerce/](https://www.facebook.com/groups/advanced.woocommerce/)
 * Thanks
 *  [Margaret S. woo-hc](https://wordpress.org/support/users/margaretwporg/)
 * (@margaretwporg)
 * [4 years, 5 months ago](https://wordpress.org/support/topic/customizing-a-checkbox/#post-15165053)
 * We’ve not seen any activity on this thread for a while, so I’m marking this thread
   as resolved. If you have further questions, please feel free to open a new topic.

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

The topic ‘Customizing a checkbox’ is closed to new replies.

 * ![](https://ps.w.org/woocommerce/assets/icon.svg?rev=3234504)
 * [WooCommerce](https://wordpress.org/plugins/woocommerce/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/woocommerce/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/woocommerce/)
 * [Active Topics](https://wordpress.org/support/plugin/woocommerce/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/woocommerce/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/woocommerce/reviews/)

## Tags

 * [box](https://wordpress.org/support/topic-tag/box/)
 * [check](https://wordpress.org/support/topic-tag/check/)

 * 2 replies
 * 2 participants
 * Last reply from: [Margaret S. woo-hc](https://wordpress.org/support/users/margaretwporg/)
 * Last activity: [4 years, 5 months ago](https://wordpress.org/support/topic/customizing-a-checkbox/#post-15165053)
 * Status: resolved