Tuesday - Feb 07, 2017

Immagini sgranate in Woocommerce? La soluzione


woocommerce immagini sgranate non nitide wordpress

Ciao a tutti, oggi vorrei parlarvi di una problematica che ho riscontrato personalmente e che potrebbe verificarsi per chi fa e-commerce con WordPress: il dilemma delle immagini sgranate usando il plugin Woocommerce, una piattaforma molto valida per le vendite online.

Mi era arrivato un sito dove le foto non risultavano ben visibili sia nell’elenco dei prodotti, che nelle pagine del singolo prodotto e girovagando per il web ho trovato una serie di guide, che secondo me sono di difficile comprensione per chi si approcia a questo plugin per la prima volta.

Ora vi riporto di seguito una soluzione molto veloce, trovata nella sezione di supporto di Woothemes che vi permetterà di lavorare solo attraverso il CMS, senza andare ad intaccare file di tipo CSS, come ho visto in alcune guide.

Come risolvere il problema

Per prima cosa, scaricatevi il plugin “Regenerate Thumbnails” e attivatelo entrando nell’area “Plugin”; ci servirà tra pochi minuti.

Poi andate nella sezione Woocommerce presente a sinistra nella vostra barra di WordPress, cliccate su impostazioni, e successivamente entrate nel foglio “Prodotti” situato in alto.

Ora vi ritroverete in questa schermata

Woocommerce immagini sgranate

Nella sezione “Dimensione immagine prodotto” andremo ad impostare i valori che permetteranno di rendere nitida la nostra foto; quindi, in Foto del singolo prodotto che di default sarà circa 300×300, andiamo a cambiare il valore con 600×600 (Anche 500×500 va bene).

Se pure le eltre immagini vi risultavano sgranate, allora alzate i valori anche di quelle. Nel mio caso le “immagini prodotto” le ho impostate 140×140, ma alzate pure questo valore se volete. Infine, Ricordatevi di salvare!

Perfetto! Una volta impostato tutto questo andremo ad usare il plugin installato inizialmente: “Regenerate Thumbnails”, che lo troverete in “Strumenti“.

Schermata-2014-07-09-alle-18.27.14

A questo punto non vi rimane che cliccare su “Regenerate All Thumbnails” se volete ridimensionare tutte le immagini, sennò cliccate nel link “media” che vedete in descrizione, se volete scegliere i file specifici da ridimensionare e aspettate alcuni secondi, o minuti, dipende dalla quantità di immagini che avete.

A operazione completata non vi rimane che andare a vedere le vostre immagini nella sezione e-commerce e scoprirete che ora il problema è risolto!

Per rendervi la vita ancora più facile, vi pubblico il video tutorial ufficiale di Woothemes.

 

Spero di esservi stato d’aiuto!

 

5 comments
  1. Nicola

    8 ottobre 2014 at 00:30

    Finalmente!
    Era solo 1 dei vari problemi che ho con l’impostazione di Woocommerce ma mi ha ridato il sorriso :))
    Grazie!!!
    Potessi chiederti anche altre cose ne sarei strafelice, fammi sapere se posso.

    Reply
    • Nicolò - admin

      Nicolò - admin

      8 ottobre 2014 at 14:38

      Ciao Nicola, mi fa molto piacere che questo articolo ti abbia aiutato. Se hai bisogno chiedi pure, anche se non scrivo da molto in questo blog non farci caso, son sempre attivo! 🙂
      Complimenti per il sito.
      Buona giornata

      Reply
  2. Antonio

    6 febbraio 2015 at 14:55

    Ciao,
    molto utile questa tua dritta, io pero’ avrei un altro problemino.
    Quando imposto le immagini variabili nel prodotto variabili me le apre tutte piccole, invece di aprirle normalmente a tutto schermo (come fa con le stesse identiche immagini ma non inserite nelle variabili).
    Grazie.
    Saluti.

    Reply
  3. Orsola

    10 aprile 2016 at 12:24

    Ti ringrazio infinitamente! Non vado molto d’accordo con i cms, ma quando i clienti lo richiedono c’è poco da fare. Mi hai aiutato tantissimo.

    Reply
    • Nicolò - admin

      Nicolò - admin

      13 aprile 2016 at 22:56

      Ciao Orsola,
      grazie a te del commento, son contento di esserti stato utile. Buon lavoro

      Reply

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

AlphaOmega Captcha Classica  –  Enter Security Code
     
 

Predefined Skins

Primary Color

Background Color

Example Patterns

demo demo demo demo demo demo demo demo demo demo