Jak sprawić, by obraz produktu WooCommerce przełączył się po najechaniu myszką

Możesz zastosować efekt najechania na zdjęcia produktów, aby Twój sklep internetowy był bardziej atrakcyjny i dynamiczny. Animacja pojawiająca się, gdy wskaźnik myszy przesuwa się nad obrazem, nazywana jest efektem najechania. Możesz na przykład zmienić obraz, powiększyć, przyciemnić lub przesunąć go na bok.

Korzyści z efektów najechania obrazem produktu dla Twojego sklepu WooCommerce

Efekt najechania może pomóc w wyróżnieniu różnych części produktów, takich jak odmiany, szczegóły lub funkcje. Może także wyróżnić Twój sklep na tle konkurencji i zachwycić klientów. Co najważniejsze, czyniąc Twoje produkty bardziej kuszącymi i wciągającymi, możesz zwiększyć sprzedaż i konwersje.

W tym poście na blogu nauczę Cię, jak używać motywu Flatsome do modyfikowania obrazu produktu WooCommerce po najechaniu myszką. Flatsome to popularny i elastyczny motyw WooCommerce, który ma mnóstwo funkcjonalności i możliwości dostosowywania. Jedną z nich jest możliwość szybkiego zastosowania różnych efektów najechania na zdjęcia produktów.

Jak dodać efekt zamiany obrazu do swoich produktów WooCommerce

Aby zmienić obraz tego samego produktu na WooCommerce, przejdź do panelu WordPress.

Przejdź do Produkty > Dodaj nowy, jeśli chcesz dodać nowy produkt, lub Produkty > Wszystkie produkty > Edytuj, jeśli chcesz edytować konkretny produkt.

W tym samouczku zobaczymy, jak dodać nowy produkt i dodać do niego wiele zdjęć za pośrednictwem galerii obrazów, aby po najechaniu kursorem produkty zmieniły się na inny obraz za pomocą motywu Flatsome.

Aby rozpocząć, przejdźmy do pulpitu nawigacyjnego i przejdź do Produkty > Dodaj nowy . Wstaw tytuł produktu, zdjęcie produktu, produkt, opis, zdjęcia z galerii, cenę i krótki opis produktu.

Po kliknięciu Dodaj zdjęcia z galerii produktów możesz dodać dowolną liczbę zdjęć związanych z danym produktem. Jest to opcja, która umożliwia zamianę różnych obrazów tego samego produktu po najechaniu na niego kursorem.

Kiedy skończysz, kliknij Opublikuj lub Aktualizuj.

Przejdź do swojej witryny i najedź kursorem na właśnie dodany obraz.

Zauważysz, że możesz zamienić się na inny obraz tego samego obrazu, gdy najedziesz na niego kursorem.

Korzystanie z motywu Fatsome daje nam również możliwość dodania innych zaawansowanych efektów najechania na nasze obrazy.

Przejdź do Wygląd > Dostosuj > WooCommerce > Katalog produktów > Obrazy produktów. Tutaj możesz wybrać rozmiar i proporcje zdjęć produktów, a także efekt najechania, który chcesz zastosować. Dostępnych jest kilka opcji, takich jak Zamiana, Powiększ, Zanikanie, Przesuwanie, Rozmycie i Skala szarości (po najechaniu kursorem zmienia obraz na czarno-biały). Możesz także dostosować prędkość i kierunek animacji.

Zapisz zmiany i wyświetl podgląd swojego sklepu. Powinieneś zobaczyć efekt najechania na zdjęciach produktów.

Wniosek

To wszystko! Korzystając z motywu Flatsome , pomyślnie zaktualizowałeś zdjęcie produktu WooCommerce po najechaniu myszką. Możesz bawić się różnymi efektami i ustawieniami, aby odkryć to, które najlepiej pasuje do Twojego sklepu i produktów.

Mam nadzieję, że ten wpis na blogu był dla Ciebie przydatny.