5 maneres fàcils de mostrar productes en una botiga en línia de wordpress

Mostrar productes en una botiga en línia de WordPress pot ser realment un malson per a un principiant de comerç electrònic. Quan vaig començar a construir la meva botiga en línia, vaig pensar que seria inútil col·locar els meus articles a la pàgina principal del meu lloc web. Però tota la tasca va ser una lluita força ascendent!

Segons la meva pròpia experiència, aconseguir que els productes apareguin al vostre lloc web us pot consumir molt del vostre temps, especialment si sou nou al comerç electrònic. Vaig aprendre que és una tasca que requereix un bon coneixement de WordPress.

Productes mostrats en una botiga en línia

Per Jan Saints (obra pròpia): CC-BY-2.0

Si esteu creant una botiga en línia de WordPress per primera vegada, definitivament heu d’aprendre a configurar un lloc web general amb aquest sistema de gestió de contingut. També haureu de familiaritzar-vos amb coses com ara connectors de comerç electrònic, widgets i codis curts. A més, si utilitzeu WooCommerce, haureu de conèixer les opcions de visualització del producte disponibles i entendre la configuració general del connector. Aquesta senzilla guia sobre com crear una botiga en línia i mostrar articles (de Riccardo Andronaco) explica tot això i em va semblar molt útil.

En aquest article, parlaré de cinc maneres de mostrar i organitzar productes en un lloc web de comerç electrònic de WordPress. Seguiu llegint per obtenir informació sobre com es mostren articles a les pàgines del vostre lloc web i com organitzar-los en conseqüència.

Cinc maneres de mostrar i organitzar articles en una botiga en línia de WordPress

1. El mètode automàtic
2. Ginys
3. Connectors
4. Codis curts
5. Control lliscant

1. Mitjançant el mètode automàtic

Com el seu nom indica, no cal que feu res perquè els productes apareguin a la pàgina de la botiga. Els elements es mostren a mesura que els afegiu des del tauler. S'organitzen automàticament per ordre alfabètic o de manera aleatòria amb o sense categories, segons la configuració de visualització de WooCommerce.

La pàgina d'inici només pot allotjar un nombre determinat de productes, cosa que significa que si teniu un gran nombre de productes, alguns se situaran a les pàgines 2, 3, 4, etc.

Aquest mètode fa que els vostres clients puguin conèixer tots els tipus de productes de la vostra botiga, ja que no inclou categories i alguns articles estan ocults en altres pàgines.

És possible que hagueu d’evitar aquest mètode si podeu utilitzar alguns mètodes millors (que es descriuen a continuació) per mostrar els elements. Però si teniu diversos elements que poden cabre en una pàgina, és a dir, la pàgina d'inici, podeu adoptar aquest mètode.

Productes mostrats aleatòriament

Per Jan Saints (obra pròpia): CC-BY-2.0

2. Ús de widgets

Com podeu saber, un giny a WordPress és un petit bloc de contingut que es pot col·locar a la secció de la barra lateral i al peu de pàgina. Ofereix una manera senzilla i senzilla de personalitzar un lloc web. Alguns ginys habituals inclouen: publicacions recents, quadre de cerca, categories i menú de peu de pàgina.

En un lloc web de comerç electrònic, els ginys es poden utilitzar per mostrar categories de productes a la barra lateral o al peu de pàgina. Per tant, poden ser una bona manera d’incrementar el mètode automàtic (comentat anteriorment) que no inclou categories de productes.

Alguns ginys fantàstics que inclouen temes de WordPress de comerç electrònic inclouen productes populars, productes recents, productes més venuts, productes amb millor puntuació i productes destacats. Aquests ginys es poden personalitzar, cosa que significa que podeu canviar el nom amb les categories reals dels vostres articles. També els podeu arrossegar i deixar anar per obtenir un arranjament que s’adapti al vostre estil.

Com que els ginys només poden mostrar productes a les barres laterals i al peu de pàgina, la majoria dels propietaris de botigues en línia no els semblen desitjables. El millor lloc per mostrar elements es troba a la barra principal d’una pàgina, cosa que no es pot aconseguir amb els ginys.

Productes que es mostren en una barra lateral amb l'ajuda d'un connector

Per Jan Saints (obra pròpia): CC-BY-2.0

3. Ús de connectors

A WordPress, un connector és un conjunt de programes que conté un grup de funcions, funcions o serveis. En aquest sistema de gestió de continguts, hi ha desenes de milers de connectors (tant gratuïts com premium) adequats per a una àmplia gamma de necessitats. Hi ha connectors per a tot tipus de llocs web, per exemple, hi ha connectors per al comerç electrònic (com ara WooCommerce), directoris, blocs, plataformes de revenda i de reserva.

