选择一种产品 WooCommerce

Posted 2023-03-06

【中文标题】选择一种产品 WooCommerce

【英文标题】：Select one product WooCommerce

【发布时间】：2015-10-10 13:27:43

【问题描述】：

我正在尝试创建一个 div，当我将鼠标悬停在 WooCommerce 的 archive-product.php 页面上的一篇文章上时，它就会显示出来。

好吧，div 的悬停和显示效果很好，但是一旦我将鼠标悬停在一个产品上，所有 div 都会显示在同一页面上的所有不同产品上。

如何确保只显示我当前悬停的产品信息指定的 div 而不是所有窗口。

这是我到目前为止所做的：

<li <?php post_class( $classes ); ?>>

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

<a href="<?php the_permalink(); ?>" class="product-images">

    <?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' );
    ?>

</a>
        <?php
        /** this piece of code is specially ment for the pop-up to show
        *
        * @hooked will be specified later
        * @hooked will be specified later
        */
        ?>
<div class="popup-product-custom" style="border: 1px solid black; position: absolute; top: 0px; width: 100%; height: 75%; margin-left: 250px; z-index: 2147483647; background-color: #FFFFFF;"><a href="<?php the_permalink(); ?>" class="button-in-popup">This is a test button</a></div>


<div class="product-details">

    <div class="product-details-container">

        <h3 class="product-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>

        <div class="clearfix">

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

        </div>

    </div>

</div>

<?php
    /**
     * woocommerce_after_shop_loop_item hook
     *
     * @hooked woocommerce_template_loop_add_to_cart - 10
     */
    do_action( 'Custom_edits_product_loop_bottom1' );
    do_action( 'Custom_edits_product_loop_bottom2' );
    do_action( 'Custom_edits_product_loop_bottom3' );
?>

这里是适用于它的 jQuery：

jQuery(document).ready(function() 

jQuery(".popup-product-custom").hide();

jQuery(".post-type-archive-product .product-type-simple, .archive.tax-product-cat .product-type-simple").hover(function() 
    jQuery(".popup-product-custom").slideToggle();
);

);

感谢大家的帮助。

【参考方案1】：

没关系，已经找到了一个很好的解决方案。 这是我的 jQuery 更改：

<script>
jQuery(document).ready(function() 

//jQuery(this).children(".popup-product-custom").hide();

jQuery(".post-type-archive-product .product-type-simple, .archive.tax-product-cat .product-type-simple").hover(function() 
    jQuery(this).children(".popup-product-custom").toggle();
);
);
</script>

我在这个特定的 WooCommerce 页面的标题中添加了代码，因为 jQuery 在 WordPress 中的 WooCommerce 之外的一些其他自定义插件出现故障。

还添加了以下 CSS 代码：

.post-type-archive-product .popup-product-custom display: none;

和

.archive.tax-product_cat .popup-product-custom display: none;

这似乎解决了我的问题:)