Jak dodać obraz do produktu w WooCommerce

Szukasz sposobów na dodanie zdjęć do swoich produktów? Niezależnie od tego, czy jest to polecane, zdjęcie czy galeria, sposób prezentacji przedmiotów będzie decydował o tym, ile sprzedasz. Dlatego w tym przewodniku pokażemy, jak dodać obraz do produktu w WooCommerce .

Znaczenie obrazów w eCommerce

Obrazy są jednym z kluczowych elementów, jeśli chodzi o sprzedaż produktu. Obraz mówi tysiąc słów, więc produkt z atrakcyjnym wizerunkiem ma większe szanse na przyciągnięcie uwagi klientów i sprzedaż.

Właściciele sklepów wkładają dużo wysiłku w opisywanie cech swoich produktów. Ale nawet jeśli chcemy myśleć, że podejmujemy racjonalne decyzje, prawda jest taka, że ​​większość decyzji jest emocjonalna. Ludzie mają tendencję do podejmowania emocjonalnych decyzji i racjonalnego ich uzasadniania. Jeśli produkt wygląda dobrze, chętniej go kupimy, ponieważ przyciągnie on naszą uwagę.

Bez względu na rodzaj sprzedawanego produktu, będą mieli większe szanse na sprzedaż, jeśli będą dobrze wyglądać. Jeśli się nad tym zastanowisz, to logiczne. Jeśli ktoś zamierza używać lub nosić produkt, niezależnie od tego, czy są to buty, ubrania czy oprogramowanie, będzie chciał, aby wyglądał dobrze. Dlatego ważne jest, aby dodać i zoptymalizować obrazy używane do promowania swoich produktów i upewnić się, że to, co sprzedajesz, wygląda jak najlepiej.

Teraz, gdy rozumiemy jego znaczenie, przyjrzyjmy się, jak dodać obraz do produktu WooCommerce.

Jak dodać zdjęcia do produktu w WooCommerce

Istnieją 2 główne sposoby dodawania zdjęć do produktów w WooCommerce:

1. Korzystanie z pulpitu nawigacyjnego WooCommerce
2. Programowo

Przyjrzyjmy się obu metodom.

1) Dodaj obrazy z pulpitu nawigacyjnego WooCommerce

Dodanie obrazu do produktów to dość proste zadanie w sklepie WooCommerce. Kiedy tworzysz lub edytujesz produkt, na pasku bocznym znajdziesz meta pola obrazów. Tam będziesz mógł ustawić jeden polecany obraz i galerię obrazów z wieloma obrazami, aby zaprezentować swoje przedmioty.

Po kliknięciu dowolnego z nich otworzy się modalne i będziesz mógł przesłać nowe pliki obrazów lub wybrać jeden z istniejących z biblioteki multimediów WP.

Jeśli dodajesz obrazy do galerii produktów, możesz nacisnąć CTRL + lewy przycisk myszy, aby wybrać wiele obrazów i dodać je w jednej akcji.

Alternatywnie możesz dodać zdjęcia z opisu zawartości produktu. Wystarczy nacisnąć przycisk Dodaj multimedia i wybrać obrazy, które chcesz dodać. Jeśli korzystasz z tej metody, pamiętaj, że może to wpłynąć na projekt całej strony produktu, dlatego przed dodaniem obrazów w edytorze tekstu upewnij się, że wybrałeś odpowiedni rozmiar i wyrównanie.

Dodawanie obrazów z deski rozdzielczej jest proste. Jeśli jednak masz umiejętności kodowania, możesz również dodawać obrazy programowo, co zapewnia większą elastyczność. Zobaczmy, jak to zrobić.

2) Jak programowo dodać obraz do produktu WooCommerce?

W niektórych przypadkach może być konieczne programowe dodanie obrazów. Daje to większą elastyczność i pozwala uwzględnić wszystko, od zdjęć po pojedyncze produkty, zdjęcia, galerie i nie tylko.

W tej sekcji pokażemy Ci przykładowe skrypty, które pomogą Ci dodać zdjęcia do konkretnych produktów. Pamiętaj, że musisz zastąpić identyfikator produktu i obrazu w pierwszych dwóch wierszach funkcji identyfikatorem produktu i obrazu. W przeciwnym razie, jeśli ten identyfikator produktu i obrazu nie istnieją, otrzymasz błąd.

Pamiętaj też, że skrypty będą działać po jednym uruchomieniu. Oznacza to, że możesz je usunąć po ich uruchomieniu.

Na koniec musisz wkleić następujące skrypty do pliku functions.php motywu potomnego. Możesz to zrobić, przechodząc do Wygląd> Edytor motywów. Następnie wyszukaj plik functions.php w prawej kolumnie i wklej kod, jak pokazano poniżej. Alternatywnie możesz użyć wtyczki takiej jak Code Snippets.

UWAGA : Ponieważ będziemy edytować niektóre podstawowe pliki, przed rozpoczęciem zalecamy wykonanie kopii zapasowej witryny. Oprócz tego, że jest to najlepsza praktyka, zawsze dobrze jest mieć ostatnią kopię zapasową na wypadek, gdyby coś poszło nie tak. Jeśli nie znasz się na haczykach, zajrzyj do naszego przewodnika po haczykach WooCommerce, w którym dowiesz się, jakie są rodzaje haczyków i jak ich używać.

