mtucker

Ah, nevermind. Found it in the options.

Wow, Josaphi. Thanks for your help! I think this would do it!

When you click on the image and go to the product page you can add to cart.

Thanks for the response, citynode.

The website owner specifically asked to leave out the addto cart button, so I hid it using CSS.

The main issue I am having is that if you scroll to the right you will notice that there is a lot of blank space. This is because I wanted to change the number of columns in Woocommmerce from 4 to 2.

To do this, I added this to my theme’s function file.

global $woocommerce_loop;
$woocommerce_loop[‘columns’] = 2;

When I did that it removed the images from two of the columns but it kept two “blank” columns- so the space remained as a placeholder. The only way to make the images larger was to allow the element to stretch beyond the site wrapper and have the blank columns rest on the right hand side of the website (which is why you can scroll to the right). So in short, the solution above is not truly removing the columns, just removing the images and keeping those columns. Has anyone figured out a solution for this?

Thanks for checking in Safari by the way. I’m not a mac user and apple is no longer supporting Safari. A few people checked for me and said the pictures were overlapping and they were not centered. Anyone else able to check in Safari?

Thanks!

Someone else must be having this issue. I figured out how to make it two columns and push everything to the right, but now I have all this white space to the right side of the website and it does not display properly in Safari.

Anyone know how to actually remove those right two “blank” columns? It seems like there is some sort of table and the filtering effect is not working.

Thanks!

I am having a similar problem, but this should be a quick fix.

If you just want to have three on a line, add this to your functions.php file.

global $woocommerce_loop;
$woocommerce_loop[‘columns’] = 3;

You may have to change the css to make the images align center, but it should fix your issue.

Just to clarify, this is on the catalog page that displays all of the images of the products. The product name and price are already displayed below, but I want them to show only on top of the image when hovered.

Is there a simple bit of code to make this happen?

Thanks!

Thanks bcworkz, only problem is I would have to recreate images each time I upload a new product and it really would not integrate with woocommerce. The price and product name are already there below the image, but I am not sure how to have it pop up when you hover over the image rather than sit below.

Thanks for your help!

It’s not quite what I need. I am looking to change have it pop up just on catalog images, but I can try to mess around with the javascript (I am no too familiar and probably just need to learn it now).

What I really want is for the store to look like this: https://shop.herriottgrace.com/ when scrolling over images. Any ideas? I keep trying with CSS but get nowhere.

I’m not familiar with java/jQuery… can anyone help me with this?

I feel like there has to be something incredibly simple. How would I make the product price and text show up in an image for WooCommerce?

Even if I can’t retrieve it from WooCommerce, how could I have the alt text of the image display on hover?

Thanks Esmi. Sorry, didn’t realize it’s not GPL.

I’m not looking for theme help, just help with the WooCommerce Plugin and coding for hovering over images.

I am building a child them of Manifest (it’s a simple bare bones theme).

The problem is I want all images to have this rollover function when uploaded as a new product in WooCommerce, so there needs to be some connection to WooCommerce rather than editing html for each photo.

Is there a simple way in CSS to display another element when hovered over an image?

Thanks for the response, but how would I get it to display the php meta data when hovering on each image?

I would assume I would need to change a template in Woocommerce. Anyone know of a way to write a function to display this information when hovering over each image?

How do I disable the “rich text” editor?

So then what editor should I use?