Png product images, do not show the transparency after latest update 8.0.5/4.0.5

This topic has 16 replies, 2 voices, and was last updated 4 years, 3 months ago ago by Dimitris

  • Avatar: Dimitris
    Dimitris
    Participant
    August 25, 2021 at 10:08

    I have curved rectangular images used in product gallery, and since the last update png images appear as .jpg. Meaning that they don’t show the transparency in the corners. pls help!
    correct png appearance
    wrong appearance

    15 Answers
    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    August 25, 2021 at 10:12

    Hello,

    We can’t check your screenshots, because we get a message about “No access”. It is not the first time. Please use Gayzo or Lightshot screenshot tools to make and share screenshots.
    Provide URL of product page with such problem and temporary wp-admin access.

    Regards

    Avatar: Dimitris
    Dimitris
    Participant
    August 25, 2021 at 10:14

    apologies, pls retry same links, they are unrestricted now…

    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    August 25, 2021 at 15:26

    Thanks for the reply.
    Please answer this also: “Provide URL of product page with such problem and temporary wp-admin access.”
    You can use the Private Content area – https://gyazo.com/9aa878bdc257b604a50e73da59d31aba

    Regards

    Avatar: Dimitris
    Dimitris
    Participant
    August 26, 2021 at 09:14

    All product pages have the same issue, but to have a specific example to work on:
    https://foodstyle.gr/wp-content/uploads/2021/06/fs_act_chicken_cup.png, or same product another image: https://foodstyle.gr/wp-content/uploads/2021/06/fs_act_characteristics-copy.png

    Please contact administrator
    for this information.
    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    August 26, 2021 at 10:07

    Hello,

    Thanks for the reply. But I’ve asked URL of product page, because, at first sight, I do not see the problem. Your images – https://gyazo.com/914c3931dc93aaeb91b471bf81b22153 and Single product page – https://gyazo.com/9009c72abbb6a7cb79f6756a46d761ff Where is the problem here? PNG with transparent background – https://gyazo.com/6a3ae3843d4261a1df934aae1309cb90 Try to clear all cache and check.

    Images are not clear on the Single product page, It is 250×250 size and then stretches. You did not set administrator role, so I can’t check your settings in Theme Options. Read this article about settings of product images, set correct size and regenerate thumbnails – https://www.8theme.com/documentation/xstore/woocommerce/product-images/

    Regards

    Avatar: Dimitris
    Dimitris
    Participant
    August 26, 2021 at 10:44

    when clicking (to zoom) on product image, the png loses its transparency. Also there are no “buttons” to select an action (close, zoom, etc) but just the picture so you have to go back via browser b button. pls look closely to the snapshot to understand the problem, thx
    left correct side vs right wrong side

    Please contact administrator
    for this information.
    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    August 26, 2021 at 12:53

    Hello,

    Theme Options > WooCommerce > Single product builder > Gallery > Lightbox > On, and add the next code in Theme Options > Theme Custom CSS > Global custom CSS:

    .single-product .pswp img {
        border-radius: 10px;
    }

    Regards

    Avatar: Dimitris
    Dimitris
    Participant
    August 26, 2021 at 12:58

    thx, i will do it, but this is NOT a solution to have png transparency working. it is just to make round corners on product images. which means if I need a different kind of transparency, i ll still have a problem with the background… pls advice

    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    August 26, 2021 at 13:25

    Ok. Check your Κουάκερ φαγόπυρου με κοτόπουλο product, it works fine – https://gyazo.com/01bfe3be46335825772915b434e8a084 But your Noodles γαρίδες cup product has .jpg image from start – https://gyazo.com/fa58e010a9092b99a04b4b731553c7a2

    Regards

    Avatar: Dimitris
    Dimitris
    Participant
    August 26, 2021 at 13:30

    thx this is gr8. As it was before the update. Yes I know some are still .jpg. I am switching them progressively. Was this a bug, or my settings fault? pls let me know how u fixed it, so I ll know next time;)

    Avatar: Dimitris
    Dimitris
    Participant
    August 26, 2021 at 13:32

    PS the primary product image is still not recognised as png I think k. it manually subtracts corners with a delay after the image is shown. not looking good:(

    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    August 26, 2021 at 15:35

    Hello,

    PS the primary product image is still not recognised as png I think k. it manually subtracts corners with a delay after the image is shown. not looking good:(

    – provide URL

    Regards

    Avatar: Dimitris
    Dimitris
    Participant
    August 26, 2021 at 17:02

    I tried it in a couple of products and it is the same, so I guess it occurs in every product page. Check this for example:
    https://foodstyle.gr/index.php/product/banana-cake/#&gid=1&pid=1

    It starts with a black rectangular and progressively becomes curved. but this is only noticeable in the first image you click on to popup, the remaining pics look ok.
    snapshot
    also pls check video (.mov) if you can:
    video capture

    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    August 26, 2021 at 17:16

    Just add this code:

    .single-product .pswp__img--placeholder--blank {
        background: transparent !important;
    }

    and the problem will be solved.

    Regards

    Avatar: Dimitris
    Dimitris
    Participant
    August 26, 2021 at 17:20

    didi it,. perfect, thx))

  • Viewing 16 results - 1 through 16 (of 16 total)

The issue related to '‘png product images, do not show the transparency after latest update 8.0.5/4.0.5’' has been successfully resolved, and the topic is now closed for further responses

We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.