Jak si vyrobit web s internetovým obchodem pomocí WordPress

Elektronický obchod je žhavý, protože je neuvěřitelně snadné vydělat 6 čísel měsíčně, aniž byste museli stavět cihly a malty s šíleně vysokými režijními náklady.


Problémem pro mnohé však jsou drahé měsíční poplatky většiny platforem elektronického obchodování, jako je Shopify. Pokud právě začínáte, chcete cenově dostupnější řešení, abyste mohli více utratit za věci, jako je marketing a reklama.

Dobrou zprávou je, že nemusíte platit vysoké měsíční poplatky za Shopify, abyste mohli prodávat produkty online. Pokud hledáte alternativu Shopify nebo alternativu eBay, tento krok za krokem tutoriál vám zanechá úžasný online obchod zdarma.

Vše, co potřebujete, je webhostingový účet a trochu úsilí a budete si moci vytvořit webové stránky elektronického obchodu v žádném okamžiku.


Začněme!

Věci, které potřebujete:

  • Hosting. Doporučuji SiteGround.
  • A doménové jméno.
  • WordPress Téma. Pro tento tutoriál používáme zdarma téma Astra.
  • WordPress Page Builder. K tomu používáme bezplatný tvůrce stránek Elementor.
  • WooCommerce, nejlepší e-commerce WordPress plugin.

Krok 1. Kupte si webhosting a doménové jméno.

Pokud jste novým v celé této činnosti v oblasti budování webových stránek, dovolte mi nejprve objasnit, co web hosting a název domény jsou a proč je potřebujete.

Co je to hosting a doménové jméno?

Webhosting je místo na internetu, kde bude váš web žít. Je to jako fyzický dům, kde najdete své věci. Na druhé straně název domény je adresa vašeho webu. Je to jako vaše adresa, kterou dáte lidem, aby vás mohli navštívit doma. „Facebook.com“, „Google.com“ a „WordPress.com“ jsou příklady doménových jmen.

Název domény si můžete zakoupit téměř na jakýchkoli webových stránkách prodávajících názvy domén. Musíte jen hledat nejlepší cenu. Ale pokud jde o hosting webových stránek, je naprosto důležité získat hosting pouze od spolehlivé společnosti. Protože pokud je váš hosting pomalý nebo nespolehlivý, vaše webová rychlost a provozuschopnost bude trpět a nakonec to poškodí vaše podnikání v oblasti elektronického obchodování..

Siteground, Moje preferovaná webhostingová služba

K vytvoření webové stránky elektronického obchodu můžete použít jakoukoli vysoce kvalitní webhostingovou službu, ale v tomto tutoriálu použijeme Siteground.

SiteGround je vysoce doporučený webhosting online, protože se starali o uživatele WordPress a přesto mají cenově dostupné ceny. Oni jsou nejvíce známí pro jejich rychlý výkon a stejně rychlou podporu.

Zde jsou klíčové vlastnosti SiteGround:

  • Certifikát SSL zdarma
  • FAST Znalostní podpora
  • Pracovní prostředí WordPress
  • Zdarma migrace webových stránek
  • 30 dní zálohování

SiteGround je solidní volbou pro vaše potřeby webhostingu. Zajišťují webové stránky WordPress a nabízejí méně zdrojů než jejich konkurenti, ale vyšší spolehlivost.

Udělal jsem s nimi úžasný obchod a poskytl 70% slevu každému, kdo se zaregistruje pomocí tento odkaz. Pokud tedy chcete na svém hostingu ušetřit peníze, klikněte na tento odkaz a zakupte si svůj hosting hned teď.

Po přistání na domovské stránce uvidíte čtyři různé typy hostingu:

zvolte plán lokality

Vyberte hosting WordPress a klikněte na Začít. Zobrazí se tři cenové plány:

siteground wordpress hosting ceny

Vyberte si podle svých potřeb a rozpočtu. Můžete se také podívat na jejich srovnání každého hostovacího plánu získat lepší představu o tom, který plán nejlépe vyhovuje vašim potřebám.

Jakmile se rozhodnete pro plán, klikněte Získejte plán. Budete přesměrováni na stránku, kde si budete muset vybrat doménu. Pokud jste si již doménové jméno zakoupili, vyberte možnost „Už mám doménu“. Pokud jej však nemáte, vyberte možnost „Registrovat novou doménu“ a doménu si zakupte přímo v rámci Siteground.

vyberte doménu

Jakmile máte název domény, který se vám líbí a je k dispozici, klikněte na Pokračovat. Dalším krokem je poskytnutí vašich osobních a fakturačních údajů k dokončení nákupu. Poskytněte své údaje přesně a klikněte Zaplať teď. Nyní máte spolehlivý webhosting a doménové jméno.

Krok dva. Nainstalujte WordPress.

WordPress je bezplatný nástroj s otevřeným zdrojovým kódem, který umožňuje vytvářet webové stránky, i když nemáte ponětí o kódování. Jedná se o nejjednodušší a nejvýkonnější systém správy obsahu webových stránek. Je tu spousta věcí, které se mi líbí o WordPressu, a pokud si přečtete více mých tutoriálů nebo si prohlédnete moje videa, zjistíte více o tom, proč si myslím, že WordPress je nejlepší nástroj pro vytváření webů pro netechnické.

