1

I have this script that automatically scrolls down to the primary content on page load.

jQuery(document).ready(function($){
  if ( $(window).width() < 768 || window.Touch) { 
    $('html, body').animate({ scrollTop: $("#primary").offset().top}, 2000);} 
});

1. However I would like to only apply it to our woocommerce product pages and categories so it doesnt work on home/blog pages. How would i do that?

I can do this poorly by editing WooCommerce core files but i know that's a horrible idea so I'm seeking out help on how to do it correctly via my functions.php file.

2. Also i would like to know how to apply it to all pages except the home page should that be a better option later on.

Many thanks!

1

There are two ways you could do that.

1. Using JS only

WordPress themes normally use the body_class() function. As a result you'll see that the <body> tag will have lots of classes. You can then target pages with a specific class to run your code in JavaScript:

if( $('body.whateverclass').length || $('body.anotherclass').length ){
   // Your JS code here
}

2. Using PHP

You can harness wp_localize_script() to send a flag to your code.

Let's suppose you enqueued a file called site.js with a handle name of site, in your functions.php you'll have:

wp_register_script( 'site', 'path/to/site.js' );
wp_enqueue_script( 'some_handle' );

You can now add some flags:

 wp_register_script( 'site', 'path/to/site.js' ); # Unchanged

 $value = '';
 if ( is_shop() || is_some_other_condition() ){
    $value = 'yes';
 }
 wp_localize_script( 'site', 'MYSITE', $value );

 wp_enqueue_script( 'some_handle' ); # Unchanged

You can then check the MYSITE variable in JavaScript:

if( 'yes' === MYSITE ){
  // Your JS code here
}

Edit: You asked how to put it in the footer.php:

<script>
jQuery(document).ready(function($){
  if( $('body.product-template-default').length || $('body.anotherclass').length ){
    if ( $(window).width() < 768 || window.Touch) { 
         $('html, body').animate({ scrollTop: $("#primary").offset().top}, 2000); 
    }
  }
});
</script> 
  • If im using js.. How would that look exactly? I put this at the bottom of my footer.php and cant get it to work. (works without the if statement) <script> if( $('body.product-template-default').length || $('body.anotherclass').length ){ jQuery(document).ready(function($){ if ( $(window).width() < 768 || window.Touch) { $('html, body').animate({ scrollTop: $("#primary").offset().top}, 2000); } }); } </script> – Patrick Mar 14 '17 at 12:16
  • 1
    @PortalP Updated my answer with your code. the jQuery(document).... part should be outermost. – RRikesh Mar 14 '17 at 12:23
  • Thanks! although for some reason i cant get it to work. :( – Patrick Mar 14 '17 at 12:28
  • Nvm i got it to work! :) THANKS! This is gonna be so useful in so many situations. – Patrick Mar 14 '17 at 12:33
  • 1
    No problem about putting if inside another. What's the purpose of your script? From what I can read, it should scroll to the #primary element each time you load the page while the screen width is less than 768. – RRikesh Mar 14 '17 at 13:02
2

Step 1: save the code as a new js file, say main.js

Step 2: add a conditional function to function.php of your theme that would say something around the lines:

if (is_shop() || is_product_category()) {
  wp_enqueue_script('main', get_template_directory_uri() . '/js/main.js', false, false, true);
}

Check this page for conditional tags based on your needs:

https://docs.woocommerce.com/document/conditional-tags/

Hope it helps!

Edit:

For inline scripting you could do (e.g. inside footer.php):

if (is_shop() || is_product_category()) {?>
      <script>
          jQuery(document).ready(function($){
              if ( $(window).width() < 768 || window.Touch) { 
                  $('html, body').animate({ scrollTop: $("#primary").offset().top}, 2000);
              } 
          });
      </script>
<?php}
  • Thanks! But how can i add the script inline? I feel like creating an additional call to a script file is pointless when the script itself (provided above) is tiny. – Patrick Mar 14 '17 at 11:29
  • I guess you could use the exact same IF statement in the footer.php but instead of enqueueing you could write your script inside <script> tags but I do not recommend it, especially for jQuery scripts. – Dragos Micu Mar 14 '17 at 11:52
  • Why not? Also can you update that answer with an example snippet? – Patrick Mar 14 '17 at 11:53
  • I've updated the answer. – Dragos Micu Mar 14 '17 at 12:00

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.