Jak dodać produkty powiązane z WooCommerce: 3 metody

Szukasz sposobów na poprawę konwersji produktów? Dodanie niestandardowej sekcji powiązanych produktów do Twojego sklepu internetowego może być świetnym sposobem na zachęcenie klientów do kupowania większej liczby Twoich produktów. Aby Ci w tym pomóc, przygotowaliśmy nasz przewodnik dotyczący dodawania produktów związanych z WooCommerce.

Wyświetlanie podobnych produktów może być świetnym sposobem na poprawę konwersji. Jeśli zaprezentujesz swoim klientom odpowiedni asortyment, z pewnością poprawi to Twoją sprzedaż. Ale zanim przejdziemy do tego procesu, przyjrzyjmy się w skrócie, dlaczego potrzebujesz sekcji powiązanych produktów.

Dlaczego warto korzystać z sekcji powiązanych produktów w WooCommerce?

Sprzedaż krzyżowa jest ważnym elementem poprawy współczynników konwersji. Zapewniając klientom możliwość zakupu podobnych produktów, możesz zachęcić ich do rozważenia zakupu większej liczby produktów w celu uzyskania wartości dodanej. Podobnie możesz również wykorzystać sprzedaż krzyżową, aby promować produkty, które są kupowane razem. Jeśli możesz dobrze śledzić swoje zakupy, zawsze możesz dodać określone produkty do listy sprzedaży krzyżowej, aby uzyskać większe zyski.

Sama ta metoda jest bardzo widoczna w dużych firmach internetowych. Na przykład na Amazon możesz zobaczyć ich sprzedaż krzyżową za pomocą sekcji oznaczonych „ Często kupowane razem” , „ Klienci też kupili” lub „ Produkty podobnej marki”.

Jeśli więc chcesz zwiększyć sprzedaż , zalecamy dodanie i dostosowanie sekcji produktów związanych z WooCommerce. Teraz, gdy masz już pojęcie o jego znaczeniu, zobaczmy, jak możemy dodać je do Twojej witryny eCommerce.

Jak dodać produkty powiązane z WooCommerce

Domyślnie WooCommerce pozwala dostosować trzy różne typy powiązanych produktów. Te opcje to:

• Up-Sells : produkty wyświetlane podczas przeglądania strony produktu.
• Sprzedaż krzyżowa : produkty wyświetlane podczas przeglądania strony koszyka.
• Produkty powiązane: produkty, które są wyświetlane automatycznie na stronie produktu na podstawie tagów i kategorii produktów.

Chociaż możesz ręcznie dodać produkty, które mają być wyświetlane w sprzedaży dodatkowej i sprzedaży krzyżowej dla każdego WooCommerce, możesz skonfigurować tylko powiązane sekcje produktów, odpowiednio ustawiając tagi i kategorie.

W sumie istnieją 3 główne sposoby dodawania powiązanych produktów w WooCommerce. Oni są:

• Z pulpitu nawigacyjnego WooCommerce
• Korzystanie z wtyczki
• Programowo

Uwaga: Upewnij się, że zainstalowałeś jeden z kompatybilnych motywów WooCommerce i poprawnie skonfigurujesz WooCommerce na swojej stronie internetowej, aby uniknąć niepotrzebnych problemów w procesie.

Skonfiguruj produkty powiązane z WooCommerece w panelu WooCommerce

Aby skonfigurować sprzedaż dodatkową i sprzedaż krzyżową dla konkretnego produktu, przejdź do Produkty > Wszystkie produkty z pulpitu administracyjnego WordPress. Następnie kliknij przycisk Edytuj przy dowolnym produkcie, dla którego chcesz dodać sprzedaż dodatkową i sprzedaż krzyżową.

Następnie przewiń w dół iw sekcji Dane produktu kliknij Połączone produkty. Teraz przejdź dalej i wymień wszystkie produkty, które chcesz, aby były wyświetlane jako produkty powiązane z konkretnym produktem. Mogą obejmować zarówno up-sell, jak i cross-sell.

Na koniec zaktualizuj produkt.

Gdy wyświetlisz podgląd konkretnego produktu w swojej witrynie, będziesz mógł zobaczyć połączone produkty w interfejsie witryny.

Podobnie, będziesz również mógł zobaczyć powiązane produkty związane ze sprzedażą krzyżową, gdy wyświetlisz podgląd strony koszyka.

