Com fer un lloc web de comerç electrònic en línia amb WordPress

El comerç electrònic està en calent perquè fa molt fàcil guanyar 6 xifres al mes sense haver de fer negoci de maó i morter amb costos generals elevats..


Però el problema és per a molts els costosos honoraris mensuals de la majoria de plataformes de comerç electrònic com Shopify. Si acabeu de començar, voleu tenir una solució més assequible perquè pugueu gastar més coses en mercats i publicitat.

La bona notícia és que no heu de pagar altes taxes mensuals amb Shopify per poder vendre productes en línia. Si busqueu una alternativa de Shopify o una alternativa eBay, aquest tutorial pas a pas us deixarà amb una fantàstica botiga en línia de forma gratuïta.

Només necessiteu un compte d’allotjament web i una mica d’esforç i podreu realitzar un lloc web de comerç electrònic en molt poc temps.


Comencem!

Coses que necessiteu:

  • Hosting. Us recomano SiteGround.
  • A nom de domini.
  • Tema de WordPress. Per a aquest tutorial, utilitzem el tema gratuït d’Astra.
  • Creador de pàgines de WordPress. Per això utilitzem el creador de pàgines gratuït d’Elementor.
  • WooCommerce, el millor complement de WordPress de comerç electrònic.

Pas 1. Compra un allotjament web i un nom de domini.

Si sou nous a tot aquest negoci de creació de llocs web, permeteu-me aclarir primer què són un allotjament web i un nom de domini i per què els necessiteu.

Què és un nom de domini i allotjament?

Un allotjament web és un lloc d’internet on viurà el vostre lloc web. És com una casa física on es troben les vostres coses. El nom de domini, en canvi, és l’adreça del vostre lloc web. És com la vostra adreça que heu donat a les persones perquè puguin venir a visitar-vos a casa. “Facebook.com”, “Google.com” i “WordPress.com” són tots els exemples de noms de domini.

Podeu comprar un nom de domini gairebé en qualsevol lloc web que vengui noms de domini. Només cal buscar el millor preu. Però pel que fa a allotjament de llocs web, és absolutament important només rebre hosting d’una empresa de confiança. Perquè si el vostre allotjament és lent o poc fiable, la velocitat i el temps de funcionament del vostre lloc web patiran, i en última instància perjudicaran el vostre negoci de comerç electrònic.

Lloc del lloc, el meu servei d’allotjament web preferit

Podeu utilitzar qualsevol servei d’allotjament web d’alta qualitat per crear un lloc web de comerç electrònic, però en aquest tutorial, utilitzarem Siteground.

SiteGround és un amfitrió web molt recomanable en línia perquè han atès als usuaris de WordPress i encara tenen preus assequibles. Són més coneguts per les seves prestacions ràpides i un suport igualment ràpid.

A continuació, es mostren les funcions clau de SiteGround:

  • Certificat SSL gratuït
  • Suport de coneixements ràpids
  • WordPress Staging Environment
  • Migracions de llocs web gratuïts
  • 30 dies de còpies de seguretat

SiteGround és una elecció sòlida per a les vostres necessitats d’allotjament web. S’adapten als llocs web de WordPress i ofereixen menys recursos que els seus competidors, però tenen una fiabilitat més alta.

He aconseguit un acord fantàstic amb ells per donar un descompte del 70% a tots aquells que se’n registrin aquest enllaç. Així, si voleu estalviar diners al vostre hosting, fes clic en aquest enllaç i compra el teu hosting ara.

Un cop hàgiu accedit a la pàgina d’inici, veureu quatre tipus diferents de hosting:

escolliu un pla de lloc

Trieu allotjament i feu clic a WordPress Començar. A continuació, veureu tres plans de preus:

Preu d'allotjament de wordpress de lloc web

Trieu-ne un en funció de les vostres necessitats i pressupost. També podeu consultar les seves comparació de cada pla d’allotjament per tenir una millor idea de quin pla s’adapta més a les vostres necessitats.

Un cop hàgiu decidit un pla, feu clic a Obtén un pla. Aleshores, se us dirigirà a una pàgina on haureu de triar un domini. Si ja heu comprat un nom de domini, seleccioneu “Ja tinc un domini”. Però si no en teniu, seleccioneu “Registre un domini nou” per comprar un domini directament al Siteground.

tria un domini

Un cop tingueu un nom de domini que us agradi i estigui disponible, feu clic a Seguiu. El següent pas és proporcionar les vostres dades personals i de facturació per completar la compra. Proporcioneu les dades amb precisió i feu clic Paga ara. Ara teniu un nom d’allotjament i un domini fiables.

Pas Segon. Instal·leu WordPress.

WordPress és una eina gratuïta de codi obert que us permet crear llocs web encara que no tingueu ni idea sobre la codificació. És el sistema de gestió de contingut de llocs web més fàcil i potent que hi ha fins ara. Hi ha moltes coses que m’agraden sobre WordPress i, si llegeixes més tutorials o veus els meus vídeos, trobaràs més informació per què crec que WordPress és la millor eina per crear llocs web per a empreses no tecnològiques..

