Okay
  Public Ticket #1926886
Blurry woocommerce thumbnails
Closed

Comments

  • yorlmar started the conversation

    Hi, I have tried in many ways to improve the quality of thumbnails in product pages, but so far I have not found the solution.

    There is some way to show the images of products page like an autoplay carousel? or images with the same width size, each one under the other, like in side portfolio v3 or v5

    https://preview.themeforest.net/item/bifrost-simple-portfolio-wordpress-theme/full_screen_preview/23180008?_ga=2.173096163.1195347120.1552141403-1898887788.1549765709&_gac=1.82565604.1549765709.Cj0KCQiAkfriBRD1ARIsAASKsQLsik8_7okjwwlGNKAC_l3rdoJXun3B7Yko5nP9lLY6mXewV4Ds5fgaAsDREALw_wcB

    I do not know if the product pages can be edited using elementor, for now I do not see that option in product category

    I would also like to be able to eliminate the SKU number and the category from the product page.

    Keep the good work. Thanks in advance!

  •  675
    Neuron replied

    Hi,

    1) To change the blurry from the WooCommerce, please add the following code in the functions.php, I would suggest you to install a child theme, so in case any update nothing will lose.

    /**
    * WooCommerce Product Gallery
    *
    * Changes the image sizes from
    * thumbnail to medium for sharper
    * resolution.
    */
    add_filter('woocommerce_gallery_thumbnail_size', 'custom_woocommerce_gallery_thumbnail_size');
    function custom_woocommerce_gallery_thumbnail_size() {
        return 'medium';
    }

    We'll fix also this one the upcoming update, but for now stick with the code.

    2) To remove the SKU and Category add the following style.

    .woocommerce .o-product .m-product-summary .product_meta {
        display: none !important;
    }

    Feel free to ask for anything you need.

    Kind Regards


    Subscribe to our newsletter to get the latest updates about NeuronThemes and join our community Facebook Group.

  • yorlmar replied

    It works perfectly for the gallery thumbnails, but I have added the next code for the image above gallery thumbnails and nothing happened:

    add_filter('woocommerce_thumbnail_size', 'custom_woocommerce_thumbnail_size');
    function custom_woocommerce_thumbnail_size() {
        return 'large';
    }

    and this code for the single size:

    add_filter('woocommerce_single_size', 'custom_woocommerce_single_size');
    function custom_woocommerce_single_size() {
        return 'large';
    }

    I don't know if it's a problem of indentation or some term, I also tried replacing 'large' with 'full', but it did not work eitherThen I added the corresponding code (that you give to me) to the following style sheets:

    style.css

    bifrost.css

    but the data was not hidden.

    I appreciate all the help.

    Best!


  • yorlmar replied

    Sorry, the css works perfectly, I'm making the test on Safari and cache problems prevent me to see the changes correctly, I have flush it and now works well.

    The image issue was not solved, obviously there is something that is not correct in the code, If you tell me that I can change everything would be in order :)

    Many thanks for the support!

  •  675
    Neuron replied

    Hey,

    The PHP code is destined to change the gallery image sizes here. http://prntscr.com/mvwfes

    Are we talking about the same gallery?


    Subscribe to our newsletter to get the latest updates about NeuronThemes and join our community Facebook Group.

  • yorlmar replied

    Yes, but the big image still blurry (compare on the attachment), the small thumbnails seems perfect.

    I see that the original image (2000 x 1000) is resized to 768 x 384 and then showed at 806 x 403. The intention is that this larger image also look sharp.

    Thanks again


  • yorlmar replied

    At first I had tried with .svg files, to avoid that kind of problem, because I want the images to be sharp (I sell typefaces), but then I realized that it does not show the post if there are any images with svg format.

  •  675
    Neuron replied

    If you want to upload SVG files, please install and activate this plugin. 

    - https://wordpress.org/plugins/svg-support/

    Please, let me know if it works.

    Kind Regards


    Subscribe to our newsletter to get the latest updates about NeuronThemes and join our community Facebook Group.

  • yorlmar replied

    I try before with another plugin (safe svg) and now with which you recommend me, only allows the svg load but then disappears from the product page.

    However it is displayed inside the product page. I did the test reloading the product page. But the problem is that it does not show me on the main page.

    I would work perfect using the svg, but I should be able to see them on the products page.

    In the image (when loading the svg: disappeared the product that was before that shown above the product with the word Grill 7 <— this word still being a raster file, if I change by svg would disappear ).

    Sorry for so many messages

  •  675
    Neuron replied

    No worries, well by default we do not support the SVG's as product images, but please provide me with an URL, maybe they're missing simply the width and height. Maybe I can check it.

    Feel free to ask for anything you need.

    Kind Regards,
    NeuronThemes


    Subscribe to our newsletter to get the latest updates about NeuronThemes and join our community Facebook Group.

  •   yorlmar replied privately
  •  675
    Neuron replied

    Hey,

    No worries, can you please try just one more thing, before we check it with anything else.

    Can you please change the 'medium' to 'full'.

    That will show their full resolutions.

    Kind Regards


    Subscribe to our newsletter to get the latest updates about NeuronThemes and join our community Facebook Group.

  • yorlmar replied

    Hi Neuron I made the changes but nothing happened. I put the site online:

    www.rnsfonts.com

    If you could check what happens with the first image I would appreciate it, maybe I'm using a size or a proportion that does not correspond. My images originally are on 2000 x 1000 px and have tested on 4000 x 2000 so far I do not see any improvement, only in the svg images.

    Thanks again.

  •  675
    Neuron replied

    Hi,

    I'm sorry for the late reply, we did not work on the weekend.

    The first image on your website seems to be a .png. http://prntscr.com/n5qopa

    To me is looking pretty clear, you can change maybe its thumbnail size to 2000 x 1000 on the thumbnail settings of the posts, so it doesn't have to be resized and it will look alright.

    Kind Regards


    Subscribe to our newsletter to get the latest updates about NeuronThemes and join our community Facebook Group.