2.1) Dodawanie wyróżnionego obrazu do pojedynczego produktu

Ten skrypt ustawi polecany obraz dla pojedynczego produktu. W tym celu musisz podać identyfikator obrazu i identyfikator produktu, jak pokazano poniżej. Na przykład w tym przypadku ustawiamy zdjęcie o identyfikatorze 48 jako polecane zdjęcie produktu o identyfikatorze 195.

 function QuadLayers_add_featured_image() {

    $identyfikator obrazu = 48; // Identyfikator obrazu
    $post_id = 195; //ID produktu

    set_post_thumbnail( $post_id, $imageID );
    
}

add_action('init', 'QuadLayers_add_featured_image');

Hak init zapewni, że funkcja będzie mogła być uruchomiona wszędzie przy każdym załadowaniu strony. Ponadto używamy funkcji set_post_thumbnail() , aby ustawić polecany obraz. To zadziała zarówno w przypadku produktów, jak i postów.

2.2) Dodawanie wyróżnionego obrazu do wielu produktów

Podobnie możesz zrobić to samo z wieloma produktami, po prostu dodając ich identyfikatory. Ten skrypt doda obraz o identyfikatorze 53 do produktów o identyfikatorach 32, 33 i 34.

 function QuadLayers_multiple_featured_image() {

    $identyfikator obrazu = 53; // Identyfikator obrazu
    $post_id = array(32,33,34); //Identyfikatory produktów

    for ($ii=0; $ii < liczba($post_id); $ii++) { 
          
           set_post_thumbnail( $post_id[$ii], $imageID );      
    }
    
}
add_action('init', 'QuadLayers_multiple_featured_image');

Jak widać, jest to ten sam skrypt, co poprzednio, ale wszystkie identyfikatory produktów umieszczamy w tablicy. W ten sposób możesz przypisać ten sam polecany obraz do kilku produktów jednocześnie. Może to być przydatne w przypadku odmian produktów, które nie powodują zmian estetycznych. Na przykład możesz użyć tego samego wyróżnionego obrazu dla odmian tego samego telefonu komórkowego z różnymi pamięciami RAM.

2.3) Dodawanie zdjęć do galerii produktów

Dodanie obrazu do galerii produktów w WooCommerce jest nieco bardziej skomplikowane, ponieważ musisz skorzystać z dwóch funkcji. Jeśli sprawdzisz poniższy skrypt, zobaczysz, że pierwsza funkcja ( QuadLayers_create_gallery ) przygotowuje informacje potrzebne do stworzenia galerii. To jest lista zdjęć i identyfikator produktu, do którego chcesz dodać galerię.

Z drugiej strony update_post_met() odpowiada za tworzenie galerii. Aby to osiągnąć, musimy użyć identyfikatora produktu, w którym chcemy dodać galerię oraz listę obrazów w tablicy.

 funkcja QuadLayers_create_gallery(){ 
        $imgs_ids=tablica(48,53,47); //identyfikatory obrazów
        add_img_to_gallery(195,$imgs_ids); // ID produktu
}
funkcja add_img_to_gallery($product_id,$image_id_array){
        update_post_meta($product_id, '_product_image_gallery', implode(',',$image_id_array)); 
  
}
add_action('init','QuadLayers_create_gallery');

2.4) Ustaw domyślny obraz dla produktów bez polecanego obrazu

Widzieliśmy, że aby ustawić polecany obraz produktu, w panelu administratora musisz przejść do WooCommerce > Ustawienia > Produkty .

Jeśli chcesz programowo ustawić domyślny obraz, użyj poniższego fragmentu kodu.

 add_filter('QuadLayers_default_image', 'custom_woocommerce_placeholder_img_src');

function QuadLayers_default_image( $src ) {
	$upload_dir = wp_upload_dir();
	$uploads = unrailingslashit( $upload_dir['baseurl'] );
	// zastąp ścieżką do Twojego obrazu
	$src = $przesyłane . '/2021/07/album-1.jpg';
	 
	return $źródło;
}

Spowoduje to przypisanie domyślnego obrazu do wszystkich produktów bez polecanego obrazu. W tym przypadku używamy ścieżki obrazu zamiast identyfikatora, więc pamiętaj, aby zastąpić ją poprawną ścieżką obrazu.

Aby uzyskać ścieżkę, po prostu przejdź do Biblioteki multimediów , poszukaj obrazu, którego chcesz użyć, skopiuj ścieżkę URL i wklej ją w powyższym kodzie, zachowując bieżący format.

Jak dodać niestandardowe rozmiary obrazu

Oprócz dodania obrazu do produktu WooCommerce, możesz zrobić więcej, aby dostosować swoje produkty. Dobrą opcją jest utworzenie niestandardowych rozmiarów obrazów. Domyślnie WordPress zawiera 3 rozmiary obrazów: miniaturę (150 x 150), średni (300 x 300) i duży (1024 x 1024). Możesz łatwo zmienić te rozmiary z pulpitu nawigacyjnego, ale co, jeśli zamiast tego chcesz dodać niestandardowe rozmiary domyślne? Zobaczmy, jak to zrobić.