Siteground realment inclou una instal·lació de WordPress d’un clic que fa tot el treball dur d’instal·lar i configurar WordPress per a vosaltres.

Un cop hàgiu completat la compra d’allotjament, veureu una pantalla amb un enllaç que diu “Aneu a l’àrea del client”. Feu clic a això i se us dirigirà a una pàgina on podeu configurar el vostre compte d’allotjament nou. Sota Configura el teu lloc web, seleccionar Inicieu un lloc web nou.

A continuació, veureu una llista de programari que podeu instal·lar. Selecciona WordPress.

instal·lar wordpress

Haureu de proporcionar detalls d’inici de sessió d’administració per al vostre lloc web com ara la vostra adreça de correu electrònic, nom d’usuari i contrasenya. Assegureu-vos de protegir aquests detalls perquè els utilitzareu per iniciar la sessió al vostre lloc web.

Un cop fet això, feu clic a Confirmeu > Configuració completa. I ara teniu un lloc web de WordPress que s’hi allotja en directe.

Per començar a personalitzar el vostre lloc web, haureu d’iniciar la sessió al backend de WordPress. Per fer-ho, vés al tauler de control del Lloc del lloc i passa a la secció Els meus comptes fitxa Feu clic a la tecla Instal·lació i aquí veureu el nom de domini que vau registrar. A l’interior hi ha un verd Vés al portal d’administració botó. Feu clic en aquest botó per anar a la pàgina d’inici de sessió de WordPress.

aneu al quadre de comandament d'administració de wordpress

Les pàgines d’inici de sessió de WordPress solen tenir aquests formats: yourdomain.com/wp-admin i yourdomain.com/wp-login. Recordeu l’URL de la pàgina d’inici de sessió de manera que la propera vegada podreu accedir-hi escrivint directament l’URL a la vostra barra d’adreces i sense haver d’iniciar sessió més al Siteground..

La pàgina d’inici de sessió de WordPress s’assembla així:

pàgina d'inici de sessió de wordpress

Introduïu el vostre nom d’usuari i la vostra contrasenya aquí per iniciar la sessió al vostre lloc web per primera vegada.

Pas 3. Instal·leu Astra Theme i Astra Sites.

El tema Astra és el tema que utilitzarem per aconseguir que el nostre lloc web de comerç electrònic tingui un aspecte excel·lent i professional el més ràpidament possible. Podeu utilitzar altres temes si ho preferiu, però per a aquest tutorial, anirem amb el tema Astra.

Astra és un tema gratuït de WordPress que té una rapidesa i senzillesa excel·lents. Combina-ho amb Astra Sites (complement gratuït) i qualsevol pot tenir un lloc web bonic amb uns quants clics de ratolí. També hi ha disponible una versió Pro que fa que Astra sigui el tema perfecte.

Aquí teniu les característiques que més m’agraden d’Astra:

  • Un dels temes més ràpids disponibles
  • Més de 100 llocs d’inici (la majoria són 100% gratuïts)
  • Funció del menú Mega flexible
  • Potent complement de paquets
  • Suport extens de WooCommerce

El tema Astra és una excel·lent elecció per a qualsevol projecte de disseny web de WordPress. De fet, és el tema que estic utilitzant en aquest lloc web i en tots els meus projectes.

Tinc plena confiança en el desenvolupador i he quedat molt impressionat amb la codificació del tema.

Però, més que això, el tema és tan senzill d’utilitzar a causa de tota la cura i el pensament que hi ha tingut. En la majoria de situacions, es configura a partir de les eines que feu servir.

Per instal·lar Astra, aneu a Aparició > Tema > Afegir nou. Cerqueu Astra, feu clic a Instal·leu, i Activa.

instal·lació del tema astra

Una altra cosa que m’agrada d’Astra és el fet que té un plugin anomenat Llocs d’inici de Astra amb una biblioteca de plantilles gratuïtes i premium prèviament construïdes. Podeu utilitzar aquestes plantilles per al vostre lloc web en pocs clics. Utilitzarem una plantilla del lloc Astra per reduir el temps de creació del nostre lloc web a la meitat.

Després d’instal·lar Astra, veuràs aquest missatge al tauler:

Els llocs Astra comencen

Feu clic a Començar. Això instal·larà Astra Starter Sites.

Selecció del creador de pàgines

A continuació, se us demanarà quin creador de pàgines preferiu i, en aquest tutorial, utilitzaré Elementor. Elementor és un creador de pàgines de WordPress que ha agafat el disseny web de WordPress per storm. Tenia el conjunt de funcions més profund, però és molt fàcil d’utilitzar i dominar. Elementor és el creador de pàgines gratuïtes més complet. També hi ha un complement Pro per afegir funcions de desenvolupador addicionals.