Siteground ve skutečnosti přichází s instalací WordPress na jedno kliknutí, která dělá veškerou těžkou práci při instalaci a nastavení WordPress za vás.

Po dokončení hostování se zobrazí obrazovka s odkazem „Přejít do zákaznické oblasti“. Klikněte na to a dostanete se na stránku, kde si můžete nastavit nový hostingový účet. Pod Nastavte si svůj web, vybrat Spusťte nový web.

Zobrazí se seznam softwaru, který můžete nainstalovat. Vybrat WordPress.

nainstalovat wordpress

Poté budete muset pro nový web zadat přihlašovací údaje správce, jako je vaše e-mailová adresa, uživatelské jméno a heslo. Nezapomeňte tyto údaje zabezpečit, protože je budete používat k přihlášení na svůj web.

Po dokončení klikněte na Potvrdit > Kompletní nastavení. A nyní máte živý, hostovaný web WordPress.

Chcete-li začít přizpůsobovat svůj web, musíte se přihlásit k backendu WordPress. Chcete-li to provést, přejděte na hlavní panel Siteground a přepněte na Moje účty tab. Klikněte na ikonu Instalace kartu a zde uvidíte název domény, který jste zaregistrovali. Naproti je zelená Přejděte na administrátorský portál knoflík. Kliknutím na toto tlačítko přejdete na svou přihlašovací stránku WordPress.

přejděte na řídicí panel wordpress

Přihlašovací stránky WordPress mají obvykle tyto formáty: yourdomain.com/wp-admin a yourdomain.com/wp-login. Zapamatujte si adresu URL své přihlašovací stránky, abyste k ní mohli příště přistupovat přímým zadáním adresy URL do adresního řádku a aniž byste se museli přihlašovat do Siteground.

Přihlašovací stránka WordPress vypadá takto:

přihlašovací stránka wordpress

Sem zadejte své uživatelské jméno a heslo a přihlaste se na svůj web poprvé.

Krok 3. Nainstalujte Astra Theme a Astra Sites.

Téma Astra je téma, které budeme používat k tomu, aby náš web pro elektronický obchod vypadal skvěle a profesionálně co nejrychleji. Pokud chcete, můžete použít i jiná témata, ale pro tento tutoriál půjdeme s motivem Astra.

Astra je zdarma téma WordPress, které má vynikající rychlost a jednoduchost. Spárujte jej s Astra Sites (bezplatný plugin) a kdokoli může mít krásný web s několika kliknutími myši. K dispozici je také verze Pro, díky které je Astra perfektním tématem.

Zde jsou funkce, které se mi na Astra nejvíce líbí:

  • Jeden z nejrychlejších dostupných témat
  • Více než 100 startovacích webů (většina z nich je 100% zdarma)
  • Flexibilní funkce menu Mega
  • Výkonný doplňkový balíček
  • Rozsáhlá podpora WooCommerce

Téma Astra je vynikající volbou pro jakýkoli projekt webového designu WordPress. Ve skutečnosti je to téma, které používám na tomto webu a ve všech svých webových projektech.

Mám plnou důvěru v vývojáře a byl jsem ohromen tím, jak dobře je téma kódováno.

Ale více než to, že téma je tak snadné použití, protože veškeré péče a myšlení, které do něj šlo. Ve většině situací se konfiguruje na základě nástrojů, které používáte.

Chcete-li nainstalovat Astra, přejděte na Vzhled > Téma > Přidat nový. Vyhledejte Astra, klikněte na Nainstalujte, a aktivovat.

instalace motivu astra

Další věc, kterou Astra miluji, je skutečnost, že má plugin Webové stránky Astra Starter s knihovnou předem připravených bezplatných a prémiových šablon. Tyto šablony můžete použít pro svůj vlastní web několika kliknutími. Použijeme šablonu Astra Site, abychom zkrátili dobu vytváření webových stránek na polovinu.

Po instalaci Astra se tato zpráva zobrazí na hlavním panelu:

Astra weby začít

Klikněte na Začít. Tím se nainstalují startovací stránky Astra.

Výběr Tvůrce stránek

Potom se zeptáte, který tvůrce stránek dáváte přednost, a v tomto tutoriálu budu používat Elementor. Elementor je program pro tvorbu stránek WordPress, který přijal návrh webu WordPress bouří. Měl nejhlubší sadu funkcí, přesto se velmi snadno používá a ovládá. Elementor je nejoblíbenější bezplatný tvůrce stránek. K dispozici je také doplněk Pro pro přidání dalších funkcí pro vývojáře.

Klíčové vlastnosti elementu:

  • Live Front End Page Editor
  • Funkce přizpůsobení webových stránek
  • Knihovna šablon a bloků
  • Rozsáhlé možnosti mobilní reakce
  • Nejvýkonnější tvůrce vyskakovacích oken
  • PRO: Vytvoření vlastních záhlaví / zápatí
  • PRO: Vytvořte rozvržení typu příspěvku

