CODEWITHSUNDEEP
csswordpresswoocommercedelaymouseout
Michael Smith
Michael Smith

Reputation: 35

Delay for overlay to disappear on mouseout

I've got a site with an instance of WooCommerce running on it. On the Product Archive page there's a noticeable delay when the mouse leaves a product and the overlay disappearing. I'd like to reduce that delay to about 0.1s

URL: http://economistfoundation.org/the-library/

I've tried looking through the various CSS files in the main theme and the woocommerce plugin to see if there's a 'transition' with 0.5s or similar that controls .thumb-overlay, but can't find anything that seems relevant.

I wondered if the setting might be in Javascript, but there are so many files where it might be stored I'm at a loss.

I've looked at the page using the Firebug inspector and .thumb-overlay has a style attribute that moves between 'display: block' and 'display: none', and as you move the mouse over an attribute of 'opacity' rapidly counts from 0 to 1.

Does anyone know where the delay value might be stored?

Upvotes: 1

Views: 168

Answers (1)

Rohil_PHPBeginner
Rohil_PHPBeginner

Reputation: 6080

It is in your wp-content/themes/agent/woocommerce/woocommerce-custom.js file at line 19.

    jQuery(document).on( 'mouseenter', '.products .product', function() {
        jQuery(this).find('.thumb-overlay').stop(true, true).fadeIn();
    });
    jQuery(document).on( 'mouseleave', '.products .product', function() {
        jQuery(this).find('.thumb-overlay').stop(true, true).fadeOut();
    });

EDITED

Child themes only override files in the main theme directory (like header.php) that are called in with functions like get_template_part or get_header, etc.

The correct way to add scripts to WordPress is with wp_enqueue_script. If your parent theme uses this, you can override the JS files by using wp_dequeue_script and enqueuing your own.

Like so...

<?php
add_action( 'wp_enqueue_scripts', 'so28089698_script_fix' );
function so28089698_script_fix()
{
    wp_dequeue_script( 'parent_theme_script_handle' );
    wp_enqueue_script( 'child_theme_script_handle', get_stylesheet_directory_uri() . '/scripts/yourjs.js', array( 'jquery' ) );
}

If the parent theme isn't using wp_enqueue_script, it's probably hooking into wp_head (or wp_footer) to echo out the scripts there. So you'd use remove_action to get rid of those functions echoing the scripts out, and then enqueue your own script.

If the script is hard coded into the template file, you'll just need to replace that template file in your child theme without the script tag.

If they used wp_enqueue_script calls that utilize get_stylesheet_directory_uri, then you shouldn't have to do anything. Since this isn't happening, you'll just have to poke around and see what the theme author did.

Upvotes: 1

Related Questions