Característiques de l’element clau:

  • Editor de pàgines finals en directe
  • Funcions de personalització de llocs web
  • Biblioteca de plantilles i blocs
  • Extensives opcions de resposta mòbil
  • Creador de finestres emergents més potent
  • PRO: Crea capçaleres / peus de pàgina personalitzats
  • PRO: Crea dissenys de tipus de publicació

Elementor és el creador de pàgines més fort disponible actualment. Estrenen de forma constant noves funcions que s’ajusten a les tendències actuals del disseny. Això significa que podreu mantenir rellevant el vostre lloc web. Si voleu l’accés a funcions avançades, podeu actualitzar a Elementor Pro, que crec que és un valor increïble tenint en compte tots els mòduls addicionals i les funcions de potència que inclou..

Triar el tema del lloc Astra

Un cop hàgiu escollit el creador de pàgines, sereu dirigits a la biblioteca de les plantilles de Llocs d’Astra. Hi ha moltes tonals de plantilles que podeu utilitzar. Preneu-vos el temps per triar la plantilla que vulgueu. Tingueu en compte que aquestes plantilles es poden modificar completament amb el creador de pàgines que heu seleccionat, és a dir, que podreu personalitzar cada part i element del lloc web com ara la rúbrica, imatges, colors, logotip, etc..

Per a aquest tutorial, utilitzaré la plantilla d’impressió personalitzada perquè sembla increïble i molt orientada al comerç electrònic.

Per instal·lar un tema, només heu de fer clic sobre ell per anar a la vista prèvia. Si us agrada el que veieu, feu clic a Tema d’importació i assegureu-vos que totes les caselles estiguin marcades.

Si observeu, hi ha una casella que diu “Instal·lar plugins obligatoris”. Si activeu aquesta casella, instal·leu tots els complements necessaris perquè el tema tingui un aspecte exacte. Per al tema d’impressió personalitzada, instal·larà Elementor, WooCommerce i WPForms. Això m’estalvia molt temps perquè ja no hauré d’instal·lar aquests complements un a un. Tot està fet per mi.

importació del tema del lloc astra

La importació del tema pot trigar una estona. No tanqueu el navegador ni feu l’actualització. Espereu-ho i, quan s’acabi, veureu un color blau Veure el lloc botó. Feu clic al botó per accedir al lloc web que ara té el tema que acabeu d’importar.

Pas 4. Personalitzeu el vostre lloc web.

El vostre lloc web ara sembla impressionant, però voldreu fer-lo vostre. El primer que voleu fer és triar la paleta de colors. Si ja teniu el color de la vostra marca, us resultarà més fàcil.

Selecció d’una paleta de colors

Un lloc web normalment té un conjunt de 3 colors: el color primari, accent i pop. El color principal és el color dominant del vostre lloc web i molt probablement el color de la vostra marca. El color de l’accent s’utilitza normalment en els encapçalaments o en els títols de publicació si voleu que semblin una mica diferents per atraure els ulls cap a ells. Per últim, el color pop hauria de contrastar la resta de colors per tal d’elementar elements importants del lloc web com ara els botons de trucada a l’acció..

Per escollir una paleta de colors d’un lloc web, utilitzo dues eines. El primer és Coolors.co on podeu navegar per diferents paletes de colors i triar el que voleu utilitzar al vostre lloc web.

pàgina d'inici de refrigeradors

Si veieu una paleta que us agrada, feu clic amb el ratolí a sobre Veure, i se us portarà a una nova finestra on veureu els codis Hex de cada color.

paleta de colors amb codi hexagonal

Aquests codis Hex són el que necessiteu per utilitzar aquests colors al vostre lloc web. Més endavant, us mostraré com utilitzar aquests codis hexagonal al backend de WordPress.

Una altra eina fantàstica és Colorzilla, una extensió de Google Chrome que us permet obtenir el codi Hex de qualsevol color que veieu en qualsevol lloc web per a que el pugueu utilitzar pel vostre compte. Si voleu obtenir l’extensió Colorzilla, clica aquí. A continuació, feu clic a Afegeix a Chrome.

colorzilla

Pot passar un temps, però, un cop finalitzat, veureu aquesta icona a la barra d’eines:

icona colorzilla

Ara, si veieu un color en qualsevol lloc web que vulgueu provar i feu servir al vostre lloc web, només heu de clicar sobre aquesta icona i fer clic al color que voleu copiar. A continuació, es copiarà automàticament el codi Hex que podeu enganxar al backend del vostre lloc web. És tan fàcil. Aquesta és una eina útil que us permetrà utilitzar colors fantàstics amb un sol clic.

Personalització de la tipografia

També vol utilitzar la vostra pròpia tipografia per destacar el vostre lloc web. Els llocs web normalment tenen 2-3 fonts. Tindreu un tipus de lletra per a títols o menú, un tipus de lletra per al cos i un altre tipus de lletra pop. Com els colors, no podeu utilitzar cap tipus de lletra. Heu d’assegurar-vos que queden bé junts i envieu el missatge adequat sobre la vostra marca.