Jednak produkty związane z WooCommerce różnią się znacznie od sekcji „ Możesz Ci się spodobać” , którą zapewniają sprzedaż krzyżowa i sprzedaż dodatkowa. Domyślnie WooCommerce losowo wybiera produkty do wyświetlenia w sekcjach „Możesz polubić” za pomocą tagów i kategorii. Ta opcja nie jest konfigurowalna przy użyciu domyślnych opcji WooCommerce.

Te powiązane produkty można dostosowywać tylko za pomocą wtyczek produktów powiązanych z WooCommerce lub programowo za pomocą haków WooCommerce.

W tym przewodniku omówimy dalej, jak wykonać oba z nich. Jeśli więc chcesz dowiedzieć się, jak bardziej dostosować swoje produkty związane z WooCommerce, zalecamy dalszą lekturę. Zacznijmy od metody wtyczki, ponieważ jest ona bardziej przyjazna dla początkujących.

Jak dodać produkty powiązane z WooCommerce za pomocą wtyczki?

Korzystanie z wtyczki to jeden z najłatwiejszych sposobów dodawania i dostosowywania powiązanych produktów. Te wtyczki są specjalnie zaprojektowane, aby pomóc Ci ręcznie wybrać produkty, które chcesz dodać do sekcji produktów powiązanych z WooCommerce.

W WordPressie dostępnych jest wiele wtyczek z różnymi funkcjami. Niektóre z nich pozwalają dodawać konfigurowalne, powiązane sekcje, które można dodać do dowolnej części witryny. Podczas gdy inne działają, zapewniając w pełni konfigurowalne, funkcjonalne suwaki i banery.

Oczywiście opcja wyboru wtyczki zależy od Ciebie. Ale w dzisiejszym demo użyjemy wtyczki Custom Related Products for WooCommerce autorstwa Scotta Nelle. Ta wtyczka działa w prosty sposób, umożliwiając określenie produktów do dodania dla produktów powiązanych z dowolnymi produktami, które chcesz.

Ale aby zacząć korzystać z wtyczki, musisz ją najpierw zainstalować i aktywować.

1. Zainstaluj i aktywuj wtyczkę

Otwórz pulpit administratora WP i kliknij Wtyczki> Dodaj nowy , aby rozpocząć. Następnie użyj paska wyszukiwania w prawym górnym rogu, aby wyszukać niestandardowe powiązane produkty dla WooCommerce . Następnie kliknij Zainstaluj teraz na karcie wtyczki, a następnie Aktywuj ją po zakończeniu instalacji. Teraz powinieneś zakończyć aktywację i instalację wtyczki.

Jeśli chcesz użyć wtyczki, której nie ma w repozytorium WordPressa, będziesz musiał zainstalować je ręcznie. Mamy szczegółowy przewodnik dotyczący ręcznej instalacji WordPressa, jeśli potrzebujesz więcej informacji na jego temat.

2. Dodaj powiązane produkty na stronie produktu

Sama wtyczka działa, umożliwiając dodanie sekcji powiązanych produktów do każdego konkretnego produktu. Możesz to zrobić, otwierając dowolny ze swoich produktów WooCommerce i określając go w Danych produktu. Jeśli nie dodasz produktów do sekcji produktów powiązanych, wtyczka powróci do domyślnego zachowania WooCommerce polegającego na losowym wybieraniu produktów powiązanych z WooCommerce za pomocą tagów.

Więc ponownie otwórz Produkty> Wszystkie produkty z pulpitu administracyjnego WP i kliknij Edytuj dla produktu, do którego chcesz dodać powiązane produkty. Jest to to samo, co poprzednie podejście z pulpitu nawigacyjnego WooCommerce.

Ponownie przewiń w dół pod Dane produktu i kliknij Połączone produkty . Teraz powinieneś zobaczyć nowe pole oznaczone Produkty powiązane . Teraz wszystko, co musisz zrobić, to ręcznie wpisać nazwy produktu, który chcesz dodać jako produkt powiązany z konkretnym produktem.

Zaktualizuj produkt, a będziesz mógł zobaczyć zmiany na swojej stronie produktu:

Programowe dodawanie produktów powiązanych z WooCommerce

Alternatywnie, jeśli nie chcesz używać wtyczki WooCommerce do zarządzania i dostosowywania produktów związanych z WooCommerce, możesz również dodać je za pomocą fragmentu kodu. W tym celu musisz dodać kilka linijek kodu do pliku functions.php twojego motywu. Jednak ta metoda może mieć zastosowanie tylko wtedy, gdy masz podstawową wiedzę na temat programowania.