Elementor je v současné době nejsilnějším tvůrcem stránek. Neustále vydávají nové funkce, které odpovídají současným trendům designu. To znamená, že budete moci udržovat svůj web relevantní. Pokud po cestě chcete přístup k pokročilým funkcím, můžete upgradovat na Elementor Pro, což je podle mého názoru neuvěřitelná hodnota s ohledem na všechny další moduly a výkonové funkce, které obsahuje.

Výběr motivu stránky Astra

Jakmile vyberete tvůrce stránek, budete přesměrováni do knihovny šablon Astra Sites. Existuje spousta krásných šablon, které můžete použít. Udělejte si čas na výběr šablony, kterou chcete. A tyto šablony jsou plně editovatelné pomocí zvoleného tvůrce stránek, což znamená, že budete moci přizpůsobit každou část a prvek webu, jako je nadpis, obrázky, barvy, logo atd..

V tomto tutoriálu budu používat šablonu vlastního tisku, protože vypadá úžasně a je velmi orientovaná na elektronický obchod.

Chcete-li nainstalovat motiv, stačí na něj kliknout a přejít do náhledu. Pokud se vám líbí, co vidíte, klikněte na ikonu Importovat motiv a ujistěte se, že jsou všechna políčka zaškrtnuta.

Pokud si to všimnete, je zde pole s nápisem „Instalovat požadované doplňky“. Zaškrtnutím tohoto políčka nainstalujete všechny požadované doplňky pro motiv, aby vypadal přesně tak, jak je. Pro téma Vlastní tisk nainstaluje prvky Elementor, WooCommerce a WPForms. To mi ušetří tolik času, protože už nebudu muset tyto pluginy instalovat jeden po druhém. Všechno je pro mě hotovo.

import motivu astra webu

Import motivu může chvíli trvat. Nezavírejte prohlížeč ani nezasahujte. Počkejte, a až bude hotovo, uvidíte modrou Zobrazit web knoflík. Kliknutím na toto tlačítko přejdete na svůj web, který má nyní téma, které jste právě importovali.

Krok 4. Přizpůsobte si svůj web.

Vaše webové stránky nyní vypadají úžasně, ale budete si chtít vytvořit svůj vlastní. První věc, kterou chcete udělat, je vybrat si paletu barev. Pokud již máte barvu značky, bude to snazší.

Výběr palety barev

Web má obvykle sadu 3 barev: základní, akcentní a populární. Primární barva je dominantní barva vašeho webu a s největší pravděpodobností barva vaší značky. Akcentová barva se obvykle používá u nadpisů nebo titulů, pokud chcete, aby vypadaly trochu jinak a přitahovaly oči směrem k nim. A konečně, popová barva by měla kontrastovat se zbývajícími barvami, aby se důležité prvky webové stránky odlišily, jako jsou tlačítka výzvy k akci.

Pro výběr palety barev webových stránek používám dva nástroje. První z nich je Coolors.co kde můžete procházet různé palety barev a vybrat, co chcete na svém webu použít.

coolors homepage

Pokud vidíte paletu, která se vám líbí, umístěte na ni kurzor myši a klikněte Pohled, a budete přesměrováni do nového okna, kde uvidíte hexadecimální kódy každé barvy.

barevná paleta s hex kódem

Tyto hexadecimální kódy jsou to, co potřebujete k použití těchto barev na svém webu. Později vám ukážu, jak používat tyto hexadecimální kódy na backendu WordPress.

Dalším skvělým nástrojem je Colorzilla, rozšíření Google Chrome, které vám umožní získat hexadecimální kód jakékoli barvy, kterou vidíte na jakémkoli webu, takže ji můžete použít samostatně. Pokud chcete získat rozšíření Colorzilla, klikněte zde. Poté klikněte na Přidat do Chromu.

colorzilla

Může to chvíli trvat, ale jakmile je hotovo, na panelu nástrojů se zobrazí tato ikona:

ikona colorzilla

Pokud tedy na libovolném webu uvidíte barvu, kterou chcete použít na svém vlastním webu, stačí kliknout na tuto ikonu a kliknout na barvu, kterou chcete zkopírovat. Hexový kód bude poté automaticky zkopírován, který můžete vložit na pozadí vašeho webu. Je to tak snadné. Jedná se o užitečný nástroj, který vám umožní používat skvělé barvy na jedno kliknutí.

Přizpůsobení typografie

Chcete také, aby vaše webové stránky vynikly, také chcete použít vlastní typografii. Webové stránky mají obvykle 2-3 písma. Budete mít písmo pro titulky nebo nabídku, písmo pro tělo a další „popové písmo“. Stejně jako barvy nelze použít pouze žádné písmo. Musíte se ujistit, že spolu vypadají dobře a odeslat správnou zprávu o vaší značce.

Rád používám Fontpair.co což je web, který vám ukáže, jak spolu vypadají dvě různá písma.

pomocí fontpairs.co

