Facebook-for-woocommerce: Shop Feed Images not displaying well : Non-Square Images are Cropped

[jaisinamban]

I am using facebook for woocommerce, it works great and does pull the data from my products to facebook shop.

i had one major problem though, facebook pulls images as they are. and facebook does not auto fit the images in the square products just because my images are not 1:1 ratio.

is there a settings for this on facebook?

you can see the facebook shop here:
https://www.facebook.com/NowTheGlasses/shop/

i need help.
Thanks

Facebook Page URL : https://www.facebook.com/NowTheGlasses/shop/
WordPress and WooCommerce version number : 4.7.6 , 2.6.13
Facebook Plugin version number : 1.4.3
How many products you have : about 1000 products, not including product variations
Types of products (i.e. anything besides simple/variable products won’t work)
Do you have Duplicate SKUs in your system? probably, a few
What kind of customization plugins you're using (if any)? some. but i dont think there would be a problem

the problem here is on fb feed.

[dmitridr]

Hello,

This help center article describes how you can control how the product images look on Facebook in ads. It should apply to the images you see in shops as well. Could you try this and let us know if it helps?

[jaisinamban]

Hi there,

thanks for replying.

I've already tried that before and tried it again.
Crop and resize image to fit ad or Fit image to ad.

But it doesn't change anything.

https://www.facebook.com/pg/NowTheGlasses/shop/

i think this only works for ads? not the shop page.

if you see four products in my shop page that are fine, they are just manually added on my shop feed and they're not fetched on my site.

please help.

[dmitridr]

Thanks for trying that out. I confirmed the problem on our end on our test shop, none of the settings work when I am testing either and the images are cropped.

We can provide an option to zoom out or zoom in, or reuse the setting that currently only works for ads, but this is going to be a pretty big change so it will take some time.

In the meantime the workaround would be to do what you did with the manual items.

[jaisinamban]

Thanks for replying.

I'll look forward to that.

[dmitridr]

We've passed this to the shops team as a feature request to allow non-square images as an option.

They also shared with me some insights about their testing of non-square images in the past: these don't look good in the shop when enabled. We have gotten a lot of negative customer feedback in the past. Recommend to anyone reading this to bite the bullet and create square images for FB.

If there's enough interest we can add a filter to the plugin which could be used to preferentially sync square/fb-specific gallery images as the primary image to display within the shop.

[PRosenb]

Yes, it would be great to be able to select an image or image size to be used as primary image at facebook.

[dmitridr]

Would you mind if I asked you to open a separate issue/feature request for that @PRosenb ? This issue, we can keep for discussion about the cropping.

[PRosenb]

My aim is to solve the cropping problem with that input. The ability to select an image would solve it in the way that you could upload a square one and then select that for FB. I don't mind other solutions and hope we get something so that it's possible to have nice images on FB and still non squares ones on WooCommerce.

[dmitridr]

Fair enough. We are not actively working on that yet, prioritizing performance of product sync for now. We're happy to review any pull requests though, if anyone would like to build this feature in the meantime.

[concypt]

I am using "Facebook for Woocommerce" plugin on my site to sync Shop on my Facebook page with my website. It imported all products from my website successfully. But imported images are cropped and does not look nice. My products are books so titles are not square. I want them to be fixed but no help found on the issue yet. I wanted to run campaign but this issue is stoping me to proceed with it. I don't mind getting my images fit in a square but it must needs to be proportionally correct even if there will be an empty or white space on left and right. I have 900+ products in my page.

My shop address is: https://facebook.com/pg/raavi.pk/shop/
My website address is: https://raavi.pk/

I found a setting in pixels that fixed the issue for ads but it does't make any difference in shop section of my facebook page.

Please guide me how to deal with this issue quickly. Thanks

[dmitridr]

@concypt Unfortunately, there's no plan for the shop to allow non-square images, according to the shops team, as in the thread above, they have tried this feature in the past and found it was horrible. I will pass along your feedback to them, however, perhaps the square cropping can be improved, but this will not be a quick change even if they do this, it will take a while... the problem is if they improve square cropping for your case, they may very well ruin it for someone else's.

If you need this solution really quickly, I can propose a workaround: you could crop the images yourself, then add them to the image gallery, the filename should have some string, for example facebook that can be used to identify these images. Then you would need to modify code to make these images the primary image sent to FB, I can guide you through the modification, it will not be too difficult, you will simply need to insert some lines into the plugin in one spot.

There is also a way to do this without adding the manually cropped images to the gallery, and just having them on your server somewhere, in the format <wpid>_facebook.png. Such an approach would also work.

