3

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!

Improve this question

2 Answers 2

Reset to default
6

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( 'site' );

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( 'site' ); # 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>
Improve this answer
9
  • 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
    Commented Mar 14, 2017 at 12:16
  • 1
    @PortalP Updated my answer with your code. the jQuery(document).... part should be outermost.
    – RRikesh
    Commented Mar 14, 2017 at 12:23
  • Thanks! although for some reason i cant get it to work. :(
    – Patrick
    Commented Mar 14, 2017 at 12:28
  • Nvm i got it to work! :) THANKS! This is gonna be so useful in so many situations.
    – Patrick
    Commented Mar 14, 2017 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
    Commented Mar 14, 2017 at 13:02
3

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}
Improve this answer
4
  • 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
    Commented Mar 14, 2017 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
    Commented Mar 14, 2017 at 11:52
  • Why not? Also can you update that answer with an example snippet?
    – Patrick
    Commented Mar 14, 2017 at 11:53
  • I've updated the answer.
    – Dragos Micu
    Commented Mar 14, 2017 at 12:00

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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