Pokud vidíte něco, co se vám líbí, poznamenejte si, co se nazývá, takže můžete přejít na WordPress a přidat je přímo tam.

Také rád používám WhatFont, rozšíření Google Chrome, které vám řekne, jaké písmo se používá na jakémkoli webu. Chcete-li nainstalovat WhatFont, klikněte zde potom klikněte na Přidat do Chromu. Na panelu nástrojů se pak zobrazí tato ikona:

ikona Whatfont

Pokud chcete znát název písma, stačí kliknout na tuto ikonu a umístit kurzor myši na text. WhatFont vám řekne název tohoto písma a pokud na něj kliknete, uvidíte také velikost písma, barvu, rodinu, styl, váhu a další.

pomocí Whatfont

Získání loga

Také byste potřebovali logo značky, abyste svůj web od sebe oddělili a vytvořili identitu vaší značky. Existuje řada způsobů, jak získat logo. Můžete to zkusit sami pomocí úžasného nástroje pro návrh s názvem Canva. Je to docela populární, protože dělá návrhování opravdu snadným i pro začátečníky.

Canva přichází se spoustou šablon loga, které můžete upravit tak, aby byly vaše vlastní. Nezapomeňte však, že pokud chcete exportovat logo s průhledným pozadím, budete muset upgradovat na Pro (který má měsíční zkušební verzi zdarma). Vždy můžete jít do Photoshopu nebo Fotopea odstranit pozadí, ale to jen přidá jeden další krok k procesu.

loga canva

Pokud chcete ušetřit čas, můžete si najmout nezávislého designéra loga, aby to udělal za vás. Můžete vyzkoušet weby, jako je Fiverr.com nebo 99design, ale při výběru interpreta musíte být opatrní na základě jejich stylu, záznamů, recenzí, hodnocení a dalších..

Přizpůsobení vašeho webu

Nyní je čas tyto barvy, písma a loga na svém webu použít. Pokud jste v backendovém panelu WordPress, přejděte na Vzhled > Přizpůsobte otevřete přizpůsobovač motivu.

přizpůsobit téma

Pokud jste na rozhraní svého webu a je nahoře černý pruh, můžete kliknout Přizpůsobte otevřete přizpůsobovač.

přizpůsobit téma

Takto vypadá personalizátor motivu:

přizpůsobitel motivu

Zde můžete nahrát své logo, změnit barvy a typografii stránek, přizpůsobit tlačítka a mnoho dalšího. Změny, které zde provedete, se na vašem webu zobrazují v reálném čase, takže můžete okamžitě vidět, jak to vypadá. Každé téma má také různé možnosti přizpůsobení, takže pokud používáte jiné téma než Astra, můžete zde vidět různé možnosti.

V aplikaci Astra můžete změnit barvy svých stránek Barvy a pozadí. Budete mít možnost změnit základní barvy, strouhanku, barvy záhlaví a zápatí.

editor barev pozadí

Základní barvy jsou barva, odkaz, text a barva přechodu na odkaz vašeho webu. Chcete-li například změnit barvu motivu, klikněte na Vyberte možnost Barva. Uvidíte dva způsoby, jak vybrat barvu. Nejprve můžete do pole vložit hexadecimální kód. Takže pokud jste našli barvu v Coolors.co nebo na jiných místech, můžete sem vložit hexadecimální kód. Můžete také vybrat barvu v integrovaném nástroji pro výběr.

základní barevný editor

Chcete-li změnit typografii svého webu, přejděte zpět do hlavní nabídky nástroje pro přizpůsobení a klikněte na Typografie. Budete moci změnit typografii základny, strouhanku, obsah a blog.

přizpůsobovač typografie

Další je přidání vašeho loga. Chcete-li nahrát své logo, přejděte na Rozložení > Záhlaví > Identita stránek. V části Logo klikněte na ikonu Změnit Logo a nahrajte své logo.

nahrát logo

Astra také umožňuje upravit šířku vašeho loga, takže můžete změnit, jak velký nebo malý chcete, aby se objevil. Pokud přejdete dolů, budete také moci změnit název svého webu, přidat popisek webu a ikonu webu nebo favicon.

V oblasti přizpůsobení Astra můžete udělat mnohem více, jako je změna šířky obsahu webu, změna struktury příspěvků na blogu, přizpůsobení zápatí a záhlaví a další. Prozkoumejte své možnosti a zjistěte, co se vám na vašem webu líbí.

Jakmile přizpůsobení provedete, nezapomeňte kliknout Publikovat aby vaše změny byly zveřejněny na vašem webu.

Krok 5. Přizpůsobení webu pomocí Elementoru.

V tomto okamžiku máte základní úpravy přizpůsobení, jako je změna barvy webu, typografie, přidání loga a všech těchto věcí. Nyní je čas se pustit do podrobností o drsných a drsných vlastnostech a začít používat Elementor (nebo libovolného tvůrce stránek, který upřednostňujete) a zcela změnit vzhled webu.

Jak jsem již zmínil, v tomto tutoriálu budu používat Elementor, protože si myslím, že je to nejlepší, ale můžete použít libovolného tvůrce stránek, se kterým jste spokojeni.

