Variation image or Another Image as Woo Feature Image - woocommerce

Really appreciate your help this one...
How can I display a woocommerce product variation's image as the featured image on the woocommerce single product page?
Alternatively how can I use another image as the product page featured image?
Here's why I need that:
WooCommerce with OceanWP has a neat slider feature that appears on hover over each product listing on the shop page that allows users to cycle through the product's gallery images. It's like a preview and is exactly the user experience I want as the product that I'm selling comes in a variety of colors.
When a user selects a product in the shop archive and clicks-through to the single product page though, I need to display the featured image as a mockup of the product. It's a better user experience because it shows the user already the design they selected on the shop archive page as a product mockup. This helps to visualize and clarify what they're getting.
So I've hidden the thumbnail gallery using CSS and set the woo product variation images to an image of the mockup in the right colour. When the user selects a 'colour' option, the woo gallery slider changes accordingly and that's the right user experience too.
My problem is simply when the user first clicks-through from the shop archive to the single product page, instead of showing the product's default featured image, show one of the product variation images, which are mockups...or at least show another image altogether so the user sees the mockup, selects the color option and the user experience is simple.
Any ideas on how I can do this?
Thanks a mil for any help :)

Related

Woocommerce (Wordpress) - Hide featured product from products

I have to create a view in a Wordpress template where I highlight a featured product in the header with [featured_products] and show all the other remaining products in a section below the header. I need to list all products with [products orderby="rand"] without the featured one, because this one is shown in the header of the page already.
Any way to do this?
Thanks in advance!
PS: I don't understand how people have not come across the same problem, lol.

Woocommerce 2nd image on hover not working

We have a problem with a new webshop we want to put online. We want to display the 2nd image on a hover on desktop for our store. It works on the default shop page (https://www.festivalapparel.nl/shop/) but not on our homepage (https://www.festivalapparel.nl/). It has been created with the building block from woocommerce: featured item. It looks like it does not load two images per item, so it can't switch it.
In summary: it works on the preset shop page but not on the homepage using their building block, we also want it to help there. Thanks!
Replace your page builder block with this shortcode bellow:
[products limit="10" columns="5" best_selling="true"]
If you want to display best sellers manually you could use featured function with shortcode bellow. To set featured products there is a star icon in your woocommerce admin products list so you could just click on it and product will be featured.
[products limit="10" columns="5" visibility="featured" ]

How to bulk edit image URLs in featured product images, menu custom links and in product descriptions?

As per subject title, how to bulk edit image URLs in featured product images, menu custom links and in product descriptions? And in the plugin like gravity form.
I tried looking for plugins but I can't find one that update image URLs in the locations I want. Thanks

Placeholder thumbnails are showing instead of product images in WooCommerce categories page

placeholder thumbnails are showing instead of product images in woocommerce categories page, this images shows all the products under the "Beauty and perfumes" category
placeholder thumbnails shows instead of my product thumbnails
but the image displays when i click on a specific product
enter image description here
I had a plugin that had settings hiding the images inadvertently.
To figure out the culprit I deactivated all my plugins. The images were now showing. Next, I added re-activated them one by one until the placeholder images showed up again. So now I knew what/who was causing the issue.
I then activated the offending plugin and went through its settings until I found a setting that turned off images.
In this case, it wasn't a bad plugin it was just user error.
Just in case you are using the same or similar plugin it was: "Easy Custom Auto Excerpt"
I hope this helps any future developer with this problem.
Just an additional info.
I came across with this issue just right now.
Please make sure to set the Primary image of the product otherwise it will show the placeholder and won't show the product image gallery too.

Custom Subcategory Page on WooCommerce

I am working on a shopping cart WordPress site and I would like to customize the subcategory page. Here is a link to my shopping cart.
When you click on that link you see only the product category images. Originally, you saw both the image and title, but that's not how I wanted it to be so I edited the content-product_cat.php file.
When you click on the Product Category it takes you to all the products that pertain to that category and is displayed the same way the product categories are - just the image. However, I want it to only display the titles, no images, just the titles. I understand that it's just showing the images because it's also using the content-product_cat.php file.
How can I make it so that only the product category shows images but the actual products show just the titles?
Here is an example of what I want my site to do.
I am new to building eCommerce and WordPress sites so the more specific you are, the better.
Any help is appreciated!

Resources