CODEWITHSUNDEEP
csswordpresswoocommercehover
N.Mar
N.Mar

Reputation: 3

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

Thank You for helping and sorry for my English :)

Upvotes: 0

Views: 8826

Answers (4)

Sp33dy
Sp33dy

Reputation: 1

Seems like an old question, but I have the following to share with anyone still looking for a solution:

  1. Open the "Customize" tab on the left side of your Wordpress toolbar.
  2. Scroll down to "Additional CSS"
  3. Add the CSS code from the snippet.
  4. Modify the Scale and Rotation as desired. A Scale of (1) is a one-to-one ratio. I've found that using (1.1) or (1.2) have a pleasant appearance. The Rotation is in degrees. A rotation of (5deg) is only 5 degrees, but still pleasant. While a rotation of (90deg) with rotate the image completely horizontal.

.woocommerce li.product:hover img {
  transform: scale(1.1) rotate(90deg);
}

Upvotes: 0

Stefan Sabin
Stefan Sabin

Reputation: 1

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.

Upvotes: 0

St3ph3n92
St3ph3n92

Reputation: 356

@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

Upvotes: 0

St3ph3n92
St3ph3n92

Reputation: 356

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.

Upvotes: 0

Related Questions