I am working on a woocommerce webshop. Now, i am looking for a solution to display the product title and price inside an overlay when a customer hovers the product image/thumbnail.

I'm almost there. At this moment the product price (price), title (product_category_title) are shown under the thumbnail image. This code however 'takes' the product category title and price and 'places' it inside the image overlay. The problem is that i want to display the title and price in both positions. So inside the image overlay and in it's original position; under the image.

How can i adapt the code to get this to work?

<script>
jQuery(document).ready(function( $ ) { // When jQuery is ready
        var shop_module = $( '.divi-engine-custom-overlay' ), 
            shop_item = shop_module.find( 'li.product' );
        shop_item.each( function() { // Runs through each loop item in the shop
            var product_title = $( this ).find( '.product_category_title' ), // Finds the Product Title
                product_price = $( this ).find( 'span.price' ), // Finds the Product Price
                product_overlay = $( this ).find( '.et_overlay' ); // Finds the Divi Overlay
            product_title.detach(); // Detaches the Product Title
            product_price.detach(); // Detaches the Product Title
            product_overlay.prepend(product_title, product_price); // Adds Product Title and Price to the Overlay
        } )
  } );
</script>

HTML snippet

<li class="product type-product post-450 status-publish first instock product_cat-energy has-post-thumbnail shipping-taxable purchasable product-type-simple">
    <a href="#" class="woocommerce-LoopProduct-link woocommerce-loop-product__link"><span class="et_shop_image"><img width="300" height="300" src="image.jpg" class="attachment-woocommerce_thumbnail size-woocommerce_thumbnail" alt="" loading="lazy" srcset="image.jpg 300w, image.jpg 150w" sizes="(max-width: 300px) 100vw, 300px" /><span class="et_overlay"></span></span>
        <h2 itemprop="name" class="product_category_title"><span>Creme |  Bodylotion </span></h2>

<p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus dapibus ...</p>
    <span class="price"><span class="woocommerce-Price-amount amount"><bdi><span class="woocommerce-Price-currencySymbol">&euro;</span>&nbsp;24,99</bdi></span></span>
</a><a href="#" data-quantity="1" class="button product_type_simple add_to_cart_button ajax_add_to_cart" data-product_id="450" data-product_sku="" aria-label="Add &ldquo;Bodylotion&rdquo; to your cart" rel="nofollow">&#xe013;</a></li>

This is the css:

<style>

  /* Hover Price and Title in overlay */

  .et_overlay .woocommerce-loop-product__title,
  .et_overlay .price, 
  .et_overlay .loop-title-item,
  .et_overlay .loop-title-price {
    text-align: center; /* Centers the Title and Price */
    position: absolute;
    width: 100%;
  }

  /* Hover Title Position from Top */

  .et_overlay .woocommerce-loop-product__title,
  .et_overlay .loop-title-item {
    top: 5%; /* Change this value */
  }

  /* Hover Price Position from Top */

  .et_overlay .price,
  .et_overlay .loop-title-price {
    top: 80%; /* Change this value */
  }

  
  
</style>

CodePudding user response：

$(function () {
                jQuery(document).ready(function ($) { // When jQuery is ready
                    var shop_module = $('.divi-engine-custom-overlay');
                    var shop_item = shop_module.find('li.product');
                    shop_item.each(function () { // Runs through each loop item in the shop
                        var et_overlay = $(this).find('.et_overlay');
                        $(this).find('.product_category_title,span.price').clone().appendTo(et_overlay); // Adds Product Title and Price to the Overlay
                    });
                });
            });
// this will copy the price,title ( not move )

Edit:
The clone() function will make a copy of the element selected, and the "appendTo" -> as the name tells : will append selected content to the position ( element ). Note: append will not change any existing element inside the destination, it will just append new things.