M’agrada fer servir Fontpair.co que és un lloc web que us mostra com es combinen dos tipus de lletra diferents.

utilitzant fontpairs.co

Si veieu alguna cosa que us agrada, només cal que observeu com es diu així que podeu anar a WordPress i afegir-hi directament.

També m’agrada fer servir WhatFont, una extensió de Google Chrome que us indica quina font s’utilitza en qualsevol lloc web. Per instal·lar WhatFont, clica aquí després feu clic Afegeix a Chrome. Aleshores, veuràs aquesta icona a la barra d’eines:

icona de no

Si voleu saber el nom d’una font, simplement feu clic a aquesta icona i passeu el ratolí sobre el text. WhatFont us dirà el nom d’aquest tipus de lletra i, si hi feu clic, també veureu la mida del tipus de lletra, el color, la família, l’estil, el pes i més.

fent servir whatfont

Obtenció d’un logotip

També haureu de necessitar un logotip de marca per diferenciar el vostre lloc web i establir la vostra identitat de marca. Hi ha diverses maneres d’obtenir un logotip. Podeu provar i fer-ho vosaltres mateixos mitjançant una eina increïble de disseny anomenada Canva. És molt popular, ja que fa que el disseny sigui realment fàcil fins i tot per a principiants.

Canva inclou una gran quantitat de plantilles de logotip que podeu modificar per fer les vostres pròpies. Tingueu en compte, però, que si voleu exportar el logotip amb un fons transparent, haureu d’actualitzar a Pro (que té una prova gratuïta d’un mes). Sempre podeu anar a Photoshop o Fotòpea per eliminar el fons, però això només aporta un pas més al procés.

logotips de canva

Si voleu estalviar temps, només podeu contractar un dissenyador autònom de logotip per fer-ho per vosaltres. Podeu provar llocs web com Fiverr.com o 99design, però heu d’anar amb compte a l’hora d’escollir un artista en funció del seu estil, historial, ressenyes, valoracions i molt més..

Personalització del vostre lloc web

Ara és el moment d’utilitzar aquests colors, tipus de lletra i logotips del vostre lloc web. Si sou al tauler de fons de WordPress, aneu a Aparició > Personalitzar per obrir el personalitzador de temes.

personalitzar el tema

Si esteu a la portada del vostre lloc web i hi ha una barra negra a la part superior, podeu fer clic Personalitzar per obrir el personalitzador.

personalitzar el tema

Així s’assembla al personalitzador de temes:

personalitzador de temes

Aquí podeu penjar el vostre logotip, canviar els colors i la tipografia del lloc, personalitzar els botons i molts altres. Els canvis que feu aquí es mostren en temps real al vostre lloc web de manera que podreu veure de seguida com s’assembla. A més, cada tema té diferents opcions de personalització, de manera que si utilitzeu un altre tema que no sigui Astra, podeu veure diferents opcions aquí.

A Astra, per canviar els colors del lloc, vés a Colors i fons. Podreu canviar els colors de la base, del pa ratllat, de la capçalera i de la barra de peu de pàgina.

editor de fons de color

Els colors de base són el tema, l’enllaç, el text i el color del ratolí del vostre lloc web. Si voleu canviar, per exemple, el color del tema, feu clic a Seleccioneu Color. Veureu dues maneres de seleccionar un color. Primer, podeu enganxar un codi hexagonal en un requadre. Així que si trobeu un color a Coolors.co o a qualsevol altre lloc, podeu enganxar el codi Hex aquí. També podeu seleccionar un color en una eina de selecció integrada.

editor de colors base

Per canviar la tipografia del vostre lloc, torneu al menú principal del personalitzador i feu clic a Tipografia. Podreu canviar la tipografia de base, pa ratllat, contingut i bloc.

personalitzador de tipografia

A continuació afegiu el vostre logotip. Per penjar el logotip, aneu a Maquetació > Capçalera > Identitat del lloc. A la secció Logotip, feu clic a Canvia el logotip botó i penja el logotip.

logotip de càrrega

Astra també us permet ajustar l’amplada del vostre logotip perquè pugueu canviar la mida petita o petita que voleu que aparegui. Si es desplaça cap avall, també podreu canviar el títol del lloc, afegir una etiqueta del lloc i una icona o un punt de mira del lloc..

Podeu fer molt més a l’àrea de personalització d’Astra com canviar l’amplada de contingut del vostre lloc, canviar l’estructura de la publicació del bloc, personalitzar el peu de pàgina i la capçalera i molt més. Exploreu les vostres opcions aquí per veure què us agrada més al vostre lloc web.

Un cop hàgiu acabat de personalitzar, no oblideu fer clic Publicar perquè els canvis es facin en directe al vostre lloc.

Pas 5. Personalització del lloc web amb Elementor.

Arribats a aquest punt, heu baixat els fonaments bàsics de personalització com canviar el color del lloc, la tipografia, afegir un logotip i totes aquestes coses. Ara ha arribat el moment de posar-se en contacte amb els detalls que no són fàcils i començar a utilitzar Elementor (o qualsevol creador de pàgines que prefereixi) per canviar completament la forma en què es veu el vostre lloc.

