Wordpress WooCommerce content-product.php javascript

Question

http://intelmarketing.mk/demos/boutiques/

this is the wordpress theme that i'm building and i have this problem:

1. Try and open http://intelmarketing.mk/demos/boutiques/
2. Scroll down to NEW ARRIVALS
3. Do the mouseover on the first image

than you'll see that the only first image is working with the script and why is that?

here is the code from the content-product.php file that i have used

<script>
$('#div1').mouseover(function() {
    $('#div2').fadeIn(500);
});

$('#div2').mouseover(function() {
    $('#div2').fadeIn(500);
});

$('#div1').mouseout(function() {
    $('#div2').fadeOut(500);
});

$('#div2').hide().mouseout(function() {
    $('#div2').fadeOut(500);
});
</script>

<?php
/**
 * The template for displaying product content within loops.
 *
 * Override this template by copying it to yourtheme/woocommerce/content-product.php
 *
 * @author      WooThemes
 * @package     WooCommerce/Templates
 * @version     1.6.4
 */

if ( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly

global $product, $woocommerce_loop;

// Store loop count we're currently on
if ( empty( $woocommerce_loop['loop'] ) )
    $woocommerce_loop['loop'] = 0;

// Store column count for displaying the grid
if ( empty( $woocommerce_loop['columns'] ) )
    $woocommerce_loop['columns'] = apply_filters( 'loop_shop_columns', 4 );

// Ensure visibility
if ( ! $product || ! $product->is_visible() )
    return;

// Increase loop count
$woocommerce_loop['loop']++;

// Extra post classes
$classes = array();
if ( 0 == ( $woocommerce_loop['loop'] - 1 ) % $woocommerce_loop['columns'] || 1 == $woocommerce_loop['columns'] )
    $classes[] = 'first';
if ( 0 == $woocommerce_loop['loop'] % $woocommerce_loop['columns'] )
    $classes[] = 'last';
?>
<li <?php post_class( $classes ); ?>>

    <?php do_action( 'woocommerce_before_shop_loop_item' ); ?>

    <a href="<?php the_permalink(); ?>">
        <div id="div1">
        <?php
            /**
             * woocommerce_before_shop_loop_item_title hook
             *
             * @hooked woocommerce_show_product_loop_sale_flash - 10
             * @hooked woocommerce_template_loop_product_thumbnail - 10
             */
            do_action( 'woocommerce_before_shop_loop_item_title' );
        ?>
        </div>
        <div id="div2">
        <h3><?php the_title(); ?></h3>

        <?php
            /**
             * woocommerce_after_shop_loop_item_title hook
             *
             * @hooked woocommerce_template_loop_price - 10
             */
            do_action( 'woocommerce_after_shop_loop_item_title' );
        ?>
    </div>
    </a>

    <?php do_action( 'woocommerce_after_shop_loop_item' ); ?>

</li>

If any one knows how to fix this problem please let me know :)

Thank you!

UPDATE i changed the script to

<script>

$('.attachment-shop_catalog').mouseover(function() {
    $('.amount').fadeIn(500);
    $('#div2 h3').fadeIn(500);
});

$('.amount').mouseover(function() {
    $('.amount').fadeIn(500);
});

$('#div2 h3').mouseover(function() {
    $('#div2 h3').fadeIn(500);
});

$('.attachment-shop_catalog').mouseout(function() {
    $('.amount').fadeOut(500);
    $('#div2 h3').fadeOut(500);
});

$('.amount').hide().mouseout(function() {
    $('.amount').fadeOut(500);
});

$('#div2 h3').hide().mouseout(function() {
    $('#div2 h3').fadeOut(500);
});
</script>

but now they are all hidden but if you mouseover no metter what image will show all the titles and price above all images and i just want when i go to one image to show me that title and price of only that image.. i hope you'll understand me what i mean..

Thanks

Answer 1

Try this,

First set those buttons style:none for hiding on first load add following CSS to your stylesheet.

ul.products li.product h3, ul.products li.product .amount{display:none;} 

Instead of your script try following.

jQuery('ul.products li.product').hover(function(){
  jQuery(this).find('h3').fadeIn(500);
  jQuery(this).find('.amount').fadeIn(500);
},function(){
  jQuery(this).find('h3').fadeOut(500);
  jQuery(this).find('.amount').fadeOut(500);
});

Hope it works..

Answer 2

Try this:

If you put your mouseover event listener on a class you are able to let them fade in on every image which has that particular class.

$('.attachment-shop_catalog').mouseover(function() {
    $(this).fadeIn(500);
});

If you are using this aproach, you don't need to add a event listener for #div1, #div2 and #div3 individually.