Question 242976 in Wordpress Question posted in
The official Wordpress documentation can be found here.

WordPress – Replace title when hovering the image in WooCommerce Product page

I would like to replace the product title in WooCommerce when hovering the product image, but not the title itself. I would appreciate anyone’s advice as I cannot find any answer that relates to my question.

Tried using CSS :hover, ::after and ::after:hover, but I can’t change the product title text because the hover action is actually related to the image and not the title. So I am stuck and not sure how to solve this.

Tags:

2

Answers


  1. 0

    For WooCommerce single product pages, you can use the following to change the product title, when "hovering" the product image:

    add_action('wp_footer', 'wp_footer_product_script_js' );
function wp_footer_product_script_js() {
    if( is_product() ) :
    // Here set the text replacement for the product title
    $text = __("Text replacement", "woocommerce");
    ?>
    <script>
    jQuery(function($) {
        const productTitle  = $('.product_title').html(),    
            textReplacement = '<?php echo $text; ?>';
        $('body').on('mouseover mouseout', '.woocommerce-product-gallery__image', function(e) {
            $('.product_title').html(e.type === 'mouseover' ? textReplacement : productTitle);
        });
    });
    </script>
    <?php
    endif;
}

    Code goes in functions.php file of your child theme (or in a plugin). Tested and works.

    Login or Signup to reply.
  2. 0

    To replace the product title in WooCommerce when hovering over the product image, you can use CSS to target the product title element and change its content on hover. Here’s an example of how you can achieve this:

    /* Replace product title on hover */
.product:hover .product-title {
  content: "Your New Title Here";
  /* Additional styling for the replaced title */
  color: #FF0000; /* Change text color */
  font-weight: bold; /* Make it bold */
  /* Add any other styling you desire */
}

    In this example, replace .product-title with the actual CSS class or selector that targets the product title element in your WooCommerce theme. Make sure to specify the desired content, and you can also add additional styling as needed.

    Remember to adjust the CSS to match your specific WooCommerce theme’s structure and classes. Additionally, it’s important to test and make adjustments as necessary to achieve the desired hover effect.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search