Com he comentat abans, utilitzaré Elementor en aquest tutorial perquè simplement crec que és el millor, però podeu utilitzar qualsevol creador de pàgines amb els quals estigueu a gust.

A Elementor, podeu fer pràcticament qualsevol cosa amb el vostre lloc web sense codificar ni contractar un desenvolupador web. Afegir elements és un procés simple d’arrossegar i deixar anar.

Hi ha dues maneres d’editar una pàgina amb Elementor. Primer, si esteu al backend de WordPress, feu clic Pàgines i hauríeu de veure una llista de totes les pàgines del vostre lloc web, incloses les que es van crear automàticament amb la plantilla del lloc d’Astra. Les pàgines que s’han fet amb un creador de pàgines específic (per exemple, Elementor) s’etiqueten com a tal:

pàgines

Per editar una pàgina amb el creador de pàgines, passeu el ratolí sobre ell i feu clic a sobre Edita amb (creador de pàgines). En el meu cas, serà Edita amb Elementor.

edita amb elementor

Un cop feu clic en això, sereu ingressats a Elementor.

Una altra manera és que si esteu a la portada del vostre lloc web, aneu a la pàgina que voleu editar i feu clic Edita amb elementor a la barra negra de la part superior:

edita amb elementor

Qualsevol d’aquests dos us farà entrar a Elementor. Un cop a Elementor, podreu utilitzar diferents imatges per a la vostra rúbrica, canviar textos, canviar icones i molt més. Podeu començar canviant els textos i les imatges de l’encapçalament adequats al vostre negoci. A continuació, es mostren algunes coses que podeu fer amb els textos de Elementor:

edició de textos a elementor

Com podeu veure, podeu canviar el text a l’àrea d’edició de contingut, canviar la mida, el pes, el color i la família de tipografies. També podeu afegir animacions com fades simples, zoom i molt més. Hi ha moltes coses que podeu fer aquí per afegir espècies al vostre lloc web.

També voldríeu canviar les imatges del vostre lloc web per adaptar-se a la naturalesa del vostre negoci. És fàcil de canviar les imatges a Elementor. Només cal fer clic a la imatge i les opcions apareixeran a la barra lateral esquerra. Podeu penjar una imatge nova, canviar-ne la mida, afegir una vora o una ombra, afegir una animació i molt més.

edició d’imatges a elementor

A Elementor, també podeu canviar textos de botons, personalitzar l’àrea de testimonis, afegir més elements / blocs com textos, imatges, botons, vídeos i molt més..

Elementor Pro ofereix moltes més funcions, com ara afegir formularis (que normalment requereixen un complement de tercers), la possibilitat de penjar els vostres tipus de lletra, afegir lliscants, afegir taules de preus i llistes de preus, personalitzar les capçaleres i els peus de pàgina ( que està fora de límit per a la majoria de creadors de pàgines) i molt més.

Si voleu adquirir Elementor Pro i alhora accedir gratuïtament als meus cursos d’Elementor Pro, feu clic en aquest enllaç aquí.

Pas 5. Configura WooCommerce.

Ara és hora de configurar WooCommerce, que és el complement de WordPress que converteix qualsevol lloc web en una botiga en línia. Permet afegir productes, acceptar pagaments en línia, crear cupons, establir enviaments i impostos i molt més.

WooCommerce ja estava instal·lat per a mi pel tema Custom Print Astra Site, així que ara he d’entrar i configurar-lo. Si encara no teniu WooCommerce instal·lat, aneu a Connectors > Afegir nou i busqueu WooCommerce.

El primer que hem de fer és anar a WooCommerce > Configuració. Veureu 7 pestanyes: General, Productes, enviament, pagaments, comptes i privadesa, correus electrònics i avançat.

Donem primer una ullada a General fitxa En aquesta pestanya, podreu establir la vostra adreça de la botiga, en quins països vendreu i enviareu i activeu els tipus d’impostos.

Configuració general de woocommerce

Si es desplaça cap avall, també veureu opcions per habilitar els cupons i personalitzar com es mostren els preus al vostre lloc web, inclosa la moneda, on es mostrarà, etc..

A continuació hi ha la Productes pestanya on podeu definir opcions relacionades amb el producte. Podeu definir quina pàgina serà la pàgina de la botiga, què passa quan els visitants afegeixen un producte al carretó, definiu les dimensions del producte, activeu i configureu els comentaris dels clients i activeu les classificacions d’estrelles..

Configuració del producte de woocommerce

A la part superior d’aquesta secció, també teniu opcions Inventari i Productes descarregables. A la secció Inventari, si marqueu la casella al costat Habilita la gestió d’estocs, veuràs una llista d’opcions que us ajudaran a gestionar el vostre inventari. Per exemple, podeu definir el llindar d’inventari baix de manera que quan el valor arribi a aquest número, se us enviarà una notificació. També podeu optar per ocultar articles en stock del vostre lloc web.

