Hvordan endre størrelse på WooCommerce Gallery-miniatyrbilde

Som nettbutikkeier er det avgjørende å ha visuelt tiltalende bilder av produktene dine for å tiltrekke potensielle kunder. WooCommerce, den populære e-handelsplattformen, har en innebygd bildegallerifunksjon for å vise frem produktbildene dine. Det kan imidlertid hende at standard galleriminiatyrstørrelse ikke alltid passer til nettstedets design og layout. I denne artikkelen vil vi veilede deg om hvordan du endrer størrelsen på WooCommerce-galleriets miniatyrbilde for å gjøre den mer egnet for nettstedet ditt.

Trinn 1: Få tilgang til temaets Functions.php-fil

For å endre størrelsen på WooCommerce-galleriets miniatyrbilde, er det første trinnet å få tilgang til temaets functions.php-fil. Du kan gjøre dette ved å logge på WordPress-dashbordet og navigere til Utseende > Temaredigering. Velg functions.php-filen fra listen på høyre side av skjermen.

Trinn 2: Legge til en ny bildestørrelse

For å legge til en ny bildestørrelse for WooCommerce-galleriminiatyrbildet kan du bruke add_image_size()-funksjonen i temaets functions.php-fil. Her er et eksempel på en kodebit for å legge til en ny størrelse på miniatyrbilde:

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

I dette eksemplet har vi kalt den nye bildestørrelsen "woocommerce-thumbnail-new" og satt dimensjonene til 200 x 200 piksler. Den siste parameteren "true" betyr at bildet vil bli beskåret for å passe nøyaktig til dimensjonene.

Trinn 3: Regenerering av miniatyrbilder

Etter at du har lagt til den nye bildestørrelsen, må du gjenskape miniatyrbildene dine slik at størrelsen endres slik at de samsvarer med de nye dimensjonene. Du kan bruke en plugin som Regenerate Thumbnails eller Thumbnail Regeneration for å gjøre dette.

Trinn 4: Oppdatering av temaets CSS

Når du har gjenskapt miniatyrbildene dine, må du oppdatere temaets CSS for å vise den nye miniatyrstørrelsen på riktig måte. Du kan gjøre dette ved å legge til følgende CSS-kode i temaets style.css-fil:

.woocommerce div.product div.images .woocommerce-product-gallery__image img {
bredde: 200px! viktig;
høyde: 200px!viktig;
}

I dette eksemplet har vi satt bredden og høyden for å matche den nye bildestørrelsen vi laget tidligere. Den "viktige" erklæringen sikrer at CSS-egenskapene brukes selv om det er andre stilarkregler som er i konflikt med dem.

Trinn 5: Teste din nye miniatyrbildestørrelse

Til slutt kan du teste den nye miniatyrbildestørrelsen ved å navigere til en av produktsidene dine med flere bilder og sjekke at miniatyrbildene nå vises i riktig størrelse.

konklusjonen

Å endre størrelsen på WooCommerce-galleriets miniatyrbilde kan gjøre en stor forskjell i hvordan produktbildene dine vises på nettstedet ditt. Ved å følge trinnene som er skissert i denne artikkelen, kan du enkelt lage en ny bildestørrelse for miniatyrbildene dine, gjenskape miniatyrbildene, oppdatere temaets CSS og teste den nye miniatyrbildestørrelsen. Med litt CSS-kunnskap og noen enkle kodeendringer, vil du være på vei til å vise frem produktene dine på best mulig måte.