[concypt]

Thanks @dmitridr for your kind reply.
Both solutions works for me but I think the second solution works best for my case i.e. putting images in a folder on my server in _facebook.png ... (I could write a small plugin that will crop image as per my requirements and put them with name you said). I have only one question in mind. How it will work for future products and sync process?

If there is no issue with sync and new products then please send me instructions for modifying the plugin for this workaround.
other wise fist one will work better. thoughts?

[concypt]

@dmitridr waiting for your kind reply

[dmitridr]

Hello @concypt

Thanks for your patience.
If your naming scheme is <id>_facebook.png and the images are located in the base directory of your webserver, here's (roughly) the code you would insert:

add_filter( 'facebook_for_woocommerce_integration_prepare_product', 'wc_fb_square_image_fix', 10, 2);
function wc_fb_square_image_fix($product, $id){
  $product['image_url'] = 'http://www.mywoocommercesite.com/'.$id.'_facebook.png';
  return $product;
}

Of course, you'll have to change mywoocommercesite.com and if the images are in some other location on your webserver, you will have to adjust the URL accordingly and insert the folder name. You can insert this code anywhere, but I recommend inserting it here. What the code is doing is intercepting the data sent to FB (by using a filter we have built in) and adjusting it accordingly.

I tested this approach on our test servers, it seems to work.

[concypt]

@dmitridr Thanks a lot. It works like a charm. Will it work for new products and update product as well?

[dmitridr]

Yes, it should. The one caveat is if you update the plugin, you should insert the same code again.

One way to avoid having to do this is to create a separate (small) plugin and add the PHP code above into that plugin. If you do that, you won't need to change anything on update.

[mengyingdu]

Hi @jaisinamban , @PRosenb,

Given there's no plan for the shop to allow non-square images, according to the shops team, as in the thread above, I would suggest you try the workaround which @dmitridr confirmed with @concypt .

Thanks!

[gadgetografer]

Hello @dmitridr , @concypt
Im having the same issue but im an amateur. Could you please explain me where to put this code??

[dmitridr]

Hi @gadgetografer the nice thing about the filter is you can put the code almost anywhere, and it will work.
I recommend the top of the file facebook-for-woocommerce.php right above class WC_Facebookcommerce, here.

You can find the file using the Wordpress Plugin Editor. Plugins > Edit on the left hand side in the admin panel, then select our extension in the top right.

[dmitridr]

Hopefully it was clear from my previous comments, but you will also need to manually prepare images for Facebook following a certain naming schema, and make sure those images are in the right place on your server. Placing the code is the easy part compared to that...

[DebraWen]

Hi @dmitridr, will I need to prepare new images for all my products or just the ones that look bad because of the square crop. I mean, do I need images for all products to now be in this new folder in my base directory - or will the plugin pick up as normal if it doesn't find an image for the product here?
It would be good to only need to create replacements for the ones that look bad!
Thanks...

[dmitridr]

Hi @DebraWen sorry I missed your comment.
The plugin won't pick up as normal using the solution I gave months ago, but you can add the additional functionality you describe with a small modification.

You would need additional logic to check if the file exists, in the appropriate directory. So the code will look like this:

add_filter( 'facebook_for_woocommerce_integration_prepare_product', 'wc_fb_square_image_fix', 10, 2);
function wc_fb_square_image_fix($product, $id){
  if (file_exists('replace_this_with_the_path_to_the_directory_your_images_are_in/'.$id.'_facebook.png')) { 
    $product['image_url'] = 'http://www.mywoocommercesite.com/'.$id.'_facebook.png';
  }
  return $product;
}

Of course you need to put the right directory inside file_exists(...) I don't know what that is offhand it depends on where you are putting the new images in your server.

[lgfogle]

Hey there! 👋

Lindsey here, from the SkyVerge product team! We recently took over development and support for the Facebook for WooCommerce extension.

In our recent 1.10 releases, we've fixed many issues impacting the store connection, pixel tracking, and product sync. Could you please update to the latest version of Facebook for WooCommerce and see if that resolves this issue?

If not, could you please contact our support team or open a new issue here? We'd be happy to help troubleshoot further with you.

Thank you!

[lgfogle]

Hey there! 👋

Lindsey here, from the SkyVerge product team! We recently took over development and support for the Facebook for WooCommerce extension.

In our recent 1.10 releases, we've fixed many issues impacting the store connection, pixel tracking, and product sync. Could you please update to the latest version of Facebook for WooCommerce and see if that resolves this issue?

If not, could you please contact our support team or open a new issue here? We'd be happy to help troubleshoot further with you.

Thank you!