Quan es tracta de mostrar i organitzar articles en una botiga en línia, hi ha una infinitat de connectors que podeu utilitzar per realitzar aquesta tasca. Però la majoria dels connectors no són del tot efectius, de manera que heu d’optar pels que s’ha demostrat que funcionen.

Els connectors més recomanats per mostrar articles en una botiga en línia de WordPress són Ultimate Product Catalog i WooCommerce Product Class and Display.

El connector d'ordenació i visualització funciona millor amb un altre connector anomenat Endless Scroll, que us permet mostrar un gran nombre d'articles a la pàgina de la vostra botiga. Després d’instal·lar i activar els dos connectors, heu d’anar a les categories de productes i arrossegar-les i deixar-les anar per aconseguir la visualització adequada. A continuació, podeu establir el nombre de productes que es mostraran per categoria amb enllaços per veure-ho tot.

Pel que fa a l’ordenació, el connector inclou una classificació per defecte per popularitat, novetat, preu (de menor a major i viceversa), a la venda i destacada. Algunes d'aquestes funcions inclouen la versió premium del connector, per la qual cosa es recomana utilitzar aquesta versió.

L’altre connector, Ultimate Product Catalog, és una mica complex. Després d’instal·lar i activar el connector, heu d’afegir-hi tots els vostres productes i categories per obtenir identificadors que pugueu utilitzar en codis curts per mostrar els vostres articles. També heu de crear alguns catàlegs petits per als vostres articles.

Per exemple, el següent codi curt mostrarà els productes al catàleg amb l'identificador "x".

o bé

El connector inclou funcions com ara dissenys de catàleg personalitzables, preus de venda, importació de productes, símbol de moneda, pa ratllat, compartició de xarxes socials, revisió i puntuació de productes, integració SEO by Yoast i un gran nombre d’opcions de configuració.

Els estils de catàleg de productes inclosos al connector inclouen: disseny minimalista, de blocs, de volant i de pestanyes. Alguns d'aquests estils, i també algunes de les funcions descrites anteriorment, estan disponibles amb la versió premium del connector.

Productes que es mostren en blocs amb l'ajut d'un complement

Per Jan Saints (obra pròpia): CC-BY-2.0

4. Ús de codis curts

Si utilitzeu WooCommerce per a la vostra botiga en línia, podeu trobar codis curts que siguin la forma més senzilla de mostrar productes a la pàgina de la vostra botiga. Els codis curts funcionen amb identificadors de producte i categoria i SKU, i només es poden copiar i enganxar a la pàgina de la botiga per mostrar els articles. Vegeu els codis curts següents.

- mostra el llistat de categories.

- mostra un nombre específic de categories i funciona bé amb els arguments següents. Nota: Aquests arguments també poden funcionar amb aquest codi curt.

• nombre = "nul": per mostrar el nombre de categories.
• orderby = "nom": per mostrar categories quan s'ordena per nom. Nota: El valor "nom" es pot substituir per data, rand (aleatori), modificat i cap.
• ordre = "asc": per mostrar les categories quan s'ordena en ordre ascendent. Nota: El valor "asc" es pot substituir per "desc" per ordenar en ordre descendent.
• columnes = "x": per mostrar les columnes "x" d'una categoria.
• hide_empty = "1": per amagar categories.
• hide_empty = "0": per mostrar categories.
• pare = "0": per mostrar categories de nivell superior.
• ids = "x": per mostrar la categoria amb l'identificador "x".
• categoria = "x": per mostrar la categoria "x".

• categories_limit: per mostrar un nombre limitat de categories.
• archive_template: per mostrar una plantilla d’arxiu específica per a una llista concreta.
• design_scheme: per mostrar un color o una mida específics.
• sort = "0": per desactivar el selector d'ordenació de productes.
• sort = "1": per habilitar el selector d'ordenació de productes.
• = "1": per habilitar el codi curt.
• post_type: per mostrar entrades d’un tipus de publicació diferent.
• per_row: per mostrar productes per fila.
• buit: per mostrar un text determinat quan no hi ha productes per mostrar.

• - mostra els elements "y" de la categoria "x" que es mostren a les columnes "z" i que estan ordenats en ordre descendent en funció de la data de publicació.
• - mostra la llista de productes.
• - mostra el nom del producte. Nota: El valor "nom" es pot substituir per altres valors per formar més codis curts. Alguns d’aquests valors inclouen: preu, descripció, descripció breu, taula d’atributs, SKU, enviament, galeria i categories relacionades.
• - mostra les categories de la pàgina actual de fitxa de producte.
• - mostra els productes de la pàgina de llista de productes actual.
• - mostra pa ratllat.
• - mostra un nombre limitat de productes.
• - mostra una URL de tornada a productes que apunta a la pàgina principal de llista de productes.
• - mostra els productes actualment a la venda.
• - mostra el producte amb l'identificador "x".
• - mostra productes amb els identificadors "x", "y" i "z".
• - mostra el producte amb SKU "xyz"
• - mostra el producte amb SKU "abc", "def" i "ghi".
• - mostra el preu i el botó Afegeix a la cistella d'un producte amb l'identificador "x".
• - mostra el preu i el botó Afegeix a la cistella d'un producte amb l'SKU "x".
• - mostra el màxim de "x" elements.
• - mostra productes amb un atribut determinat, és a dir, l'atribut "color" i el color "negre".

