Are you a GenerateCustomer?

Do you have an active GP Premium or GenerateBlocks Pro license key?

Create a GenerateSupport account for GeneratePress and GenerateBlocks support in one dedicated place.

Create an account
Already have a GenerateSupport account? Login

Just browsing?

Feel free to browse the forums. Support for our free versions is provided on WordPress.org (GeneratePress, GenerateBlocks).

Want to become a premium user? Learn more below.

Add Smooth Scroll Class to Review Anchor

  • Hi I am trying to add a smooth scroll class to customer review anchor right by the product title.

    I checked in inspect element if I added the class to anchor like this it does what I am trying to do.

    From

    
    <a href="#reviews" class="woocommerce-review-link" rel="nofollow">(<span class="count">1</span> customer review)</a>

    to

    
    <a href="#reviews" class="woocommerce-review-link smooth-scroll" rel="nofollow">(<span class="count">1</span> customer review)</a>

    But I am not sure how to add this class via a code.

    I tried method explained not think link and added this code and it did not solve it.

    https://docs.generatepress.com/article/add-a-custom-class-to-the-body-element/

    add_filter( 'woocommerce-review-link','tu_add_body_class' );
    function tu_add_body_class( $classes ) {
      $classes[] = 'smooth-scroll';
      return $classes;
    }
  • Hi there,

    Try this PHP code which automatically smooth-scroll all anchor links.

    add_filter( 'generate_smooth_scroll_elements', function( $elements ) {
      $elements[] = 'a[href*="#"]';
      
      return $elements;
    } );
  • awesome. thank you!

  • is it possible to add that class only to the link I want and not to everywhere?

  • Yes, in that case, you can add each of the class:

    add_filter('generate_smooth_scroll_elements', function () {
    	$classes = array('.woocommerce-review-link','.another-class');				
    	return $classes;
    });

    in the above code, it adds the element with woocommerce-review-link class and elements with class another-class to the smooth scroll element list.

    If you want more elements to smooth scroll, just replace another-class with the actual class, and you can keep on adding it.

    But be careful, if you have more than one elements that have the class woocommerce-review-link, all of them will be smooth-scrolled. Hope that makes sense!

  • Thank you so much!

  • You are welcome   🙂

Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.