WooCommerce Galleryn pikkukuvien koon muuttaminen

Verkkokaupan omistajana visuaalisesti houkuttelevien kuvien saaminen tuotteistasi on ratkaisevan tärkeää potentiaalisten asiakkaiden houkuttelemisessa. WooCommerce, suosittu verkkokauppaalusta, tarjoaa sisäänrakennetun kuvagalleriaominaisuuden tuotekuvien esittelyyn. Gallerian pikkukuvan oletuskoko ei kuitenkaan aina välttämättä sovi verkkosivustosi suunnitteluun ja asetteluun. Tässä artikkelissa opastamme sinua, kuinka voit muuttaa WooCommerce-gallerian pikkukuvan kokoa, jotta se sopii paremmin verkkosivustollesi.

Vaihe 1: Teeman Functions.php-tiedoston käyttäminen

Jos haluat muuttaa WooCommerce-gallerian pikkukuvan kokoa, ensimmäinen vaihe on käyttää teemasi functions.php-tiedostoa. Voit tehdä tämän kirjautumalla WordPress-hallintapaneeliisi ja siirtymällä kohtaan Ulkoasu > Teemaeditori. Valitse functions.php-tiedosto näytön oikealla puolella olevasta luettelosta.

Vaihe 2: Uuden kuvakoon lisääminen

Voit lisätä uuden kuvakoon WooCommerce-gallerian miniatyyrillesi käyttämällä teemasi functions.php-tiedostossa olevaa add_image_size()-funktiota. Tässä on esimerkkikoodinpätkä uuden pikkukuvakoon lisäämiseksi:

add_image_size('woocommerce-thumbnail-new', 200, 200, true );

Tässä esimerkissä olemme nimenneet uuden kuvakoon "woocommerce-thumbnail-new" ja asettanut koot 200 x 200 pikseliä. Viimeinen parametri "true" tarkoittaa, että kuva rajataan niin, että se sopii tarkalleen mittoihin.

Vaihe 3: Pikkukuvien luominen uudelleen

Kun olet lisännyt uuden kuvakoon, sinun on luotava uudelleen pikkukuvasi, jotta niiden kokoa muutetaan vastaamaan uusia kokoja. Voit tehdä tämän käyttämällä laajennusta, kuten Regenerate Thumbnails tai Thumbnail Regeneration.

Vaihe 4: Päivitä teemasi CSS

Kun olet luonut uudelleen pikkukuvat, sinun on päivitettävä teemasi CSS, jotta uusi pikkukuvan koko näkyy oikein. Voit tehdä tämän lisäämällä seuraavan CSS-koodin teemasi style.css-tiedostoon:

.woocommerce div.product div.images .woocommerce-product-gallery__image img {
leveys: 200 kuvapistettä! tärkeä;
korkeus: 200px!tärkeää;
}

Tässä esimerkissä olemme määrittäneet leveyden ja korkeuden vastaamaan aiemmin luomaamme uutta kuvakokoa. "Tärkeä"-ilmoitus varmistaa, että CSS-ominaisuuksia käytetään, vaikka muut tyylisivusäännöt ovat ristiriidassa niiden kanssa.

Vaihe 5: Uuden pikkukuvakoon testaaminen

Lopuksi voit testata uutta pikkukuvan kokoa siirtymällä yhdelle tuotesivulle, jossa on useita kuvia, ja tarkistamalla, että pikkukuvat näkyvät nyt oikean kokoisina.

Yhteenveto

WooCommerce-gallerian pikkukuvien koon muuttaminen voi vaikuttaa suuresti siihen, miten tuotekuvasi näkyvät verkkosivustollasi. Noudattamalla tässä artikkelissa kuvattuja vaiheita voit helposti luoda uuden kuvakoon pikkukuvillesi, luoda pikkukuvat uudelleen, päivittää teemasi CSS:n ja testata uutta pikkukuvakokoasi. Hieman CSS-tiedon ja muutamien yksinkertaisten koodimuutosten avulla pääset esittelemään tuotteitasi parhaalla mahdollisella tavalla.