configuració d'inventari de woocommerce

Pel que fa a la Productes descarregables secció, això només és rellevant si vens contingut descarregable al vostre lloc web, de manera que si vens productes purament físics, podeu saltar-lo. Tindreu l’opció d’exigir que els compradors s’iniciïn abans de poder descarregar els vostres productes. També podeu donar accés a descàrregues després del pagament.

opcions de producte descarregables

La següent fitxa és Enviament. Això només és rellevant si vens productes físics que s’enviaran als compradors. Dins d’aquesta fitxa hi ha tres subseccions: Zones d’enviament, opcions d’enviament i classes d’enviament.

A les zones d’enviament, haureu d’afegir zones d’enviament i assignar mètodes d’enviament disponibles a aquestes zones. Passarà un temps si envieu a diversos països.

zones d’enviament

Si necessiteu més ajuda amb les zones d’enviament, podeu consultar la zona d’enviament de WooCommerce documentació.

A continuació hi ha la Opcions d’enviament secció En aquesta secció, podeu controlar com es mostren les tarifes d’enviament al vostre lloc web i establir una predeterminada o la destinació d’enviament requerida.

opcions d'enviament

L’última secció en enviament és Classes d’enviament. Amb les classes d’enviament, podeu assignar diferents tarifes d’enviament a un grup de productes, per exemple, a productes més pesats que necessiten més franqueig.

classes d’enviament

Per definir les tarifes d’enviament, aneu a Zones d’enviament i crear o editar un mètode d’enviament existent, com ara “tarifa plana”.

afegir un cost d’enviament

Un cop feu clic Edita, apareixerà una finestra emergent. Aquí, podreu afegir la tarifa d’enviament fixa i el cost addicional per a la classe d’enviament que acaba de crear.

cost d’enviament d’una classe d’enviament

Si necessiteu més ajuda per configurar la configuració d’enviament, podeu consultar les de WooCommerce documentació per a enviament.

Passem ara Pagaments. En aquesta pestanya, podreu habilitar o desactivar passarel·les de pagament com PayPal, transferència bancària directa, efectiu en el lliurament i molt més. Un cop hàgiu activat un mètode, feu clic a Configuració per enllaçar els comptes i començar a acceptar els pagaments.

Mètodes de Pagament

Si voleu poder acceptar pagaments Stripe, podeu instal·lar un complement anomenat Passarel·la de pagament de canals de WooCommerce. Només cal anar a Connectors > Afegir nou i cerqueu el connector. La instal·lació i l’activació d’aquest complement habilitarà el mètode de pagament Stripe a WooCommerce, però heu d’introduir-lo WooCommerce > Configuració > Pagaments per configurar-lo.

A la Comptes i privadesa pestanya, podreu configurar la configuració relacionada amb la creació del compte i la privadesa dels usuaris. Podeu optar per permetre que els clients comprin sense crear un compte, configurar la pàgina de privadesa i les pàgines de polítiques i triar quant de temps es conservaran les dades d’usuari.

comptes i privadesa

A continuació hi ha la Els correus electrònics pestanya on veureu una llista de correus electrònics que WooCommerce envia automàticament segons algunes condicions. Per exemple, un correu electrònic es pot enviar a una adreça de correu electrònic que escolliu cada vegada que es faci una nova comanda. També podeu veure missatges de correu electrònic amb actualitzacions sobre les comandes dels clients com ara les comandes reemborsades o finalitzades.

notificacions per correu electrònic

Finalment, el Avançat la pestanya, que ha substituït la pestanya API, us permet configurar més detalls tècnics, com ara la configuració de la pàgina, on podreu indicar a WooCommerce quina pàgina actuarà com a pàgina de carret o pàgina de checkout..

Configuració de pàgines

Si es desplaça cap avall, podreu modificar el que WooCommerce anomena punts finals que són apèndixs a l’URL que els permet mostrar contingut diferent sense la necessitat d’una nova pàgina..

Pas 6. Afegir productes.

Un cop acabats els paràmetres bàsics de WooCommerce, ara és hora d’afegir productes. El tema del lloc d’Astra que hem utilitzat en aquest tutorial ja inclou productes de mostra, i així es veu com es mostra una pàgina de producte al frontend:

pàgina de producte

Vegem ara com podem canviar això i com afegir els nostres propis productes al backend.

Per afegir un producte nou o editar un producte existent, només cal que feu clic a l’opció de menú Productes a la barra lateral esquerra del tauler de control de WordPress. Aleshores, veuràs una llista de tots els productes que tens. De forma alternativa, si esteu al frontend d’una pàgina de producte, podeu fer clic Edita el producte a la barra negra de la part superior de la pàgina. Això us portarà directament a l’editor de productes.

editor de productes

