El theme GeneratePress no només és compatible amb Woocommerce per crear una botiga online, sinó que incorpora plantilles ja preparades i tot un mòdul específic per personalitzar el teu eCommerce.
Agraïment de l’autor convidat
Abans de res, em present. El meu nom és Joan Llompart i som l’autor del blog JoanLlompart.com. Quan va néixer ja fa tres el vaig enfocar a tractar fonamentalment sobre WordPress en general. Però des del passat mes de setembre el dedic específicament a Woocommerce i la creació de botigues online.
T’escric aquest article de convidat al blog de Wetopi gràcies a l’amabilitat del seu responsable, en Joan Vega, a qui vull agrair aquesta oportunitat de participar fora del meu web, i per la seva professionalitat en aquest magnífic servei d’allotjament que dirigeix.
Wetopi m’ha estat i és de gran ajuda en el desenvolupament de llocs web en WordPress, i ara a més em cedeix aquest espai.
Així, des d’aquí et mostraré com es combinen el meu tema preferit de WordPress i el plugin per a eCommerce més utilitzat.
Taula de Continguts
- Què trobaràs en aquest article: GeneratePress i Woocommerce
- Plantilles per a Woocommerce de GeneratePress
- El mòdul Woocommerce de GeneratePress
- Conclusions
Què trobaràs en aquest article: GeneratePress i Woocommerce
L’objecte d’aquest article serà veure les opcions que tens amb el tema GeneratePress per fer una botiga online amb Woocommerce.
Com ja deus saber, GeneratePress és un tema freemium. És a dir, que disposa de versió gratis al repositori oficial de WordPress i versió de pagament que pots aconseguir a la pròpia pàgina web de GeneratePress.
Si comences el teu projecte web, amb GeneratePress tindràs un tema:
- Lleuger: No carrega el teu WordPress i per tant facilita la velocitat del teu lloc.
- Flexible: És un tema que serveix per a qualsevol tipus de web.
- Adaptat als diferents dispositius i tamanys de pantalla.
- Útil per a usuaris principiants per la seva facilitat d’ús.
- Amb possibilitats més avançades per a usuaris més experimentats i per a professionals.
- A més, traduït al català. No obstant, les darreres novetats resten pendents de traducció.
Es tracta d’un dels temes més ben valorats de WordPress tant per les seves prestacions com pel suport que dóna el seu desenvolupador, Tom Usborn.
Per tal de poder utilitzar les opcions que veuràs en aquest article, necessites tenir activats els mòduls de Site Library, i el de Woocommerce que només tens disponible a la versió de pagament de GeneratePress. Aquest darrer lògicament només té sentit si tens el plugin de Woocommerce activat al teu lloc per crear la botiga online.
Si en vols conèixer els detalls del procés d’instal·lació de la versió premium, en tenc un article que et pot ajudar al meu blog: Com instal·lar GeneratePress Premium.
Plantilles per a Woocommerce de GeneratePress
GeneratePress disposa d’una col·lecció de plantilles preparades per estalviar-te temps en la creació d’una pàgina.
Començar un lloc des de zero pot ser feixuc. Si no tens uns mínims de coneixements de disseny web, o no estàs inspirat, és molt fàcil que tenguis el teu primer bloqueig just al principi. Composició i maquetació de pàgines, triar colors i tipus de lletra…
Et pots perdre provant diferents opcions i no aconseguir un resultat que et convenci.
GeneratePress et rescata d’aquesta situació amb la seva col·lecció de plantilles predefinides. Hi pots accedir des de la seva pàgina a Aparença > GeneratePress del teu WordPress. O si encara no tens GeneratePress hi pots fer un cop d’ull des de la seva web.
A la part superior tens les pestanyes Mòduls, Elements i Site Library, que és la que has de clicar per anar a les plantilles. Si no t’apareix és que primer has d’activar la col·lecció de plantilles a l’apartat de mòduls.
Actualment ja hi ha més de 30 plantilles preparades per ser carregades al teu WordPress amb GeneratePress.
Tria la teva plantilla
Per crear la teva botiga online, actualment ja tens fins a 6 plantilles per treballar amb Woocommerce:
- Seller
- Prime
- Target
- Niche
- Merch
- Imprint
Naturalment instal·lar una d’aquestes plantilles no t’allibera de fer tota una feina de configuració de la botiga, però sí que t’ajuda en aspectes més estètics i de disseny i poden ser un bon punt de partida.
Seller
Un lloc amb Woocommerce super simple per començar ràpidament la teva botiga online.
Prime
En aquest cas es tracta d’una botiga online inspirada en Amazon construïda amb els blocs de Gutenberg.
Target
Un altre lloc Woocommerce simple i d’estil modern per mostrar els teus productes. Target ve integrat amb WP Show Posts, Lightweight Social Icons, MailChimp i HappyForms.
Evidentment, pots canviar aquestes integracions pel teu compte i utilitzar les teves eines preferides.
Niche
En el cas de Niche, tens una plantilla per a una botiga de disseny minimalista enfocada en les imatges dels productes. Simple i sense distraccions.
Merch
Merch és una botiga Woocommerce que aprofita totes les característiques de GeneratePress Premium 1.8 amb un blog personalitzat i una landing page feta amb Gutenberg.
Imprint
I finalment, la darrera incorporació a la llibreria de GeneratePress fins a dia d’avui és aquesta plantilla per a una botiga online súper minimalista. Està especialment indicada per vendre pòsters, impressions o productes en què la imatge és fonamental.
Navegant per les plantilles
Si situes el punter damunt qualsevol de les miniatures de les plantilles obtens una petita descripció de les característiques de la plantilla, que tens traduïts a sota de les anteriors imatges, i dos botons per accedir a més detalls o directament a una previsualització.
Clicam primer a detalls:
Llavors s’obre una finestra amb informació sobre la plantilla. En general, en totes tens diferents especificacions:
- Importació de les configuracions de personalització del tema
- Importació de contingut opcional de mostra
- Extensions: Segons la plantilla, tens informació d’extensions gratis que s’instal·laran i activaran automàticament, extensions necessàries ja instal·lades i extensions de pagament que necessites instal·lar manualment per carregar correctament la plantilla. En el cas de les plantilles de botiga online, en cas que no ho hagis fet s’instal·larà com a mínim Woocommerce.
Des d’aquesta pantalla també pots clicar el botó de previsualització per veure com és la plantilla. Amb la finestra de previsualitzacions pots triar el dispositiu de pantalla: escriptori, tauleta o mòbil. També et permet navegar per les diferents plantilles directament.
Tanca la previsualització clicant el botó «X» o «Detalls» i tornes a la finestra anterior.
És important triar bé una plantilla abans de procedir a la seva instal·lació, perquè si no t’agrada després et tocarà esborrar tots els afegits i configuracions incorporats al teu lloc.
Instal·lació de la plantilla
Si ja tens localitzada la plantilla que t’agrada, per començar el procés d’instal·lació has de clicar la casella on diu “I understand that this step will overwrite my Customizer settings. It is recommended that you only use the Site Library on a fresh site“.
És a dir, es tracta d’un avís per acceptar que s’afegeixin:
- Les imatges de mostra de la plantilla a la teva mediateca
- Creació de pàgines i/o entrades exemple
- Les opcions de personalització del lloc (format, colors, tipografies…)
- Instal·lació i activació automàtica d’extensions
- Configuració de menús
- Els ginys adequats
Es recomana utilitzar només la instal·lació de plantilles en llocs nous.
1- Opcions del Tema
En primer lloc, quan cliques la casella s’activa el botó “Backup options” .
Així que som-hi! Clica el botó Backup Options per continuar. Es descarregarà un arxiu al teu ordinador amb la configuració actual del tema, per si el vols restablir amb les actuals opcions. Llavors el botó canvia a Import Options que pots clicar per carregar la nova configuració.
En aquest punt ja tens configurat el tema GeneratePress amb els mòduls necessaris per generar l’aparença de la plantilla escollida al personalitzador. De fet, ho podràs comprovar des de la pàgina de mòduls.
2- Importació de contingut
A continuació, has de clicar de nou la casella que ara apareix per autoritzar que s’afegeixi el contingut, opcions del lloc, menús, ginys i extensions. També t’avisa que una volta executada, aquesta passa no es pot desfer automàticament.
Una volta verifiques l’autorització amb la casella s’activa el botó “Import Content”. Quan el cliques comença el procés d’instal·lació de la plantilla.
3- Final
I finalment, ja tens la plantilla instal·lada! Com a darrera passa pots clicar directament el botó “View your Site” per veure com ha quedat el teu lloc amb la nova configuració.
Eliminar o canviar de plantilla
En cas que no t’agradi el resultat, sempre pots triar una altra plantilla o restaurar la configuració que tenies abans.
Per fer-ho, el més recomanable és que facis neteja de tots els elements de la plantilla: entrades, pàgines, imatges, extensions, menús, ginys, Elements del GP (hooks, capçaleres, formats)… Per tant, elimina tots els elements afegits i buida la paperera en cada cas per no deixar restes d’elements que no necessites.
Pel que fa a la configuració de GeneratePress, des de la pantalla de mòduls has de carregar l’arxiu de còpia de seguretat des de la caixa d’importació de configuració, o si de cas restablir la configuració inicial de GeneratePress i esborrar manualment tots els elements incorporats.
El mòdul Woocommerce de GeneratePress
Opcions Generals de Woocommerce
Fins ara hem instal·lat una configuració i un contingut amb una plantilla preparada. Però amb el Woocommerce activat encara tindràs tota una sèrie de paràmetres afegits al personalitzador del teu WordPress per treballar l’aparença de la teva botiga online.
Les opcions comunes a tot tema de WordPress compatible amb la plataforma de comerç electrònic són les següents:
Avís de la Botiga
A Woocommerce > Avís de la botiga pots incloure un missatge a tota la botiga. Per defecte ve amb un missatge de botiga de mostra per poder fer proves, però el pots emprar per anunciar promocions, esdeveniments o el que tu vulguis.
Només has de clicar la casella d’activar perquè aparegui l’avís a la part superior de cada pàgina de la botiga.
Catàleg de productes
A Woocommerce > Catàleg de productes tens tres paràmetres per definir.
A la pàgina de la botiga pots escollir perquè es mostrin només productes, només categories, o categories i productes.
A la pàgina de cada categoria pots triar perquè es mostrin només productes, només subcategories, o subcategories i productes.
I tens un desplegable per seleccionar l’ordre predeterminat en què es mostren els productes:
- Ordre predeterminat
- Popularitat: es mostren primer els més venuts
- Qualificació mitjana
- Ordenar per més recents
- Per preu ascendent
- Per preu descendent
Imatges del producte
A Woocommerce > Imatges del producte estableixes les mides de la imatge principal (amplada), de la miniatura (amplada) i el retall de les imatges. En aquesta relació d’aspecte les pots retallar a 1:1, crear una relació personalitzada, o deixar-es sense retallar perquè es mostrin tal com estan pujades originalment.
Finalitzar compra
A Woocommerce > Finalitzar compra pots personalitzar alguns camps de la pàgina de pagament:
- Els camps Empresa, Linia 2 de l’adreça i Telèfon els pots definir com a opcionals, obligatoris, o ocultar-los.
- Casella per marcar els camps obligatoris amb un asterisc.
- Selecció de les pàgines de Política de Privadesa i de Termes i Condicions. Aquesta selecció servirà perquè els enllaços corresponents apuntin a la URL correcta.
- I finalment tens dos camps per introduir el text de l’avís de la política de privacitat i de la casella de consentiment dels termes i condicions.
Opcions addicionals de personalització
A més de les anteriors opcions generals, amb el mòdul de Woocommerce de GeneratePress Premium activat també tens paràmetres addicionals per adaptar específicament l’aparença de la teva botiga online dins les pestanyes de Format, Colors i Tipografia del personalitzador.
Format > Woocommerce
En aquest apartat defineixes si vols mostrar el carret de compra en el menú de GeneratePress i escollir entre tres icones diferents:
- El típic carret de compra de supermercat
- Una bossa
- Una cistella
A més, pots triar si vols que la icona mostri el nombre de productes o el preu total.
Una altra opció molt interessant és la possibilitat que es desplegui un mini carret amb el contingut de la cistella i els botons de visualització o finalitzar la compra des del mateix menú quan passes per damunt la icona que hagis escollit.
També pots activar els «breadcrumps», ruta d’exploració o miques de pa si vols mostrar al teu visitant on es troba a la part superior de la pàgina.
A la pàgina general de la botiga pots definir els següents paràmetres:
- Format de barres laterals a la botiga
- Nombre de columnes per productes (de 1 a 6 columnes)
- Alineació de les imatges a la dreta, centre o esquerra
- Nombre de productes per pàgina
- Alineació del text a la dreta, centre o esquerra
- I tota una sèrie de caselles per escollir si vols visualitzar determinats elements o no, com títol de pàgina, de producte, imatges, botons, revisions, preu, descripció…
A la pàgina de cada producte singular també pots definir molts dels mateixos paràmetres anteriors, com el format de barra lateral, o si vols mostrar paràmetres com les pestanyes informatives o els productes relacionats.
I finalment tens una casella per activar el mode lliure de distraccions a la pàgina de pagament. Si cliques la casella deshabilita les barres laterals, ginys de peu de pàgina o menús enganxat que tenguis establerts per defecte.
Colors> Woocommerce
En aquest apartat pots personalitzar tots els colors que s’utilitzen específicament a la teva botiga online: Títols de productes, textos, botons, estrelles de valoració, preus, pestanyes o missatges.
Tipografia > Woocommerce
Pots definir el pes de la font i la transformació de text específicament per a la botiga.
També tens els següents paràmetres configurables tant per a escriptori com per a mòbil:
- Mida de la font
- Mida de la font dels títols de productes relacionats
Conclusions
Crear una botiga online sempre és una tasca complexa. Treballar el teu Woocommerce amb GeneratePress et dóna facilitats, però igualment has de configurar tots els aspectes d’un lloc web presencial més tota l’estructura i funcionalitats d’un e-Commerce: pàgines específiques, diferents tipus de productes, passarel·les de pagament i fins i tot enviaments, facturació o imposts, entre molts d’altres aspectes i detalls.
Amb GeneratePress crear la teva pròpia botiga online amb Woocommerce és més senzill i disposes d’opcions de personalització que et faciliten millorar l’experiència web dels teus usuaris.
Des d’afegir diferents models de carret de compra al menú fins a facilitar el procés de pagament, passant per la personalització de les pàgines de botiga i de cada producte singular, tots els paràmetres els pots definir des del mateix personalitzador.
A més, com hem vist, disposes de plantilles ja preparades que t’ajuden a donar un aspecte professional al teu comerç online.
Sens dubte, GeneratePress Premium per a Woocommerce és una gran elecció.
Si en vols saber més sobre Woocommerce i com tenir la teva pròpia botiga online, no deixis de visitar el meu blog a JoanLlompart.com. Els meus subscriptors actualment es poden descarregar gratis la guia “Què necessito per tenir una botiga online?“.
Si encara no tens el teu e-Commerce, t’anim a començar-lo des d’ara mateix amb WordPress i la combinació GeneratePress+Woocommerce.
I per suposat, no deixis de provar pel teu projecte el servei d’allotjament Wetopi que és aquesta casa.
Wetopi com a servidor especialitzat en WordPress amb tecnologia de contenidors és un allotjament totalment recomanable per a webs exigents en quant a recursos. Així, els llocs que utilitzen Woocommerce que tenen requeriments de major velocitat de càrrega i seguretat addicional aquí trobaran les seves necessitats ben cobertes.
Gràcies de nou a Wetopi per cedir-me aquest espai!