Uvnitř Elementoru můžete se svým webem dělat téměř cokoli, aniž byste kódovali nebo najímali webového vývojáře. Přidávání prvků je jednoduchý proces přetahování.

Existují dva způsoby, jak upravit stránku pomocí Elementoru. Nejprve, pokud jste v backendu WordPress, klikněte Stránky a měli byste vidět seznam všech stránek vašeho webu, včetně těch, které byly automaticky vytvořeny pomocí šablony Astra Site. Stránky, které byly vytvořeny s konkrétním tvůrcem stránek (např. Elementor), budou takto označeny:

stránky

Chcete-li upravit stránku pomocí nástroje pro tvorbu stránek, umístěte na ni kurzor myši a klikněte Upravit pomocí (tvůrce stránek). V mém případě to bude Upravit pomocí Elementoru.

editovat pomocí elementoru

Jakmile na to kliknete, dostanete se dovnitř Elementoru.

Jiným způsobem je, pokud jste na rozhraní vašeho webu, přejděte na stránku, kterou chcete upravit, a klikněte na Upravit pomocí elementu na černém pruhu nahoře:

editovat pomocí elementoru

Jeden z nich vás dostane do Elementoru. Jakmile jste uvnitř Elementoru, budete moci používat různé obrázky pro svůj nadpis, měnit texty, měnit ikony a další. Můžete začít změnou textů a obrázků v záhlaví tak, aby vyhovovaly vašemu podnikání. Zde je několik věcí, které můžete dělat s texty uvnitř Elementoru:

editace textů v elementu

Jak vidíte, můžete změnit text přímo v oblasti úpravy obsahu, změnit velikost, hmotnost, barvu a typografickou rodinu. Můžete také přidat animace, jako jsou jednoduché mizení, přibližování a další. Zde můžete udělat spoustu věcí, abyste na svůj web přidali koření.

Také byste chtěli změnit obrázky svého webu tak, aby odpovídaly povaze vaší firmy. Změna obrázků na prvku Elementor je velmi snadná. Stačí kliknout na obrázek a možnosti se objeví na levém postranním panelu. Můžete nahrát nový obrázek, změnit jeho velikost, přidat ohraničení nebo stín, přidat animaci a další.

editace obrázků v elementu

Uvnitř Elementoru můžete také měnit texty tlačítek, přizpůsobovat oblast ohlasů, přidávat další prvky / bloky jako texty, obrázky, tlačítka, videa a další.

Elementor Pro přichází s mnohem více funkcemi, jako je schopnost přidávat formuláře (což obvykle vyžaduje plugin třetích stran), schopnost nahrávat vlastní písma, přidávat posuvníky, přidávat tabulky cen a ceníky, přizpůsobovat záhlaví a zápatí ( což je mimo většinu tvůrců stránek) a mnohem více.

Pokud si chcete koupit Elementor Pro a zároveň získat bezplatný přístup k mým kurzům Elementor Pro, klikněte sem na tento odkaz.

Krok 5. Nastavte WooCommerce.

Nyní je čas nastavit WooCommerce, což je plugin WordPress, který z libovolného webu změní internetový obchod. Umožňuje přidávat produkty, přijímat platby online, vytvářet kupóny, nastavovat poštovné a daně a ještě mnohem více.

WooCommerce byl pro mě již nainstalován motivem Custom Print Astra Site, takže teď musím jít dovnitř a nastavit ho. Pokud ještě nemáte nainstalovaný WooCommerce, jděte na Pluginy > Přidat nový a hledat WooCommerce.

První věc, kterou musíme udělat, je jít WooCommerce > Nastavení. Uvidíte 7 karet: Obecné, Produkty, Doprava, Platby, Účty a ochrana osobních údajů, E-maily a Pokročilé.

Pojďme se nejprve podívat na Všeobecné tab. Na této kartě budete moci nastavit adresu svého obchodu, ve kterých zemích budete prodávat a dodávat, a povolit sazby daně.

obecné nastavení woocommerce

Pokud přejdete dolů, zobrazí se také možnosti povolení kuponů a přizpůsobení způsobu zobrazování cen na vašem webu včetně měny, kde se bude zobrazovat atd..

Další je produkty kartu, kde můžete nastavit možnosti související s produktem. Můžete nastavit, která stránka bude vaše stránka v obchodě, co se stane, když návštěvníci přidají produkt do košíku, nastavit rozměry produktu, povolit a nakonfigurovat recenze zákazníků a povolit hodnocení hvězd.

nastavení produktu woocommerce

V horní části této části máte také možnosti pro Inventář a Produkty ke stažení. Pokud v části Zásoby zaškrtnete políčko vedle Povolit správu zásob, zobrazí se vám seznam možností, které vám pomohou spravovat inventář. Můžete například nastavit nízkou prahovou hodnotu inventáře, takže když vaše zásoby dosáhne tohoto čísla, obdržíte oznámení. Můžete se také rozhodnout skrýt položky ze svého webu.

