Woocommerce Question posted in
The official Woocommerce documentation can be found here.

I want to change Product Image on Hover in Woocommerce wordpress

I am trying to change my products image on hover in woocommerce in wordpress !!!
I tried some plugins I saw like Woocommerce Product Image Flipper & Magni Image Flip for Wocommerce but they are not working for some reason and I tried the solutions you are suggested here in some similar questions .

So do you know another plugin free or not I dont care or do you know maybe an other solution with CSS maybe I dont know

I am using

  • WordPress Version : 5.3.2
  • WordPress Theme : Flatsome
  • Woocommerce Version : 3.9.2

Thank You for helping and sorry for my English 🙂

Tags:

5

Answers


  1. Chosen as BEST ANSWER
    0

    Thank you St3ph3n92 for your answer So can I change this code with something like this ???

    .product-image {
  height: 770px;
  width: 1155px;
  border: none;
  margin: 0 auto;
  background-image: url("img1");
  background-size: contain;
}

.product-image:hover {
  background-image: url("img2")
}
    <div class="product-image"><div>

    I mean that I want something more automatic cause I have 700+ products so I cant insert custom URLS for each one !!! I need a code so on hover my main Products image change with the second image from Product Gallery

    Thanks again for your answer !!!


  2. 0

    if you have access to the CSS, you could try setting the image as the background of the div it is in. You could then use the :hover selector to set a new background image.

    You can see this on the CodePen here: https://codepen.io/St3ph3n92/pen/BaopGQx

    Or run this snippet:

    .image-holder {
  height: 300px;
  width: 300px;
  border: 3px solid black;
  margin: 0 auto;
  background-image: url("https://images.unsplash.com/photo-1491553895911-0055eca6402d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80");
  background-size: contain;
}

.image-holder:hover {
  background-image: url("https://images.unsplash.com/photo-1514218953589-2d7d37efd2dc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60")
}
    <div class="image-holder"><div>

    I hope this helps.

    Login or Signup to reply.
  3. 0

    @N. Mar, Yes, the custom URL I used was only as an example. With background-image: url("img2"), that would select img2 if it is the same folder as your CSS file. However, if your images are kept in a separate folder, for example “images”, the CSS might be background-image: url("images/img2").

    There is a StackOverflow post on folder paths here that might be quite useful: What does "./" (dot slash) refer to in terms of an HTML file path location?

    Because you’re using WooCommerce, I imagine how you’re images are stored is a little different. This article might shed some light on it: https://enviragallery.com/where-does-wordpress-store-uploaded-images/

    If you want this to be automatic on WordPress, you will need to use PHP. The issue is that you cannot use PHP in CSS. Instead, you would need to add the styles inline or in the head of the theme’s html (as opposed to a separate stylesheet) and then use PHP to reference the image. This is a good bit trickier. There’s another Stackoverflow post on that here: CSS background images in WordPress

    Login or Signup to reply.
  4. 0

    I had the same issue on some of my websites with the same configuration as yours.
    Until a few days ago, I had that flipping effect on my products. It was by default, I didn’t install any plugin for this feature. Today I noticed that it’s not working anymore.

    I managed to solve this issue by disabling Autoptimize plugin. I don’t know if you use the same plugin, but maybe my answer will help you.

    Login or Signup to reply.
  5. 0

    ok @st3ph3n92 it is working for me !!!
    I just write custom css for the 10-20 products I have online every day so for now I am fine !!!
    Now in the future I hope there is plugin to do this job ^^

    Thank you again for your help @st3ph3n92

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

Back To Top
Search