CODEWITHSUNDEEP
javascriptphpjquerywoocommercejquery-ui-datepicker
achiever
achiever

Reputation: 309

Add a selector class to jQuery datepicker in WooCommerce single products

I have a datepicker within a form on the single product page of Woocommerce that. Due to gTranslate the values are NaN for other languages. I added notranslate like this in the functions.php:

function add_notranslate() 
{
  <script type="text/javascript">
  $(function() {
    $('.ui-datepicker').addClass('notranslate');
  });
  </script> 
<?php 
}
add_filter( 'wp_footer', 'add_notranslate');

But this has no impact yet, did I miss something, using different hooks did not change it either.

Upvotes: 2

Views: 248

Answers (1)

LoicTheAztec
LoicTheAztec

Reputation: 254271

Before <script> tag, ?> is missing and in WordPress you need to use jQuery instead of $ alias like:

add_filter( 'wp_footer', 'add_notranslate');
function add_notranslate() {
    ?>
    <script type="text/javascript">
    jQuery( function($) {
        $('.ui-datepicker').addClass('notranslate');
    });
    </script> 
    <?php 
}
add_filter( 'wp_footer', 'add_notranslate');

Now it should work.

You should also restrict script execution only on in single product pages changing hook to:

add_filter( 'woocommerce_after_single_product', 'add_notranslate');

Or also using is_product() conditional tag like:

add_filter( 'wp_footer', 'add_notranslate');
function add_notranslate() {
    if ( is_product() ) :
    ?>
    <script type="text/javascript">
    jQuery( function($) {
        $('.ui-datepicker').addClass('notranslate');
    });
    </script> 
    <?php
    endif;
}
add_filter( 'wp_footer', 'add_notranslate');

Upvotes: 2

Related Questions