woocommerce nastavení inventáře

jako pro Produkty ke stažení Tato část je relevantní pouze v případě, že na svém webu prodáváte obsah ke stažení, takže pokud prodáváte čistě fyzické produkty, můžete tento přeskočit. Než si budete moci stáhnout své produkty, budete mít možnost požadovat, aby se kupující přihlásili. Přístup ke stažení můžete také poskytnout po zaplacení.

možnosti produktu ke stažení

Další karta je Lodní doprava. To platí pouze v případě, že prodáváte fyzické produkty, které budou odeslány kupujícím. Uvnitř této karty jsou tři pododdíly: Přepravní zóny, možnosti přepravy a třídy přepravy.

V přepravních zónách budete muset přidat přepravní zóny a těmto zónám přiřadit dostupné způsoby dopravy. Pokud přepravujete do několika zemí, bude to chvíli trvat.

přepravní zóny

Pokud potřebujete další pomoc s přepravními zónami, můžete se podívat na přepravní zónu WooCommerce dokumentace.

Další je Možnosti dopravy sekce. V této části můžete určit, jak se budou sazby za přepravu zobrazovat na vašem webu, a nastavit výchozí nebo požadované místo určení.

možnosti dopravy

Poslední část v sekci Přeprava je Přepravní třídy. S třídami přepravy můžete skupině produktů, například těžším produktům, které vyžadují více poštovného, ​​přiřadit různé přepravní sazby.

přepravní třídy

Chcete-li nastavit sazby za přepravu, přejděte na Přepravní zóny a vytvořit nebo upravit existující způsob dopravy, jako je „paušální sazba“.

přidat náklady na dopravu

Jakmile kliknete Upravit, objeví se vyskakovací okno. Zde budete moci přidat paušální sazbu za přepravu a dodatečné náklady za přepravní třídu, kterou jste právě vytvořili.

náklady na dopravu třídy přepravy

Pokud potřebujete další pomoc s konfigurací nastavení přepravy, můžete se podívat na WooCommerce dokumentace k přepravě.

Nyní pojďme dál Platby. Na této kartě budete moci povolit nebo zakázat platební brány, jako je PayPal, přímý bankovní převod, dobírka a další. Jakmile metodu povolíte, klikněte na Založit propojit účty a začít přijímat platby.

platební metody

Pokud chcete být schopni přijímat platby Stripe, můžete nainstalovat plugin nazvaný Platební brána WooCommerce Stripe. Jen jdi na Pluginy > Přidat nový a vyhledejte plugin. Instalace a aktivace tohoto pluginu povolí Stripe způsob platby ve WooCommerce, ale musíte jít do WooCommerce > Nastavení > Platby nastavit.

V Účty a soukromí na kartě, budete moci konfigurovat nastavení související s vytvořením účtu a ochranou soukromí uživatelů. Můžete se rozhodnout povolit hostům nákup bez vytvoření účtu, nastavit stránku ochrany osobních údajů a stránky zásad a zvolit, jak dlouho budou uživatelská data uchována.

účty a soukromí

Další je E-maily karta, kde uvidíte seznam e-mailů, které WooCommerce automaticky odesílá na základě určitých podmínek. Například e-mail může být zaslán na e-mailovou adresu podle vašeho výběru, kdykoli je provedena nová objednávka. Můžete si také prohlédnout e-maily s aktualizacemi objednávek zákazníků, jako jsou vrácené nebo dokončené objednávky.

e-mailová oznámení

Konečně, Pokročilý karta, která nahradila kartu API, umožňuje konfigurovat další technické podrobnosti, jako je nastavení stránky, kde můžete říct společnosti WooCommerce, která stránka bude fungovat jako stránka vašeho košíku nebo stránka pokladny..

woocommerce nastavení stránky

Pokud přejdete dolů, budete moci upravit to, co WooCommerce volá jako koncové body, které jsou přílohami adresy URL, což jim umožňuje zobrazit jiný obsah bez nutnosti nové stránky.

Krok 6. Přidejte produkty.

Jakmile dokončíte základní nastavení WooCommerce, nyní je čas přidat produkty. Téma Astra Site, které jsme použili v tomto tutoriálu, již přichází s ukázkovými produkty a takto vypadá stránka produktu na frontendu:

stránka produktu

Podívejme se nyní na to, jak to můžeme změnit, a přidejte vlastní produkty na pozadí.

Chcete-li přidat nový produkt nebo upravit existující produkt, stačí kliknout na možnost nabídky produkty na levém postranním panelu na hlavním panelu WordPress. Zobrazí se seznam všech produktů, které máte. Pokud jste na frontě produktové stránky, můžete také kliknout Upravit produkt na černém pruhu v horní části stránky. Tím se dostanete přímo do editoru produktu.

editor produktů

Zde můžete změnit název produktu a popis produktu. Pokud přejdete dolů, zobrazí se část nazvaná Údaje o produktu. Zde trávíte většinu času. Zde můžete vybrat typ produktu a odtud můžete konfigurovat další nastavení produktu.