• - mostra els productes recents "x" que es mostren a les columnes "y" i es disposen en ordre descendent en funció de la data de publicació.
• - mostra els productes destacats "x" que es mostren a les columnes "y" i es disposen en ordre descendent en funció de la data de publicació.
• - mostra els productes populars "x" que es mostren a les columnes "y" i es disposen en ordre descendent en funció de la data de publicació.
• - mostra els productes amb la millor puntuació "x" que es mostren a les columnes "y" i que es disposen en ordre descendent en funció de la data de publicació.
• - mostra els productes més venuts "x" que es mostren a les columnes "y" i que estan ordenats en ordre descendent en funció de la data de publicació.
• - mostra els productes relacionats amb la "x" que es mostren a les columnes "y" i es disposen en ordre descendent en funció de la data de publicació.
• - mostra la llista de productes amb la plantilla de llista clàssica. Nota: Es poden utilitzar altres plantilles com ara "quadrícula" i "per defecte" en lloc de "llista".
• - mostra productes de la categoria amb l'identificador "x" i amb la plantilla de llista clàssica.

Nota: si esteu bé en codificar, podeu modificar aquests codis curts per aconseguir una millor visualització i disposició del producte.

Un codi curt enganxat en una pàgina

Per Jan Saints (obra pròpia): CC-BY-2.0

5. Ús de control lliscant

Per si no ho sabíeu, un control lliscant és un element de pàgina web que s’utilitza per ressaltar un grup de publicacions seleccionades. És com una presentació de diapositives que vol dir que mostra una publicació cada vegada, passant d'una a la següent automàticament o fent clic.

Per mostrar productes amb control lliscant, heu de substituir les publicacions pels vostres productes. A l’hora de crear un control lliscant de producte, necessiteu un complement de control lliscant sensible com Soliloguy. Després d’instal·lar i activar el connector, heu d’afegir un nou control lliscant i podeu fer-ho mitjançant fotos, enllaços i altres detalls necessaris dels vostres articles. El següent pas és desar o publicar el control lliscant per obtenir un codi curt i una etiqueta de plantilla.

Finalment, heu de copiar i enganxar el codi curt a la vostra pàgina d'inici o en qualsevol altra pàgina per mostrar els productes. L'etiqueta de plantilla pot mostrar elements a la secció de capçalera del tema. Només cal que copieu l’etiqueta, que obriu header.php i que l’enganxeu a la pàgina codificada.

WooCommerce té un connector anomenat Products Slider que s’adapta al comerç electrònic. Funciona com un complement lliscant típic, però presenta alguns paràmetres i opcions més. Us animo a veure si us pot ajudar amb la visualització i la disposició dels articles.

Productes que es mostren en un control lliscant

Per Jan Saints (obra pròpia): CC-BY-2.0

Conclusió

Mostrar i organitzar elements al vostre lloc web de comerç electrònic de WordPress és molt senzill i fàcil amb aquests cinc mètodes. Si heu tingut dificultats per mostrar i organitzar productes a la vostra botiga en línia, ara hauríeu de començar a realitzar aquestes dues tasques amb molta facilitat. Només heu de triar un mètode que creieu que us pot funcionar i col·locar aquests productes a la vostra pàgina d'inici d'una manera més intel·ligent.

Referències

1. Mening. R. Com construir una botiga en línia amb WordPress i WooCommerce. websitesetup.org . Configuració del lloc web. (2017).
2. Andronaco R. Com crear una botiga en línia amb WooCommerce i Wordpress: guia senzilla per configurar perfectament un lloc web de comerç electrònic. (2017).
3. Rastaurius E., Disseny web Etoile. Catàleg de productes de comerç electrònic per a WordPress. wordpress.org. implecode. (2017).
4. WooCommerce. Codis curts inclosos amb WooCommerce. docs.woocommerce.com . WooCommerce. (2016).
5. Truman S., Tuan N., Ar3rev Software. Connector de classificació i visualització de productes de WooCommerce. wordpress.org. Programari Ar3rev. (2013).
6. YiThemes. Connector de desplaçament infinit Yith. wordpress.org. YITHEMES. (2017).
7. Razzak S. Una guia exclusiva per al complement lliscant de productes de WooCommerce. cloudways.com. Cloudways Ltd. (2016).
8. Balkhi S. Com crear fàcilment un control lliscant de WordPress sensible amb el soliloqui. wpbeginner.com . WPBeginner. (2014).

© 2017 Januaris Saint Fores