Transparent background gets black

Hello Philipp.

Thank you for the kind words, glad you are enjoying WP-Lister.

On my website I’m using png product images with a transparent background. And in the product description that looks awesome. Also on the single ebay product page within the regular product image. But somehow list views on eBay have rendered the images to jpeg, which lost the transparent background and is black now.

You would need to ask eBay about that. The image in the list view (the thumbnail) is resized and generated by eBay, not WP-Lister.

So my question: Is there a filter/hook I can use with which I can specify the product image. Not in the template HTML but as the “official” product image. That would be fantastic!

Well that would be the WooCommerce main image which is different from your question above regarding the thumbnail image in the list view on eBay.

Kind regards,
John

Hi John,

thank you so much for your fast answer.

Well that would be the WooCommerce main image which is different from your question above regarding the thumbnail image in the list view on eBay.

OK, I see. But what I thought about is that there might be a filter through which I could define another image URL eBay will use for the product image instead of the WooCommerce image.
Let’s say I keep my product images on the website as they are but add a custom field to each product (e.g. ‘eBay_image’) and wp-lister uses that image for the listing instead of the regular WC one.

I hope that clarified what I mean and thank you in advance!

Philipp

Hello Phillip.

Sorry but at this time the WC main image will be used as the main image on eBay. And the additional WC images will be used as gallery images on eBay (only pro supports that).

We are hoping to release an add on for WP-Lister that will allow our users more control over providing custom images to eBay, but it is not available at this time.

Kind regards
John

Hi Philipp,

you don’t need a filter hook for that, WP-Lister already checks for two different custom fields (aka post meta fields) when it fetches the main product image. Those fields are called:

ebay_image_url and
_ebay_gallery_image_url

So if you’d create either one of those fields / meta keys, and put an alternative image URL in there, you could easily define a custom main image to be used on eBay.

kind regards,
Matt

Dear John & Matt,

first of all thank you so much for your great support and answers. You’ve got me to the right direction and I got exactly what I wanted:

1.) Main Product Image
As I’m using ACF and love it’s easy usage of field types, I added another field “ebay_product_image” with which I’m able to override the featured image:

// Custom Product image for eBay
function volcanic_custom_ebay_product_image( $image_url, $post_id ) {

	// If a custim eBay image is set with ACF
	$ebay_image = get_field('ebay_product_image', $post_id);
	$image_url = $ebay_image ? $ebay_image : $image_url;

	return $image_url;

}
add_filter( 'wplister_get_product_main_image', 'volcanic_custom_ebay_product_image', 10, 2 );

2.) But the png of the featured image with transparent background looks awesome in my template. So I added another shortcade to display that instead of the image returned through the filter above:

// Featured Image shortcode
function volcanic_get_featured_image_process_html( $html, $item, $images ) {
	$product_id = $item[post_id];

	$image_url = wp_get_attachment_image_src( get_post_thumbnail_id( $product_id ), 'full', false )[0];
	if( !empty($image_url)) {
		$out = '<img class="wpl_product_image" src="' . $image_url . '" alt="main product image">';
	}

	$html = str_replace( 'volcanic_product_image', $out, $html );
	return $html;
}
add_filter( 'wplister_process_template_html', 'volcanic_get_featured_image_process_html', 10, 3 );

Maybe it helps someone else.

Thank you again! I’m getting close to my preferred set-up and I really enjoy working with WP-Lister.

Cheers,

Philipp

I’m glad you could find a working solution, Philipp.

As a reference, I would mention our API docs at https://www.wplab.com/plugins/wp-lister/api/ which should list all available filter and action hooks with some example code snippet… in theory that is. It turns out that one of the two filter hooks you used (wplister_get_product_main_image) isn’t mentioned there (yet), so congrats for finding that one!

I’ll see to add this filter to the list soon, using a code snippet similar to yours as an example. Thanks for sharing!

kind regards,
Matt

Sorry for taking so long, but I finally added your example code snippet to the collection, to demonstrate how to use the “wplister_get_product_main_image” filter hook:

https://www.wplab.com/plugins/wp-lister/api/#wplister_get_product_main_image

Thanks again for sharing!

kind regards,
Matt