WooCommerce vám umožňuje přidávat tyto typy produktů:

  • Fyzické, ke stažení, virtuální. Virtuální produkt nemusí být nutně stažen. Příkladem je schůzka nebo individuální tréninková relace.
  • Jednoduchý produkt. Toto je produkt s jednou položkou.
  • Seskupený produkt. Jedná se o svazek různých produktů.
  • Externí produkt. Produkty zakoupené mimo váš web jako přidružený odkaz.
  • Variabilní produkt. Variabilní produkt má variace jako barvy a velikosti.
typy produktů

Kdykoli vytvoříte nový produkt, prvním krokem je výběr jeho typu. Každý typ přichází s jinou sadou možností. Například produkt ke stažení bude mít tyto možnosti:

možnosti produktu ke stažení

Na levé straně této sekce se zobrazí další možnosti pro inventář, přepravu, související produkty a další.

v Inventář, budete moci přidat SKU, zadat konkrétní počet zásob pro tento konkrétní produkt, nastavit stav zásob a další.

v Lodní doprava, můžete zadat hmotnost a rozměry produktu a také přiřadit přepravní třídu, kterou jsme vytvořili v předchozím kroku.

doprava v údajích o produktu

v Propojené produkty, můžete k produktu přiřadit položku upell a cross-sell item. Rozšíření je produkt, který doporučujete místo aktuálního produktu, protože má vyšší cenu. Křížové výprodeje jsou produkty, které v košíku doporučíte na základě aktuálního produktu. Chcete-li přidat upell nebo cross-sell, zadejte název produktu do příslušných polí.

související produkty

Do svých produktů můžete také přidat atributy Atributy sekce. Může to být velikost, barva, hmotnost atd. Pokud vytváříte variabilní produkt, musíte sem přidat atribut. Pokud se chcete dozvědět více o tom, jak vytvořit variabilní produkt, podívejte se Průvodce WooCommerce zde.

Pokud posunete dolů Údaje o produktu zobrazí se oblast, do které můžete přidat krátký popis produktu. Tento popis se objeví vedle vašeho produktu a bude blízko ceny. Udržujte to krátké a sladké. Obrázek produktu můžete přidat na pravou stranu. Pokud máte více obrázků produktů, můžete je přidat do Galerie produktů sekce.

krátký popis a obrázek produktu

Je také důležité nastavit viditelnost katalogu, která se nachází v horní části stránky pod Publikovat. V některých případech můžete chtít skrýt určité produkty, protože je možná nabízíte jako křížový prodej s exkluzivní slevou. To je místo, kde to můžete udělat.

viditelnost katalogu

Až budete hotovi se vším, klikněte zde Aktualizace pro uložení všech vašich změn.

Pokud se chcete dozvědět více o různých typech produktů a o tom, jak je můžete správně vytvořit, toto Průvodce WooCommerce je skvělé místo, kde začít. Na své webové stránky přidávejte další produkty přesně podle stejných kroků, jaké jsem vám zde ukázal, dokud si nevytvoříte seznamy produktů.

Krok 7. Přizpůsobte si pokladny.

WooCommerce je skvělý plugin, jak jste dosud viděli, ale běžnou stížností proti němu je nedostatek možností pokladny. Nebudete moci změnit vzhled stránek pokladny a nemůžete s tím vytvořit prodejní cestu. Prodejní trychtýř je skvělý způsob, jak zvýšit kupní hodnotu zákazníka, takže pokud jej na svém webu nemáte, opravdu necháváte peníze na stole.

Pokud chcete vytvořit prodejní cestu pro váš web elektronického obchodu, nejlepší plugin, který vám může pomoci, je CartFlows. Jedná se o plugin WordPress pro vývojáře cest, který vám umožní vytvářet krásné a vysoce efektivní cesty přímo uvnitř WordPress.

toky

Pokud se chcete dozvědět více o tom, jak vytvořit prodejní cestu pomocí CartFlows, můžete se podívat na tento tutoriál, který jsem vytvořil.

Krok 8. Zůstaňte na vrcholu opuštění košíku.

Než tento výukový program ukončím, dovolte mi ještě jednu věc o opuštění košíku. V elektronickém obchodování je skutečností, že mnoho zákazníků opustí své vozíky bez dokončení nákupu.

Může to být z mnoha důvodů. Mohli být rozptýleni, síla nebo spojení vyšly, vyšlo něco naléhavého. Ať už je to cokoli, mnoho z těchto opuštěných vozů je ztraceno, pokud s tím nic neuděláte.

Naštěstí se jmenuje plugin Obnova opuštění košíku WooCommerce plugin, který sleduje a automaticky odesílá následné e-maily zákazníkům s opuštěnými vozíky – vše ZDARMA!

Pokud jste použili téma Astra Site, které jsem zde použil, tento plugin by pro vás již byl nainstalován. Ale pokud ne, můžete si jej nainstalovat na Pluginy > Přidat nový a vyhledejte plugin.

V rámci WooCommerce vytvoří novou možnost nazvanou Opuštění košíku. Pokud na toto kliknete, zobrazí se vám přehled toho, kolik máte opuštěných vozů, kolik jich bylo získáno a kolik jich bylo ztraceno.