Zalecamy utworzenie motywu podrzędnego i utworzenie kopii zapasowej witryny WordPress, aby to zrobić. Dzięki temu Twoje zmiany zostaną zapisane, nawet jeśli zaktualizujesz motyw WordPress. Jeśli potrzebujesz pomocy, możesz nawet użyć jednej z najlepszych wtyczek motywów potomnych do WordPress, aby je utworzyć.

Po przejściu na motyw potomny możesz uzyskać dostęp do pliku functions.php, klikając Wygląd > Edytor motywów. Następnie kliknij opcję Funkcje motywu lub plik functions.php . Spowoduje to otwarcie pliku w edytorze motywów.

Następnie możesz użyć poniższego fragmentu kodu i wkleić go do edytora.

 add_filter( 'woocommerce_related_products', 'QuadLayers_related_products_by_same_title', 9999, 3 ); 

function QuadLayers_related_products_by_same_title( $related_posts, $product_id, $args ) {
$produkt = wc_get_product( $product_id );
$title = $produkt->get_name();
$related_posts = get_posts( array(
'post_type' => 'produkt',
'post_status' => 'opublikuj',
'tytuł' => $tytuł,
'pola' => 'id',
'posts_per_page' => -1,
'exclude' => array( $product_id ),
));
zwróć $related_posts;
} 

Fragment kodu polega po prostu na udostępnieniu powiązanych produktów o tym samym tytule. W ten sposób, jeśli masz identyczne produkty o tych samych nazwach, zostaną one dodane do sekcji produktów powiązanych z WooCommerce. Zaktualizuj plik functions.php, klikając opcję Aktualizuj plik i gotowe.

Kredyty dla oryginalnego autora kodu tutaj.

Jak usunąć produkty powiązane z WooCommerce?

Dodatkowo możesz również usunąć sekcję produktów powiązanych z WooCommerce ze swojej witryny, korzystając z tej samej metody, co powyżej. Możesz albo całkowicie usunąć wszystkie powiązane produkty, albo tylko dla określonych produktów.

1. Usuń wszystkie powiązane produkty

Aby usunąć wszystkie powiązane produkty z każdej strony produktu, po prostu otwórz plik functions.php motywu podrzędnego i wklej następujący fragment kodu.

 remove_action( 'woocommerce_after_single_product_summary', 'woocommerce_output_related_products', 20 ); 

Wreszcie. zaktualizować plik. Powinno to całkowicie usunąć sekcję powiązanych produktów ze wszystkich produktów WooCommerce.

Kredyty dla autora kodu tutaj.

2. Usuń powiązane produkty tylko dla określonych produktów

Możesz także użyć fragmentów kodu, aby w razie potrzeby usunąć sekcję powiązanych produktów tylko dla określonych produktów w Twojej witrynie. Poniższy kod po prostu doda opcję ukrycia go we wszystkich Twoich produktach.

Najpierw wklejmy to do pliku functions.php twojego motywu w ten sam sposób, jak poprzednio.

 add_action( 'woocommerce_product_options_general_product_data', 'QuadLayers_add_related_checkbox_products' );

function QuadLayers_add_related_checkbox_products() { 
woocommerce_wp_checkbox (tablica ( 
'id' => 'hide_related', 
'klasa' => '', 
'label' => 'Ukryj powiązane produkty'
) 
); 
}

// ------------------------------------------
// 2. Zapisz pole wyboru w polu niestandardowym

add_action( 'save_post_product', 'QuadLayers_save_related_checkbox_products' );