Najpierw otwórz plik functions.php i wklej następujący kod:

add_theme_support( 'post-thumbnails' );

Umożliwi to funkcję add_image_size i umożliwi tworzenie dodatkowych rozmiarów obrazu. Następnie zaktualizuj plik. Dodajmy teraz kilka nowych rozmiarów obrazów. W poniższym kodzie dodamy cztery niestandardowe rozmiary o różnych wymiarach. Po prostu wklej kod i dostosuj nazwy i wymiary do swoich potrzeb.

 add_image_size( 'post-thumbnail size' , 800, 240 ); add_image_size( 'homepage-thumb size' , 220, 180 ); add_image_size( 'fullpage-thumb size' , 590, 790 );

Otóż ​​to! Teraz będziesz mógł wybrać więcej domyślnych rozmiarów na swojej stronie. Aby uzyskać więcej informacji na ten temat, zapoznaj się z naszym przewodnikiem dotyczącym dodawania niestandardowych rozmiarów obrazów.

Bonus: Usuń domyślne rozmiary obrazów w WordPress

Prawdopodobnie zauważyłeś, że za każdym razem, gdy przesyłasz zdjęcie do WordPressa, automatycznie generuje on 3 jego kopie w 3 domyślnych rozmiarach obrazu, które właśnie widzieliśmy: miniatura, średnia i duża.

Może to być przydatne i pomóc zaoszczędzić czas. Jeśli jednak nie użyjesz niektórych z tych rozmiarów, obrazy zajmą tylko miejsce na serwerze. Szybkim rozwiązaniem jest usunięcie tych rozmiarów obrazów z witryny i uniknięcie generowania kopii obrazów.

Dobrą wiadomością jest to, że możesz to zrobić za pomocą prostego skryptu. Załóżmy na przykład, że chcesz usunąć średni rozmiar ze swojej witryny. Po prostu skopiuj i wklej następujący skrypt do pliku functions.php motywu potomnego.

 add_filter( 'intermediate_image_sizes_advanced', 'prefix_remove_default_images' ); 
// Spowoduje to usunięcie domyślnego średniego rozmiaru obrazu. 
function prefix_remove_default_images( $rozmiary) { 
unset( $rozmiary['średnie']); // 300px 
zwróć $rozmiary;
}

Aby usunąć inne rozmiary, dodaj kolejną linię z rozmiarem, który chcesz usunąć. Na przykład, jeśli chcesz również usunąć duży rozmiar, kod będzie wyglądał następująco:

 add_filter( 'intermediate_image_sizes_advanced', 'prefix_remove_default_images' ); 
// Spowoduje to usunięcie domyślnych średnich i dużych rozmiarów obrazu. 
function prefix_remove_default_images( $rozmiary) { 
unset( $rozmiary['średnie']); // 300px
unset( $rozmiary['duży']); // 1024px 
zwróć $rozmiary;
}

Otóż ​​to! W ten sposób możesz łatwo usunąć rozmiary obrazów. Aby uzyskać więcej informacji na ten temat, zapoznaj się z naszym samouczkiem krok po kroku.

Wniosek

Podsumowując, zdjęcia są niezbędne, jeśli chodzi o sprzedaż Twoich produktów. Artykuł z atrakcyjnym zdjęciem ma większe szanse na przyciągnięcie uwagi klientów i wygenerowanie sprzedaży w Twoim sklepie.

W tym przewodniku widzieliśmy 2 różne metody dodawania obrazu do produktu WooCommerce:

• Z pulpitu nawigacyjnego WooCommerce
• Programowo

Teraz który z nich jest dla Ciebie bardziej odpowiedni? Dodanie obrazu z pulpitu nawigacyjnego jest dość łatwe, więc jest to dobra opcja. Jeśli jednak masz umiejętności kodowania i potrzebujesz większej elastyczności, możesz również dodawać obrazy programowo. Pokazaliśmy Ci kilka skryptów, które pomogą Ci łatwo dodawać obrazy, polecane obrazy i galerie do Twoich produktów.

Na koniec zobaczyliśmy również, jak dodawać obrazy o niestandardowych rozmiarach i usuwać domyślne rozmiary obrazów z witryny, aby dostosować witrynę i uatrakcyjnić produkty. Aby uzyskać więcej informacji o tym, jak najlepiej wykorzystać strony produktów, zapoznaj się z naszym przewodnikiem dotyczącym dostosowywania strony produktu.

Czy dodałeś zdjęcia do swoich produktów? Jakiej metody użyłeś? Daj nam znać w sekcji komentarzy poniżej!

Aby uzyskać więcej samouczków dotyczących dostosowywania sklepu, zapoznaj się z następującymi postami:

• Jak dostosować stronę sklepu w WooCommerce?
• Poradnik: Jak programowo edytować stronę z podziękowaniami WooCommerce
• Kompletny przewodnik po optymalizacji realizacji transakcji