Aquí podeu canviar el títol del producte i la descripció del producte. Si es desplaça cap avall, es mostrarà una secció anomenada Dades del producte. Aquí és on passareu la major part del vostre temps. Aquí, podeu seleccionar el tipus de producte i, a partir d’aquí, podeu configurar altres paràmetres de producte.

WooCommerce us permet afegir aquests tipus de productes:

  • Físic, descarregable, virtual. No és necessari que es descarregui un producte virtual. Un exemple és una cita o una sessió d’entrenament individualitzat.
  • Producte senzill. Aquest és un producte d’un únic article.
  • Producte agrupat. Es tracta d’un paquet de productes diferents.
  • Producte extern. Els productes que es compren fora del vostre lloc web com un enllaç d’afiliació.
  • Producte variable. Un producte variable té variacions com els colors i les mides.
tipus de producte

Sempre que creeu un producte nou, el primer pas és triar el seu tipus. Cada tipus inclou un conjunt d’opcions diferents. Per exemple, un producte descarregable tindrà aquestes opcions:

opcions de producte descarregables

A la part esquerra d’aquesta secció, podreu veure més opcions d’inventari, enviament, productes enllaçats i molt més.

Dins Inventari, podreu afegir el SKU, proporcionar un nombre específic d’existències per a aquest producte en concret, establir l’estat d’accions i molt més.

Dins Enviament, podeu especificar el pes i les dimensions del producte i també assignar una classe d’enviament creada al pas anterior.

enviament en dades del producte

Dins Productes enllaçats, podeu assignar a un producte un producte d’increment i venda transversal. Un producte nou és un producte que recomaneu en lloc del producte actual, ja que té un preu més elevat. Les vendes creuades són productes que recomanareu al carret en funció del producte actual. Si voleu afegir un augment o una venda creuada, escriviu el nom del producte a les caselles corresponents.

productes enllaçats

També podeu afegir atributs als vostres productes al menú Web Atributs secció Pot ser de mida, color, pes, etc. A més, si creeu un producte variable, primer haureu d’afegir un atribut aquí. Si voleu obtenir més informació sobre com crear un producte variable, feu un cop d’ull La guia de WooCommerce aquí.

Si es desplaça cap avall Dades del producte , veureu una àrea on podeu afegir una breu descripció del producte. Aquesta descripció apareixerà al costat del vostre producte i a prop del preu. Manteniu-lo curt i dolç. Podeu afegir una imatge del producte a la part dreta. Si teniu més imatges de productes, podeu afegir les que hi ha al document Galeria de productes secció.

breu descripció i imatge del producte

També és important definir la visibilitat del catàleg que es pot trobar a la part superior de la pàgina de sota Publicar. En alguns casos, és possible que vulgueu amagar determinats productes, perquè potser ho oferiu com a venda creuada amb un preu exclusiu amb descompte. Aquí és on podeu fer això.

visibilitat del catàleg

Un cop hàgiu acabat amb tot aquí, feu clic Actualitza per desar tots els canvis.

Si voleu obtenir més informació sobre els diferents tipus de productes i sobre com podeu crear-los adequadament, podeu fer-ho Guia de WooCommerce és un lloc ideal per començar. Segueu afegint més productes al vostre lloc web amb els mateixos passos que us vaig mostrar aquí fins que no creeu les fitxes de productes.

Pas 7. Personalitza les teves factures.

WooCommerce és un excel·lent complement com heu vist fins ara, però una queixa habitual contra ell és la manca d’opcions de checkout. No podreu canviar com semblen les pàgines de la caixa i no podeu crear-ne un embut de venda. Un embut de vendes és una manera excel·lent d’incrementar el valor de compra d’un client, de manera que si no el teniu al vostre lloc web, deixareu realment diners sobre la taula.

Si voleu crear un embut de vendes per al vostre lloc web de comerç electrònic, el millor complement que us pot ajudar és CartFlows. És un complement de WordPress per a creadors d’embuts que us permet crear embuts molt bonics i molt efectius dins de WordPress.

cartells

Si voleu obtenir més informació sobre com crear un embut de vendes amb CartFlows, podeu consultar aquest tutorial que he realitzat.

Pas 8. Mantingueu-vos a l’abandonament del carretó.

Abans de tancar aquest tutorial, permeteu-me només afegir una cosa més sobre l’abandonament del carretó. De fet, en el comerç electrònic, molts clients abandonen els seus carretons sense haver finalitzat la compra.

Això podria ser a causa de moltes raons. Pot ser que s’haguessin distret, el poder o la connexió s’apaguessin. Sigui com sigui, molts d’aquests carretons abandonats són vendes perdudes si no feu res al respecte.

Per sort, hi ha un connector anomenat Recuperació d’abandonament del carretó de WooCommerce plugin que fa el seguiment i envia automàticament correus electrònics de seguiment als clients amb carros abandonats, tot de franc!

Si utilitzeu el tema d’Astra Site que he utilitzat aquí, aquest complement ja us hauria instal·lat. Però si no, podeu instal·lar-ho anant a Connectors > Afegir nou i cerqueu el connector.