function QuadLayers_save_related_checkbox_products( $product_id ) {
globalna $pagenow, $typenow;
if ( 'post.php' !== $pagenow || 'produkt' !== $typenow ) return;
if ( define( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) return;
if ( isset( $_POST['hide_related'] ) ) {
update_post_meta( $product_id, 'hide_related', $_POST['hide_related'] );
} else delete_post_meta( $product_id, 'hide_related' );
}

// ------------------------------------------
// 3. Ukryj powiązane produkty @ strona pojedynczego produktu

add_action( 'woocommerce_after_single_product_summary', 'QuadLayers_hide_related_checkbox_products', 1 );

function QuadLayers_hide_related_checkbox_products() {
globalny produkt;
if ( ! empty ( get_post_meta( $product->get_id(), 'hide_related', true ) ) ) {
remove_action( 'woocommerce_after_single_product_summary', 'woocommerce_output_related_products', 20 );
}
} 

Następnie ponownie przejdź do Produkty > Wszystkie produkty z pulpitu WordPress i kliknij Edytuj dla produktu, w którym chcesz ukryć powiązane produkty. Kiedy przewijasz dane produktu, tak jak w poprzednich podejściach, kliknij kartę Ogólne .

Powinieneś zobaczyć nową opcję Ukryj powiązane produkty . Włącz tę opcję, aby ukryć powiązane produkty na określonej stronie produktu.

Podziękowania dla autora kodu tutaj.

Jak dostosować liczbę i kolumny powiązanych produktów?

Co więcej, możesz również dostosować sekcję powiązanych produktów, konfigurując liczbę wyświetlanych produktów , a także wiersze i kolumny w swojej witrynie.

W tym celu będziemy również używać haków WooCommerce i niestandardowych funkcji w naszym pliku functions.php . Śmiało i ponownie otwórz plik za pomocą edytora motywów i wklej ten fragment kodu:

 add_filter( 'woocommerce_output_related_products_args', 'QuadLayers_change_number_related_products', 9999 );

function QuadLayers_change_number_related_products( $args ) {
$args['posts_per_page'] = 4; // # powiązanych produktów
$args['kolumny'] = 4; // liczba kolumn w wierszu
return $args;
} 

Ten kod po prostu działa, konfigurując sekcję produktów związanych z WooCommerce w 4 kolumnach i 4 wierszach. Zawsze możesz zmienić tę wartość, używając $args['posts_per_page'] = 4 i $args['columns'] = 4.

Co więcej, możesz skonfigurować tę sekcję również za pomocą dodatkowych kodów CSS. Można ich użyć do zmiany układu i wyrównania kolumn i wierszy, aby sekcja lepiej pasowała do Twojej witryny. Możesz użyć do tego następującego fragmentu kodu CSS.

 @media (minimalna szerokość: 768px) {
.site-main .produkty powiązane ul.produkty li.produkt {
szerokość: 22%;
pływak: lewy;
margines prawy: 4%;
}

Po prostu wklej go pod dodatkowym kodem CSS w dostosowywaniu motywu . Możesz uzyskać do niego dostęp, klikając Wygląd> Dostosuj na pulpicie WordPress. Spowoduje to otwarcie dostosowania motywu.

Następnie kliknij zakładkę Dodatkowe CSS i wklej tutaj skrypt CSS. Możesz dostosować wyrównanie powiązanych produktów zgodnie z potrzebami Twojej witryny. Na koniec kliknij Opublikuj , gdy skończysz.

Podziękowania dla autora kodu tutaj.

Wniosek

I na tym kończy się nasz przewodnik po dodawaniu produktów związanych z WooCommerce. Jest to jeden z najlepszych sposobów na poprawę sprzedaży Twojej witryny eCommerce. Ale dzięki temu przewodnikowi powinieneś być w stanie je dodawać, dostosowywać, a nawet usuwać, jeśli chcesz.

Podsumowując, możesz dodać powiązane produkty w WooCommerce na 3 sposoby:

• Z pulpitu nawigacyjnego WooCommerce
• Korzystanie z wtyczki
• Programowo

Co więcej, zawarliśmy nawet kilka bardziej pomocnych kroków, aby dostosować te powiązane produkty. Obejmują one usuwanie ich ze stron produktów oraz modyfikację liczby powiązanych produktów i ich kolumn. Mamy nadzieję, że przydadzą się one również podczas dodawania powiązanych produktów. Możesz znaleźć jeszcze więcej informacji w naszym szczegółowym samouczku, aby dostosować produkty związane z WooCommerce.

Jeśli chcesz dowiedzieć się więcej o dostosowywaniu różnych innych sekcji i stron WooCommerce, rozważ zapoznanie się z innymi naszymi artykułami, takimi jak:

• Jak dodać obraz do produktu w WooCommerce
• Dostosuj komunikaty o błędach WooCommerce Checkout
• Jak dostosować szablony WooCommerce

Daj nam znać, czy udało Ci się dostosować i zarządzać sekcjami produktów związanych z WooCommerce, korzystając z naszego artykułu. Jeśli wystąpiły jakieś problemy, daj nam znać w sekcji komentarzy. Dołożymy wszelkich starań, aby pomóc Ci tak bardzo, jak tylko możemy.