návratnost objednávek opuštění košíku

Budete si také moci přizpůsobit následné e-maily, které WooCommerce posílá, přepnutím na Následné e-maily , umístěte kurzor myši na e-mail, který chcete upravit, a klikněte Upravit.

následné e-maily

Poté budete přesměrováni do editoru e-mailu:

přizpůsobení následných e-mailů

Zabalení

Vytvoření e-commerce webové stránky WordPress se může zdát komplikované a ohromující, ale doufám, že jsem na něj vrhl světlo a ukázal jsem, jak to všechno zvládnete sami s malou pomocí. Jsem potěšen, když slyším vaše úspěšné příběhy. Pokud potřebujete pomoc, můžete se na mě obrátit v sekci komentářů níže.

SiteGround

SiteGround je vysoce doporučený webhosting online, protože se starali o uživatele WordPress a přesto mají cenově dostupné ceny. Oni jsou nejvíce známí pro jejich rychlý výkon a stejně rychlou podporu.

Klíčové funkce SiteGround:

  • Certifikát SSL zdarma
  • FAST Znalostní podpora
  • WordPress Staging Enviroment
  • Zdarma migrace webových stránek
  • Denní zálohy

SiteGround je solidní volbou pro vaše potřeby webhostingu. Zajišťují webové stránky WordPress a nabízejí méně zdrojů než jejich konkurenti, ale vyšší spolehlivost.

Podívejte se na SiteGround

Téma Astra

Astra je zdarma téma WordPress, které je zaměřeno na rychlost. Volitelně si můžete zakoupit verzi Pro za 59 USD, která přidává některá další nastavení a možnosti.

Klíčové vlastnosti motivu Astra:

  • Ne téma půstu, ale není to slyšet
  • Spousta bezplatných demo stránek
  • Flexibilní funkce menu Mega
  • Možnosti vlastních rozvržení
  • Podpora WooCommerce
  • Podpora LearnDash

Téma Astra je spravedlivou volbou pro jakýkoli projekt webového designu WordPress. Předpokládám, že největší otázkou je, zda v dnešní době potřebujete dokonce zakoupit téma, protože tvůrci stránek dělají všechny stejné věci, jako byste potřebovali. Například prvek Elementor má bezplatný motiv Hello, díky kterému může tvůrce stránek dělat veškerou práci.

Stále existuje několik dobrých důvodů pro zakoupení profilového motivu, ale pro většinu lidí bude s volným motivem pravděpodobně dobré.

Myslím si však, že Astra Theme nesledovala aktuální trendy a už to nedoporučuji.

K dispozici jsou mnohem lepší moderní témata, která nabízejí vestavěné nástroje pro tvorbu záhlaví a zápatí, přičemž jsou omezena na 3 rozvržení a flexibilnější rozvržení stránek a příspěvků.

Podívejte se na motiv Astra

Elementor

Elementor je program pro tvorbu stránek WordPress, který přijal návrh webu WordPress bouří. Má nejhlubší sadu funkcí, přesto se velmi snadno používá a ovládá. Elementor je nejoblíbenější bezplatný tvůrce stránek. K dispozici je také doplněk Pro pro přidání dalších funkcí pro vývojáře.

Klíčové vlastnosti elementu:

  • Live Front End Page Editor
  • Funkce personifikace webových stránek
  • Knihovna šablon a bloků
  • Rozsáhlé možnosti mobilní reakce
  • Nejvýkonnější tvůrce vyskakovacích oken
  • PRO Vytvořte vlastní záhlaví / zápatí
  • PRO Vytvořit rozvržení typu příspěvku

Elementor je v současné době nejsilnějším tvůrcem stránek. Neustále vydávají nové funkce, které odpovídají současným trendům designu. To znamená, že budete moci udržovat svůj web relevantní.

Elementor Pro je neuvěřitelná hodnota s ohledem na všechny další moduly a výkonové funkce, které obsahuje.

Kdybych dnes zahajoval nový webový projekt, Elementor by byl tvůrcem stránek, který bych si vybral. Považuji to za nutné mít tvůrce stránek WordPress, který je pro nás potěšením.

Podívejte se na Elementora

CartFlow

CartFlows je tvůrce prodejních cest pro WordPress. To vám umožní rychle a snadno vytvářet prodejní cesty pomocí zvoleného tvůrce stránek.

Klíčové vlastnosti CartFlows:

  • Profesionálně navržené šablony
  • 5 Lokalizační hrboly
  • One Click Upsells
  • Použijte Tvůj preferovaný tvůrce stránek
  • Rozšiřitelné na rozdíl od zúžení kliknutí
  • Odpočítávací měřiče a testování Split

Pokud chcete, aby tvůrce prodejních cest pro WordPress byl v pořádku s hostováním sebe sama nebo s použitím spravovaného hostování WordPress, pak CartFlows je skvělá volba, protože je super snadné použití, ale velmi výkonný.

Podívejte se na CartFlows

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map