Es crearà una nova opció sota WooCommerce anomenada Abandonament del carretó. Si feu clic en això, podreu veure una visió general de quants carros abandonats teniu, quants s’han recuperat i quants s’han perdut.

abandó de comandes recuperables

També podreu personalitzar els correus electrònics de seguiment que envia WooCommerce passant al fitxer Correus de seguiment desplegar el ratolí sobre el correu electrònic que voleu editar i fer clic Edita.

correus electrònics de seguiment

Aleshores, se us dirigirà a l’editor de correu electrònic:

personalització de correus electrònics de seguiment

Embalatge

Crear un lloc web de WordPress de comerç electrònic pot semblar complicat i aclaparador, però espero que hi posi una llum i que mostri com podeu fer-ho tot sol amb una mica d’ajuda. Estic emocionat de conèixer les vostres històries d’èxit i, si necessiteu ajuda, podeu contactar-me a la secció de comentaris que hi ha a continuació.

SiteGround

SiteGround és un amfitrió web molt recomanable en línia perquè han atès als usuaris de WordPress i encara tenen preus assequibles. Són més coneguts per les seves prestacions ràpides i un suport igualment ràpid.

Característiques principals del lloc web:

  • Certificat SSL gratuït
  • Suport de coneixements ràpids
  • Ambientació de WordPress WordPress
  • Migracions de llocs web gratuïts
  • Còpies de seguretat diàries

SiteGround és una elecció sòlida per a les vostres necessitats d’allotjament web. S’adapten als llocs web de WordPress i ofereixen menys recursos que els seus competidors, però proporcionen una major fiabilitat.

Feu un cop d’ull a SiteGround

Tema Astra

Astra és un tema gratuït de WordPress centrat en la velocitat. Opcionalment, podeu comprar la versió Pro per 59 $, que afegeix algunes opcions i configuracions addicionals.

Característiques clau del tema Astra:

  • No és el tema dels dejunis, però no és cap mordis
  • Molts llocs de demostració gratuïts
  • Funció del menú Mega flexible
  • Opcions de dissenys personalitzats
  • Assistència de WooCommerce
  • Suport per a LearnDash

El tema Astra és una bona elecció per a qualsevol projecte de disseny web de WordPress. Suposo que la pregunta més gran és si fins i tot necessiteu adquirir un tema en aquests dies, ja que els constructors de pàgines fan tot el mateix que necessitaríeu. Per exemple, Elementor té el tema gratuït de Hello que permet al creador de pàgines fer tot el treball.

Encara hi ha algunes bones raons per adquirir un tema professional, però, per a la majoria de les persones, molt probablement estarà bé amb un tema gratuït.

Per a mi, però, crec que Astra Theme no ha estat al dia de les tendències actuals i que ja no el recomano.

Hi ha temes moderns molt millors que ofereixen constructors de capçaleres i peus de pàgina integrats, i es restringeixen a tres dissenys, a més de disposicions de pàgines i publicacions més flexibles..

Consulteu el tema Astra

Elementor

Elementor és un creador de pàgines de WordPress que ha agafat el disseny web de WordPress per storm. Té el conjunt de funcions més profund, però és molt fàcil d’utilitzar i dominar. Elementor és el creador de pàgines gratuïtes més complet. També hi ha un complement Pro per afegir funcions de desenvolupador addicionals.

Característiques de l’element clau:

  • Editor de pàgines finals en directe
  • Funcions de personalització de llocs web
  • Biblioteca de plantilles i blocs
  • Extensives opcions de resposta mòbil
  • Creador de finestres emergents més potent
  • PRO Crea capçaleres / peus de pàgina personalitzats
  • PRO Crear dissenys de tipus de publicació

Elementor és el creador de pàgines més fort disponible actualment. Estrenen de forma constant noves funcions que s’ajusten a les tendències actuals del disseny. Això significa que podreu mantenir rellevant el vostre lloc web.

Elementor Pro és un valor increïble tenint en compte tots els mòduls addicionals i les funcions de potència que inclou.

Si avui comencés un nou projecte de llocs web, Elementor seria el creador de pàgines que jo escolliria. Considero que és un plaer crear un creador de pàgines de WordPress.

Feu un cop d’ull a Elementor

CartFlows

CartFlows és un creador d’embuts de vendes per a WordPress. Permet crear fàcilment ràpids i senzills embuts de vendes amb el creador de pàgines que vulgueu.

Funcions del carretó clau:

  • Plantilles dissenyades professionalment
  • 5 Ubicació de les bombes de la comanda
  • Un clic Upsells
  • Utilitzeu el vostre creador de pàgines preferent
  • Extensibles a diferència dels embuts de clic
  • Temporitzadors de compte enrere i proves de divisió

Si voleu un creador d’embuts de vendes per a WordPress i us convé allotjar-vos o fer servir allotjament de WordPress gestionat, CartFlows si és una opció excel·lent perquè és molt fàcil d’utilitzar però és molt potent.

Feu un cop d’ull a 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