[Support request] Woocommerce stopped Display secondary image on hover after moving product title

Home Forums Support [Support request] Woocommerce stopped Display secondary image on hover after moving product title

Home Forums Support Woocommerce stopped Display secondary image on hover after moving product title

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #2145767
    Kostas

    I have moved the position of the Woocommerce product title on top of the Product Image in the Shop page.
    For this i used the following actions:

    `remove_action(‘woocommerce_before_shop_loop_item_title’,’woocommerce_template_loop_product_thumbnail’, 10 );

    add_action( 'woocommerce_shop_loop_item_title', 'woocommerce_template_loop_product_thumbnail', 11 );

    However now WooCommerce stopped Displaying the secondary image on hover.

    Can anybody please explain this? I suppose this should work out of the box.

    https://stackoverflow.com/questions/71298206/woocommerce-stopped-display-secondary-image-on-hover-after-moving-title-on-top-o

    #2145808
    Ying
    Staff
    Customer Support

    Hi Kostas,

    The hover to show second image is a feature of GP, so it won’t work out of box with woocommerce_template_loop_product_thumbnail.

    Try this snippet instead:

    add_action('woocommerce_before_shop_loop_item_title', 'woocommerce_template_loop_product_title', 9);

    Then you’ll need this CSS to reposition the second image:

    .wc-has-gallery .secondary-image {
        top: 20px;
    }

    Adjust the 20px to fit your design.

    #2146484
    Kostas

    hi,
    thanks for the tip, however i end with images not displaying at all.

    I have now replaced my code with:

    //move product title on top of image in archive pages
    remove_action('woocommerce_before_shop_loop_item_title','woocommerce_template_loop_product_thumbnail', 10 );

    add_action('woocommerce_before_shop_loop_item_title', 'woocommerce_template_loop_product_title', 11);

    Could you please advise?

    #2146491
    David
    Staff
    Customer Support

    Hi there,

    can you remove the functions you’re currently using so we get back to where both images are displayed correctly. And then ill take a look at an alternative method.

    #2147251
    Kostas

    ok,

    i have removed those 2 actions

    remove_action( 'woocommerce_before_shop_loop_item_title', 'woocommerce_template_loop_product_thumbnail', 10 );
    
    add_action( 'woocommerce_shop_loop_item_title', 'woocommerce_template_loop_product_thumbnail', 11 );
    

    now the 2nd image displays fine.

    #2147266
    Ying
    Staff
    Customer Support

    Hi Kostas,

    Sorry I should’ve made it more clear, the solution here is to only add my PHP snippet and remove your snippets:
    https://generatepress.com/forums/topic/woocommerce-stopped-display-secondary-image-on-hover-after-moving-product-title/#post-2145808

    Can you give it another try?

    Let me know 🙂

    #2147779
    Kostas

    hi,
    i now get the Product title moved on top but the Product title also remains underneath the Product image, having 2 titles one on top and one underneath the image.
    Also when i mouse over the title on top disappears that is not what i’d like.

    #2148559
    Ying
    Staff
    Customer Support

    You can go to customizer > layout > Woocommerce, uncheck the Display product title option, so there will only be one title.

    Also when i mouse over the title on top disappears that is not what i’d like.

    Not sure what this means, let me know if there’s any more questions after apply the CSS I mentioned here:
    https://generatepress.com/forums/topic/woocommerce-stopped-display-secondary-image-on-hover-after-moving-product-title/#post-2145808

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.