¿Por qué es necesario añadir nuevos campos a un producto?

Empecemos por el principio, ¿qué ventajas va a tener para tu ecommerce añadir nuevos campos al producto?

En algunas tiendas online nos llegarán los campos por defecto, pero en algunos casos, será conveniente añadir unos nuevos para:

• poder filtrar y que los clientes puedan encontrar resultados fácilmente. En el ejemplo que estamos mostrando nos puede interesar que se pueda filtrar por plantas que no necesiten mucha luz. Así estaremos ayudando al usuario a encontrar los productos que tenemos con ese requisito. Las categorías y subcategorías deben utilizarse para agrupar productos pero no para filtrar todas las características que pueda tener un producto. Si utilizas categorías en vez de crear campos personalizados, estarás usando una mala práctica y que a la larga no te va a beneficiar ni a ti ni a tus clientes.
• para facilitar la lectura al usuario en la ficha del producto. Así podremos colocar los nuevos campos en otro lugar distinto a la descripción corta o larga.
• en el listado de productos de una categoría podrás mostrar algunos de esos campos si son relevantes para el usuario.
• se podrán hacer búsquedas por esos campos.

Cómo añadir campos a un producto en el backend

Podrás añadir los campos que quieras con el plugin Advanced Custom Fields (ACF), tiene una versión gratuita y otra más avanzada. En el ejemplo que te voy a ir mostrando, voy a utilizar la versión avanzada (Pro), pero si lo que quieres es añadir campos sencillos te va a servir la opción gratuita.

Partimos del producto que puedes ver en la imagen:

En la descripción vienen una serie de características, y lo que queremos, es que algunos de esos elementos estén de forma independiente para poder filtrar. Vamos a filtrar por origen, y para ello vamos a crear un campo personalizado que se llame origen. Para ello seguimos los siguientes pasos:

1.- Instalamos el plugin ACF (Advanced Custom Fields)

2.- Creamos un grupo llamado productos, y dentro de este grupo, creamos un campo personalizado llamado Origen. El tipo de campo es Elige (es un selector). En opciones ponemos los valores que queremos que salgan en ese selector, cada opción en una nueva línea. También podemos escoger si queremos seleccionar valores múltiples o no. En este ejemplo, he seleccionado que sí, porque quiero que en Origen se pueda marcar por ejemplo Sudamérica y Europa, que me deje añadir las dos opciones.

3.- Asignamos donde se va a ver ese campo personalizado. En este ejemplo, decimos que se muestre siempre que sea Producto.

¿Cómo comprobamos si está bien creado?

Vamos a cualquier producto en la parte de administración de WordPress y vemos que tenemos un nuevo campo dentro de las opciones habituales de descripción larga, nombre…

Podemos ir rellenando las opciones deseadas dentro de cada producto. En mi ejemplo mi opción es Sudamérica. Si quisiera añadir más opciones tendría que mantener pulsado la tecla Control mientras selecciono las distintas opciones. Una vez escogido, solo hay que pulsar en Actualizar (el producto) para que los datos queden guardados.

Te he ido explicando todo el proceso de creación del campo personalizado desde el backend de WordPress pero aún no es visible en la web. Es lo que podrás ver a continuación.

Cómo añadir campos a un producto en el frontend

¿Cómo vamos a mostrar este campo personalizado en la web y visible a los visitantes? Eso es lo que vamos a ver en esta parte. Dependiendo del tema utilizado el proceso puede variar, te voy a dar una opción que te va a servir para cualquier tema y es modificando el archivo functions.php de tu tema. Aquí te cuento los pasos a seguir:

1.- Lo primero que tienes que tener claro es en que parte del producto quieres que se muestre ese campo personalizado, en nuestro ejemplo va a estar arriba del carrito. Esta guía visual de los hooks es muy útil: WooCommerce Visual Hook Guide: Single Product Page y te ayudará a saber como se llama el hook donde quieres colocar ese campo personalizado. Siguiendo la guía nuestro hook se va a llamar woocommerce_before_add_to_cart_form.

2.- En el archivo functions.php del tema insertamos el siguiente código (ten en cuenta que este código es para insertar el campo personalizado arriba del carrito).

add_action('woocommerce_before_add_to_cart_form', 'garciaferro_acf_carrito', 10);

function garciaferro_acf_carrito() {

the_field('origen');

}

Vemos que nos sale el resultado Sudamérica arriba del carrito, justamente donde le hemos indicado en la función.

Ahora nos falta añadirle el título del campo personalizado, añadirle espacios y algún detallito más.

Si no quieres modificar el archivo functions.php puedes instalar un plugin como Code Snippets

Y aquí se acaba el artículo de como añadir campos personalizados a un producto. Si te ha gustado, solo te queda compartirlo. En caso de que te queden dudas o quieras comentar algo, solo tienes que escribir más abajo.

La entrada Cómo añadir campos personalizados a un producto aparece primero en García Ferro.

Hay elementos en WooCommerce que sino se utilizan es mejor desactivarlos u ocultarlos, es el caso del SKU. ¿No te interesa controlar la gestión de stock? ¿Tienes pocos productos? En esos casos, no te interesa el SKU. Pero comencemos por el principio, ¿qué es el SKU en WooCommerce?

¿Qué es el SKU?

El SKU (Stock Keeping Unit) es un código alfanumérico (compuesto de letras y números) único. Gestionar el inventario cuando hay gran cantidad de productos es complejo y el SKU viene a ayudar en esa tarea. Un ejemplo muy básico de unas deportivas blancas modelo ABC y talla 43 podría ser: DEPOR-ABC-BLN-43. Como puedes ver cada producto variable tiene un SKU diferente según la variación de color y talla.

Es un código interno de la empresa, no es ningún código universal, por ejemplo como el EAN o UPC.

No me interesa el SKU pero si el EAN

Puede pasar que no quieras utilizar la funcionalidad del SKU pero sí que se muestre en la ficha del producto el código de barras (EAN). En este caso, te servirá la funcionalidad del SKU.

Solo tendrás que insertar el EAN correspondiente en esa casilla y cambiar el nombre de SKU con un plugin estilo Loco Translate (para que en la página ponga EAN y no SKU).

Y sino te gusta esta opción, puedes copiar la función de este link en el archivo functions.php sustituyendo la palabra IBSN por EAN

Como ocultar el SKU en WooCommerce

Si no quieres utilizar la funcionalidad del SKU ni que se muestre en ningún sitio en la tienda online, podrás hacerlo fácilmente añadiendo la siguiente función en el archivo functions.php del tema. Aunque en este caso siempre es recomendable tener un tema hijo, e insertar este código en el archivo functions.php del tema hijo para que no se pierdan los cambios si se actualiza el tema.

/** No mostrar SKU **/
add_filter( 'wc_product_sku_enabled', '__return_false' );

Ocultar el SKU en la página de producto

Puede pasar que te interese la funcionalidad, pero no quieres que los visitantes a la tienda online la vean. Si estás en ese caso, tienes las siguientes opciones:

1.- Insertar este código en el archivo functions.php de tu tema hijo:

/* No mostrar SKU en la página de producto */
function remove_product_page_sku( $enabled ) {
    if ( ! is_admin() && is_product() ) {
        return false;
    }

    return $enabled;
}
add_filter( 'wc_product_sku_enabled', 'remove_product_page_sku' );

2.- Ocultar el SKU por medio de css. Para ello, tendrás que insertar el siguiente código en el archivo style.css de tu tema hijo:

//Ocultar SKU
.sku_wrapper {
display:none;
}

No mostrar el SKU mediante plugin

Si no te gusta tocar el código, aquí te dejo otra opción para desactivar el SKU en WooCommerce. Es  con el plugin Remove SKU From Product detail page que tiene más de 3000 descargas. Si escoges esta opción solo tendrías que instalar el plugin, activarlo e ir a WooCommerce > Ajustes > SKU settings pages.

Y estas son las diferentes formas que tienes de ocultar el SKU en WooCommerce.

La entrada Ocultar SKU de productos en WooCommerce aparece primero en García Ferro.

En este artículo podrás ver argumentos con ejemplos reales de porque tienes que cambiar el diseño de tu tienda online cada cierto tiempo. Un ecommerce es un negocio, no es una página para que solo vean tus amigos o tus clientes offline y te digan que bonita es. Es para captar nuevos clientes, fidelizarlos y vender.

Ejemplos de tiendas online que han modificado su diseño en estos últimos 3 años

Podrás ver como han variado los ecommerce de las siguientes empresas en estos tres años, como han ido modificando su negocio, porque al final el cambio de diseño es debido a un cambio de estrategia empresarial. Una empresa no debe de tener siempre los mismos objetivos, por eso la tienda online tiene que ir orientada a conseguir esos fines e ir evolucionando con la empresa.

Muroexe

En el 2017 Muroexe enseñaba más su logo, estaba potenciando su marca. Sus productos están orientados a jóvenes profesionales pero sobretodo hombres. Zapatillas cómodas para llevar al trabajo.

En el 2020 siguen con esa misma filosofía de comodidad pero ya ampliado a un catálogo más amplio de productos (textil, accesorios) y con una colección para hombre y otra para mujer. Han reestructurado sus categorías y ya no se muestran como nombres de colecciones sino que han dejado un menú sencillo con Hombre, Mujer, Textil, Accesorios y Outlet. Han añadido chat, opiniones (también de medios de prensa) y fotos de instagram.

Solamente con los cambios efectuados en la tienda online se puede ver como ha ido evolucionando la empresa. Su esencia no ha desaparecido sino ha ido evolucionando con nuevos productos que siguen el mismo estilo minimalista y de calidad con un mejor soporte online.

Material Escolar

MaterialEscolar.es es una tienda online que en el año 2007 tenía un menú con tantas categorías que no le cabían y ocupaban dos líneas. Enseñaba la papelería online más vendida, las novedades, la más vista y la recomendada. Muchos productos y muchos apartados, incluso en el lateral derecho.

En el 2020 es una tienda online que va más al grano. Entienden que la página de inicio solo es un paso previo para llegar al producto que buscan. Por lo tanto, desaparece el menú, dan la opción de búsqueda por marcas y enseñan las categorías más buscadas. Respecto al 2017, solo muestran 4 productos más vendidos, ningún producto más.

Cuando la tienda online tiene miles de productos, la mejor opción no es mostrar todos los que se puedan en la página de inicio, al final se satura esa página con tanta información. La mejor opción es mostrar las categorías y allí ya mostrar los productos. Otra cosa es eliminar el menú principal, han pasado de tener dos líneas de menú a eliminarlo por completo, ahí arriesgando. Yo pondría un menú hamburguesa, discreto o un menú en el footer, pero nunca prescindiría de él. Si lo hacen será que lo tienen estudiado y habrán visto por medio de mapas de calor que podrían prescindir de él (eso espero).

NutriTienda

NutriTienda es el ejemplo perfecto de una tienda online poco trabajada a un diseño cuidado y optimizado para vender. Por algo está entre las 1000 tiendas que más venden en España según el ranking realizado por el Observatorio de E-commerce y Transformación Digital.

Aspectos a tener en cuenta para mejorar y optimizar tu tienda online

Has podido ver en los ejemplos anteriores lo que han evolucionado las tiendas online, que cada vez más se orientan al usuario, no es buscar un diseño bonito, sino optimizar el ecommerce hacia el visitante. A continuación podrás ver mejoras que puedes hacer en tu tienda online para convertir más y así vender más.

Móvil

Porque el consumo de contenidos ha cambiado, por ejemplo, hace 3 años se empezaba a usar el movil para acceder a internet pero hoy en día es imprescidible que tu página esté diseñada para entorno movil y tablet. Sino estarás perdiendo ventas.

Ya no solo tiene que estar diseñada para movil sino que tiene que ser fácil y sencillo para el usuario, hemos avanzado un pasito más y cada día más los diseñadores tenemos que trabajar más y mejor en estos dispositivos.

Según el VII Estudio Anual de eCommerce en España 2020 ya son más de 20 millones de españoles entre los 16 y 70 años los que compran online, lo que supone casi un 70% del total de la población de esta franja. De estos el 94% se conecta por móvil y el 93% por PC. El ordenador va perdiendo peso como dispositivo de compra online a favor del móvil y tablet. Los menores de 45 años son de móvil y los mayores de esa edad de ordenador.

Cada año hay nuevos informes con nuevas estadísticas y los hábitos de compra van cambiando, por eso es importante estar al día y hacer cambios orientados a tu público objetivo.

La tecnología evoluciona, ¿tú tienda online no evoluciona?

Internet no funciona como un negocio físico, es todo mucho más rápido. Los hábitos de compra, la forma de compra… Cada año se están incorporando nuevos usuarios con móvil. La venta online tiene la ventaja de que puedes llegar a todo el mundo, pero como desventaja tienes que adaptarte rápido y estar continuamente innovando. Tu objetivo tampoco tiene que ser llegar a todo el mundo sino a tu público.

En internet no existe el prestigio, el que esté más arriba de buscadores es el que se lleva el pastel. Eso no quiere decir que no puedas fidelizar parte de tus clientes, que repitan compra y que una marca reconocida vende, pero no sola, ¿no ves anuncios de esas marcas? eso significa que invierten en publicidad. Puedes pensar, yo soy una tienda pequeñita, no tengo presupuesto para invertir en publicidad. No tengo presupuesto para cambiar el diseño cada poco. Deja la palabra no tengo por yo voy. Si quieres vender en internet tienes que invertir como si fuera una tienda física.

Pero ten en cuenta que si en un negocio de barrio tienes competencia, a nivel internet el pastel es más grande pero también tienes mucha más competencia. No quieras pretender tener una tienda desde hace 3 años y olvidarte de ella, vende sola? en un local fisico vende solo?

Tu tienda online tiene que ir evolucionando igual que tu negocio.

Conoce a tus visitantes

Hoy día, además de Analytics puedes disponer de mapas de calor (heatmaps) , por ejemplo Hotjar donde se puede ir viendo por donde navega el usuario y así corregir y optimizar aspectos de nuestra tienda online. Vemos donde no avanzan, partes donde no van… mediante esta herramienta es importante ir optimizando la página porque cada sector es un mundo y así conocer lo que prefieren tus visitantes. Recuerda que tus visitantes son tus futuros clientes, por eso te interesa conocer que productos prefieren, donde tienen más dificultades de navegar por la página, donde pulsan más…

Conclusión

Una tienda online tiene que ir cambiando con el paso de los años, por un lado avanzar igual que crece el negocio, por otro lado, optimizarse según las nuevas tecnologías y, por último, saber quien es tu cliente online.  Un ecommerce puede ser rentable o no serlo, de ti depende.

La entrada ¿Por qué tienes que cambiar el diseño de tu tienda online de hace 3 años? aparece primero en García Ferro.

Tipos de productos

Vamos a ver todos los tipos de productos que puedes añadir en tu tienda online contruída con WooCommerce. Podrás crear productos simples, afiliados, agrupados y variables. ¿En qué consiste cada uno de ellos? Lo podrás ver a continuación.

Productos simples

El producto simple es el más común y habitual de WooCommerce. La gran mayoría de las tiendas online tienen este tipo de producto. ¿Qué datos podrás añadir en este producto? El precio, otro precio con descuento, atributos, productos relacionados entre otras opciones. Los atributos que podrás introducir son colores, tamaños, o cualquier otro dato técnico que te interesa que esté visible en la ficha del producto.

Mucha gente cree que en una tienda online solo se pueden vender productos físicos y no es así. En la imagen de arriba puedes ver que hay una casilla para Virtual y otra para Descargable.

Si seleccionas descargable vas a vender un producto que es un archivo, por ejemplo pdf o formato imagen y al efectuar el pago, el cliente se lo va a poder descargar. Solo tienes que subir el archivo, indicar el límite de descargas y la caducidad en caso de que te interesen estas opciones.

En el caso de que selecciones la opción de Virtual no se va a descargar nada, puede ser por ejemplo, un servicio o un curso online. Es un producto que no se envía ni se descarga.

Productos agrupados

En ocasiones y con determinados productos interesa hacer packs. Un producto agrupado une a dos productos que ya existen en la web y se unen como uno solo. En este caso, no hace falta poner el precio, porque ya suma el de los dos productos. En el ejemplo de la imagen puedes ver una mesa auxiliar y una mesa de cocina que se venderán juntas. Esta opción es ideal para promociones.

Productos afiliados

Un producto afiliado es un producto externo que no tienes ni físicamente, ni para descargar ni para ofrecer como servicio, sino que son otros los que venden ese producto. Hay muchas empresas que ofrecen comisiones a terceros para vender sus productos y uno de ellos bastante conocido es Amazon. Desde tu tienda online envias a esos usuarios a su página web y si esos visitantes terminan comprando ese producto te llevas una comisión por esa venta.

Productos variables

El producto variable dispone de variaciones, es decir, diferente precio, stock… según sus atributos. Para que lo entiendas fácilmente, por ejemplo, es la típica camisa que tiene colores y tallas, y, un precio y stock diferente por cada color y talla.

Este producto evita tener que añadir un producto de (siguiendo el ejemplo) Camisa azul talla S, otro de Camisa azul talla M y así hasta todos los que se quiera. Todo queda concentrado en un único producto el cual se va a posicionar mejor (se evita contenido duplicado) y será más fácil de gestionar.

Para que quede más claro te enseño unas imágenes con un ejemplo de una mesa.

La parte de atributos es la siguiente:

En este ejemplo tenemos dos atributos, cada uno de ellos con un valor diferente.

Siguiendo con la pantalla de variaciones:

para los valores de medidas 160×80 cm y color bambú podemos personalizar su precio, precio rebajado, stock, peso y dimensiones.

Otros tipos de productos de WooCoommerce con plugins

Hay ocasiones que puede que no te lleguen los tipos de productos que vienen con WooCommerce. En ese caso, tienes alternativas y son añadiendo plugins. Aquí te dejo alternativas:

• Suscripciones: si quieres crear un producto con un pago durante un tiempo limitado o pagos recurrentes este es tu plugin.  Ver plugin.
• Eventos o reservas: si necesitas reservar habitaciones de hotel, o eventos para varias personas aquí tienes este plugin. Podrás configurar precios diferentes para grupos, días o personas.
• Membresías: podrás vender membresías y podrás ofrecer acceso restringido a diferentes niveles de la membresía. Ver plugin.
• Subastas: sí, puedes crear un producto subastas con WooCommerce y este plugin. Te permite crear diferentes tipos de subastas.

Resumen

WooCommerce dispone de 4 diferentes tipos de productos, pero si por alguna causa, se te quedan cortos, siempre lo podrás complementar con plugins, añadiendo numerosas funcionalidades. Eso de WooCommerce no se adapta al tipo de producto que quiero en mi tienda online como que ya no cuela, ¿no?

La entrada Tipos de productos que puedes añadir a tu WooCommerce aparece primero en García Ferro.

Hay muchas ocasiones que sólo queremos mostrar un catálogo de nuestros productos pero no queremos que se pueda comprar. Puede ser que la opción de compra la queramos activar más adelante o queramos que quede en forma catálogo de forma permanente. ¿Se puede convertir WooCommerce en un catálogo? Sí, se puede y aquí verás como se hace.

Con WooCommerce puedes subir los productos de la forma tradicional y después mediante plugins convertirlo en un catálogo. Vamos a ver tres formas diferentes de hacerlo, solo tienes que escoger la que más te guste. Las dos primeras es mediante plugin y la tercera es con modificaciones en el archivo functions.php.

WooCommerce Catalog Mode

Es un plugin de pago con el que podrás cambiar de modo catálogo a tienda y viceversa de forma muy fácil. Puedes también decidir si quieres mostrar o no el precio. Tendrás opciones de personalización de botones. Como puedes ver en la imagen de abajo, no hay botón de compra por ningún sitio y solo está visible el precio.

[/et_pb_text][et_pb_button button_url=»https://1.envato.market/me79O» url_new_window=»on» button_text=»Ver plugin» _builder_version=»4.6.6″ _module_preset=»default»][/et_pb_button][et_pb_text _builder_version=»4.6.6″ background_size=»initial» background_position=»top_left» background_repeat=»repeat» custom_padding=»77px|||||»]

YITH WooCommerce Catalog Mode

Es un plugin gratuito pero también hay una versión premium más completa. La versión gratuita te llegará si no quieres ocultar precios. Va a ocultar el botón de «añadir al carrito» en todas las páginas de producto y en otras páginas como tienda, categoría o etiquetas. Además va a ocultar las páginas del Carrito y de Finalizar la compra. Lo he instalado con algún cliente y funciona bien.

[/et_pb_text][et_pb_button button_url=»https://es.wordpress.org/plugins/yith-woocommerce-catalog-mode/» url_new_window=»on» button_text=»Ver plugin» _builder_version=»4.6.6″ _module_preset=»default»][/et_pb_button][et_pb_text _builder_version=»4.6.6″ background_size=»initial» background_position=»top_left» background_repeat=»repeat» custom_padding=»77px|||||»]

Con modificaciones en functions

La última opción es sin plugins, si prefieres evitarlos aquí tienes una buena opción, sólo es añadir código.

remove_action( 'woocommerce_after_shop_loop_item',

woocommerce_template_loop_add_to_cart', 10 );

remove_action( 'woocommerce_single_product_summary','woocommerce_template_single_add_to_cart', 30 );

remove_action( 'woocommerce_simple_add_to_cart','woocommerce_simple_add_to_cart', 30 );

remove_action( 'woocommerce_grouped_add_to_cart','woocommerce_grouped_add_to_cart', 30 );

Solo tendrás que insertar el siguiente código en tu archivo functions.php.

Antes de insertar el código el producto tiene el botón de añadir el carrito, como puedes ver en la siguiente imagen.

Una vez aplicado añadido el código, la ficha del producto cambia, ya no está el botón azul de añadir al carrito. Te quedaría como en la siguiente imagen.

Puedes decir, vale, no se puede comprar, pero es que yo tampoco quiero que se vea el precio. Con un estilo css también lo podrás solucionar. Para ello en el archivo css de tu plantilla solo tendrás que insertar el siguiente código:

.woocommerce div.product p.price, .woocommerce div.product span.price { display:none;}

y listo, ya no se verá el precio.

Esta última opción te va a dar más trabajo que instalar y configurar un plugin pero no tendrás que estar pendiente de ninguna actualización.

[/et_pb_text][/et_pb_column][/et_pb_row][/et_pb_section]

La entrada Como activar el modo catálogo en WooCommerce aparece primero en García Ferro.

¿Quieres cambiar el texto de «Productos relacionados» en la ficha del producto de WooCommerce? ¿O cómo poner productos relacionados en WooCommerce? ¿O como eliminarlos? ¿Quieres modificar el número de productos que se muestran? ¿Quieres que solo se vean productos que pertenezcan a la misma categoría? En este artículo podrás ver las respuestas a todas estas preguntas.

Cambiar el título de productos relacionados

Hay que reconocer que el texto de Productos relacionados no incita mucho a la venta. Palabras como «No te olvides de…», «Otros clientes han visto…» llaman más la atención del visitante y se trata de eso, que si no les convence el producto que han visto puedan ver abajo otras opciones y que el título les llame la atención es esencial para conseguir ventas.

¿Cómo se cambia? Solo tienes que ir al archivo functions.php e insertar el código que te indico a continuación.

¿Cómo puedes localizar el archivo functions.php? En la parte de administración vas a Apariencia -> Editor de temas y ahí buscas functions.php

// Cambiar el texto "Productos relacionados de WooCommerce"
add_filter('gettext', 'change_rp_text', 10, 3);
add_filter('ngettext', 'change_rp_text', 10, 3);
function change_rp_text($translated, $text, $domain)
{ if ($text === 'Related products' && $domain === 'woocommerce') {
$translated = esc_html__('NUEVO TEXTO', $domain);}
return $translated;}

Sustituye el texto «NUEVO TEXTO» por lo que quieras poner y listo. En el ejemplo de la imagen hemos puesto «Otros clientes han visto…»

¿A qué es fácil?

IMPORTANTE para que tengas en cuenta: No es recomendable que insertes un código en el archivo functions.php sin tema hijo. Cada vez que actualices el tema va a perder estos cambios. Lo ideal: tener un tema hijo. Si no tienes el tema hijo y no te interesa crearlo otra opción es instalar un plugin para insertar ese código. Uno que te va a servir es Code Snipeets

Como poner productos relacionados en Woocommerce

Lo más fácil que te vas a encontrar es poner productos relacionados en woocommerce. Una vez que tengas insertado más de un producto, automáticamente ya se van a mostrar al final de la ficha. No vas a tener que hacer nada adicional.

¿Quieres que se vean productos relacionados de la misma categoría o de la misma etiqueta?

Por defecto en WooCommerce se ven los productos relacionados de forma aleatoria por categoría y etiquetas. Pero en ocasiones esto no tiene sentido para nuestros productos. Sí, por ejemplo, tenemos una categoría de ciclismo y otra de motos, no tiene sentido que al ciclista le muestren productos de motos, está buscando productos relacionados con las bicis pero si tienen la misma etiqueta puede suceder. Para corregir esto solo tenemos que ir al archivo functions.php (arriba del artículo puedes ver como se accede) e insertar el siguiente código si quieres que se muestren los productos relacionados teniendo en cuenta las categorías:

/* Mostrar productos relacionados en WooCommerce sólo por categorías */
add_filter ('woocommerce_product_related_posts_relate_by_tag', function () {
return false;
});

Si prefieres que se muestren los productos relacionados teniendo en cuenta solo las etiquetas, el código, en este caso, es el siguiente:

/* Mostrar productos relacionados en WooCommerce sólo por etiquetas */
add_filter ('woocommerce_product_related_posts_relate_by_category', function () {
return false;
});

Con estos códigos podrás adaptar y personalizar los productos relacionados según tus preferencias.

Como eliminar productos relacionados en WooCommerce

Aunque no es lo habitual, hay ocasiones que no te interese que se muestren los productos relacionados dentro de la ficha del producto. En ese caso solo tendrás que añadir un snippet dentro del archivo functions.php.

remove_action ('woocommerce_after_single_product_summary', 'woocommerce_output_related_products', 20);

En una categoría

El código de arriba no muestra todos los productos relacionados pero puedes estar en el caso de que no quieres que se muestren, pero solo en una categoría. En este caso el código a insertar será éste:

add_action ('wp_print_styles', function () {
if (has_term (ID, 'product_cat'))
echo '<style>.related.products{display:none}</style>';
}, 10);

Deberás de  cambiar la palabra ID por el número de la categoría que corresponda.

En varios productos

También puedes estar en el caso de que no quieras mostrar los productos relacionados pero solo en unos determinados productos. ¿Cómo sería el código? Aquí lo tienes.

add_action ('wp_print_styles', function () {
if (in_array (get_the_ID(), array(IDproducto1, IDproducto2)))
echo '<style>.related.products{display:none}</style>';
}, 10);

Sólo tendrías que cambiar el IDproducto1 y el IDproducto2 por los números id de los productos. Si quieres que sean más productos, solo tienes que insertar comas e ir añadiendo todos los id que necesites.

Cambiar el número de productos relacionados

En WooCommerce se muestran por defecto 4 productos personalizados dentro de la ficha de cualquier producto. En ocasiones, puede interesarte mostrar un número distinto de productos y para ello solo tendrás que añadir el siguiente snippet dentro de tu archivo functions.php.

/* Cambiar el número máximo de productos relacionados en la ficha de producto */
function woo_limite_relacionados () {
global $product;

$args = array (
'post_type' => 'product',
'no_found_rows' => 1,
'posts_per_page' => 4,
'ignore_sticky_posts' => 1,
'orderby' => $orderby,
'post__in' => $related,
'post__not_in' => array($product->id)
);
return $args;
}
add_filter ('woocommerce_related_products_args', 'woo_limite_relacionados');

En vez del número 4 ponemos el número que nos interese y listo, ya estaría.

Y hasta aquí este artículo con lo más interesante sobre los productos relacionados de WooCommerce. Si te has quedado con alguna duda puedes comentarla más abajo en la sección de Comentarios.

La entrada Productos relacionados con WooCommerce: mejoras y personalizaciones aparece primero en García Ferro.

Para vender productos online, WooCommerce es una muy buena opción. Bajo el paragüas de WordPress permite la compra online de cualquier tipo de producto, ya sea físico o virtual. A la hora de la venta puede ser determinante los contenidos y distribución de la ficha del producto. Por este motivo es importante no quedarse con el diseño que viene por defecto y personalizarlo. Así que, sí, vas a poder ver como se personaliza la ficha del producto en WooCommerce y Divi.

Diseño por defecto de la ficha de producto WooCommerce

En la imagen de abajo puedes ver como se ve cualquier producto usando WooCommerce sin ninguna modificación.

A simple vista es un diseño limpio y puede parecer que está bien, pero en la práctica te aconsejo cambios. Después de la imagen te comento pegas que le veo a este diseño.

La descripción, información adicional y valoraciones están en pestañas y para verlas tienes que pulsar en ellas, diseñado así el visitante se puede perder datos valiosos para animarle a la compra.

Otro defecto que le veo a este diseño es que la imagen es demasiado grande, si quieres verla ampliada solo tienes que acercarte a la lupa, por lo que está ocupando demasiado espacio. Lo de la imagen depende del sector, hay excepciones donde es recomendable que sea grande, pero generalmente llega más pequeña.

¿Vamos a darle una vuelta a este diseño? Sí, te voy a mostrar otra propuesta con Divi.

Personalizar la página del producto con Divi

Divi es un maquetador visual que nos va a ayudar a diseñar la página tal y como queremos.

Al estar basado en «arrastrar y soltar» cualquier persona podrá modificar el diseño, añadirle cosas u otras modificaciones que se quieran hacer en cualquier momento.

Proceso paso a paso para crear tu página de productos personalizada con Divi

Para ello vamos a Divi -> Generador de temas -> Agregar nueva plantilla. Ahí escogemos en Productos -> Todos los productos -> Crear plantilla. Se verá lo mismo que en la imagen.

Pulsamos en Añadir cuerpo personalizado y vamos añadiendo poco a poco los elementos.

En este diseño vamos a insertar tres columnas donde reducimos la foto, en la segunda columna título, puntuación y texto corto. En la última columna insertamos el precio, botón de comprar y datos interesantes para la comprar.

A continuación añadimos información adicional y más contenido interesante.

Como último contenido insertamos las opiniones de los clientes para dar seguridad a la compra. En este caso no lo he añadido, pero también se podría incorporar productos relacionados para finalizar la ficha de producto.

Con todas estas modificaciones tendremos una ficha completamente personalizada y diferente a lo que nos ofrece WooCommerce por defecto.

IMPORTANTE: una vez le demos a guardar, se va a sustituir el diseño por defecto de WooCommerce de como se muestran todos los productos (el que te enseño arriba de todo) por éste.

Resultado final

He mantenido la misma esencia del diseño limpio, solamente he hecho una reorganización de elementos para eliminar tanto espacio blanco y optimizando los elementos para lograr el objetivo de una mayor conversión y que se traduzca en más ventas.

Pequeños cambios pueden lograr grandes resultados

[/et_pb_text][et_pb_blurb title=»¿Quieres el archivo json de este diseño?» use_icon=»on» font_icon=»%%72%%» icon_color=»#73bc2d» content_max_width=»1100px» module_class=»anuncito» _builder_version=»4.6.5″ _module_preset=»default» header_level=»h3″ header_font_size=»24px» body_text_align=»center» background_color=»rgba(115,188,45,0.1)» text_orientation=»center» module_alignment=»center» custom_padding=»30px|50px|30px|50px|false|false» custom_css_main_element=»||»]

Deja tu email y te enviaré gratis el archivo json de esta ficha de producto personalizada.

[/et_pb_blurb][/et_pb_column][/et_pb_row][/et_pb_section]

La entrada Como personalizar la ficha de producto en WooCommerce + Divi aparece primero en García Ferro.

En cualquier tienda online es esencial cuidar todo el proceso de venta, no queremos que la compra se pierda en el último momento. En este artículo vamos a tratar los métodos de pago, cuales son los habituales y porqué te aconsejamos Google Pay y Apple Pay.

¿Qué métodos de pago se insertan en una tienda online?

Cada tienda online tiene un público concreto y si conoces sus preferencias insertarás un método de pago u otro. Hay tiendas en las que es impensable añadirle el pago a contrareembolso, sin embargo hay otras que necesitan dar este servicio. Todo depende de tu público objetivo, lo acostumbrados que estén al pago online y sus preferencias.

Otro detalle que es importante que tengas en cuenta, es si el margen de tu producto soporta las comisiones del método de pago que quieras añadir. No es cuestión de añadir métodos de pago y después añadirles esas comisiones al cliente. No te lo recomiendo. Hay sí que puedes perder ventas en el último momento.

Por último y no menos importante, si operas en países con distintas divisas tendrás que tener en cuenta que tus beneficios se pueden ver mermados por cambios en la moneda.

A continuación, puede ver los métodos de pago que se suelen utilizar por defecto en una tienda online y los que no se utilizan tan a menudo.

Métodos de pago habituales

TPV: es el pago con tarjeta. Es el método de pago más extendido y tendrás que contratarlo en tu banco.

Transferencia bancaria: es el método de pago ideal para quien no quiera facilitar su tarjeta bancaria o no dispongan de una.

PayPal: está muy extendido por su facilidad de uso. El cliente que tiene creada la cuenta PayPal podrá usarla en todos los sitios web que acepten ese método de pago, por lo que está muy recomendado para dar alternativas a tus clientes. Con PayPal también hay la opción de que se pueda pagar con tarjeta sin estar dado de alta en esta plataforma. En este momento te puedes estar preguntando, ¿para que se instala también el TPV si aquí ya pueden pagar con tarjeta? Es por el tema de las comisiones, suelen ser más alta que en cualquier TPV virtual.

Estos son los 3 métodos de pago que suelo insertar por defecto en cualquier tienda online.

Métodos de pago extra

A mayores, como comentaba más arriba, dependiendo del sector y público objetivo hay otros métodos de pago muy aptos para determinados sectores:

Contrareembolso: se paga al recibir el paquete. Ideal para sectores de muebles o donde la devolución tenga un precio alto. Así el cliente podrá comprobar in situ que lo que recibe es lo que esperaba.

Stripe: es similar a PayPal con las comisiones más bajas. Se paga dentro de tu página, por lo que puede ser una ventaja o desventaja, según se mire. Hay gente que le da más confianza ir a la página web de un banco o ver el logo de PayPal y otras personas prefieren no desplazarse a otra pestaña. Stripe se suele utilizar si la tienda online está orientada para gente joven.

Nuevos métodos de pago: Google Pay y Apple Pay

Desde hace poco se están insertando nuevos métodos de pago en las tiendas online, como Google Pay y Apple Pay.

Tienen una gran ventaja respecto a otros métodos, son sin comisiones. Pero no es la única.

Otra superventaja es que tiene la tarjeta de crédito o PayPal integrado, por lo que cuando se hace una compra con un clic está hecha. Y en móvil, ¿quién se pone a teclear su tarjeta de crédito? Teniendo en cuenta que cada vez se navega y compra a través del móvil, es un método de pago que tendrás que tener muy en cuenta.

¿Quieres más ventajas? El cliente no tendrá que insertar su dirección de pago y facturación, pues ya la cogerá automáticamente de los datos de Google Pay. Son pedidos en 1-click.

Y, por último otra ventaja es que cada vez hay más usuarios que tengan una cuenta en Google Pay o Apple Pay. Para comprar cualquier aplicación lo tienes que tener y cada vez lo tienen más tiendas online.

Estas dos tres grandes ventajas que es interesante que tengas en cuenta. No pierdas ventas por no tener integrado estos métodos de pago.

Plugins para Woocommerce que incluyen Google Pay y Apple Pay

Google Pay + Stripe Payment Gateway for WooCommerce

Con este plugin tus clientes podrán pagar con Google Pay. Como bien dice el plugin podrás incrementar la conversión desde el móvil en un 350%.

[/et_pb_text][et_pb_button button_url=»https://1.envato.market/vaVPe» url_new_window=»on» button_text=»Ver plugin» button_alignment=»center» _builder_version=»4.3.3″ custom_button=»on» button_text_color=»#ffffff» button_bg_color=»#76b92e» button_border_color=»#76b92e» custom_margin=»36px|||||» custom_padding=»4px|||||»][/et_pb_button][et_pb_text _builder_version=»4.3.3″ background_size=»initial» background_position=»top_left» background_repeat=»repeat» custom_margin=»75px|||||»]

Stripe

Sí, con el plugin para woocommerce de stripe podrás integrar Google Pay y Apple Pay.

[/et_pb_text][et_pb_button button_url=»https://woocommerce.com/products/stripe/» url_new_window=»on» button_text=»Ver plugin» button_alignment=»center» _builder_version=»4.3.3″ custom_button=»on» button_text_color=»#ffffff» button_bg_color=»#76b92e» button_border_color=»#76b92e» custom_margin=»36px|||||» custom_padding=»4px|||||»][/et_pb_button][et_pb_text _builder_version=»4.3.3″ background_size=»initial» background_position=»top_left» background_repeat=»repeat» custom_margin=»75px|||||»]

Módulos para prestashop

Con prestashop hay muchos más módulos para elegir. A continuación te muestro algunos de ellos.

Apple Pay

Con este módulo incluso se podrá pagar con touch id. La única pega es que es un poco caro.

[/et_pb_text][et_pb_button button_url=»https://addons.prestashop.com/es/pago-tarjeta-carteras-digitales/23514-apple-pay.html» url_new_window=»on» button_text=»Ver módulo» button_alignment=»center» _builder_version=»4.3.3″ custom_button=»on» button_text_color=»#ffffff» button_bg_color=»#76b92e» button_border_color=»#76b92e» custom_margin=»36px|||||» custom_padding=»4px|||||»][/et_pb_button][et_pb_text _builder_version=»4.3.3″ background_size=»initial» background_position=»top_left» background_repeat=»repeat» custom_margin=»75px|||||»]

Google Pay

Es un módulo diseñado para que se pueda pagar los productos con Google Pay.

[/et_pb_text][et_pb_button button_url=»https://addons.prestashop.com/es/pago-tarjeta-carteras-digitales/46247-google-pay-payment-gateway.html» url_new_window=»on» button_text=»Ver módulo» button_alignment=»center» _builder_version=»4.3.3″ custom_button=»on» button_text_color=»#ffffff» button_bg_color=»#76b92e» button_border_color=»#76b92e» custom_margin=»36px|||||» custom_padding=»4px|||||»][/et_pb_button][/et_pb_column][/et_pb_row][/et_pb_section]

La entrada Google Pay y Apple Pay, ventajas de integrarlo en tu tienda online aparece primero en García Ferro.

¿Quieres tener más suscriptores interesados en tus productos? La norma número uno es escribir contenido interesante en el blog. Si no les interesa lo que tienes en el blog, menos les va a interesar dejarte su correo electrónico. Cuando una persona te deja su email, te está dando lo más valioso que te puede dar, la forma de contactar con él. Por este motivo, es importante ser cuidadoso y no enviar correos por enviar, o machacarlo con spam. Eso no funciona. Envíale cosas de su interés.

Plugins suscriptores para Woocommerce

Dicho esto, vamos al tema. Hay plugins para Woocommerce que te van a ayudar a conseguir más suscriptores.

Hay visitantes a tu página que les gusta el contenido pero no ven la opción de suscribirse. Estarás diciendo: lo tengo muy visible o nada más entrar se ve. Vale, pero, puede ser que cuando entraron estaban buscando la información que les interesaba y no estaba en su mente en suscribirse, por lo que fueron a lo de su interés. Y si tienes la opción de suscribirse al final de la página, debes saber que pocos visitantes se leen toda la página hasta el final.

Bloom

Es un plugin de Elegant Themes muy completo. Tiene diseños predefinidos para captar el email. Otro punto fuerte que tiene, es que puedes colocarlos en zonas muy diferentes de la web (popup, sidebar, abajo del contenido…). Además, en los popups puedes indicar si quieres que aparezcan a x segundos, al llegar al final de la página… Como ves tienes muchas opciones que puedes ir probando (sí, también te permite hacer test A/B). Otra cosa que valoro mucho de este plugin, es la facilidad de integración con otros herramientas de mailing (Mailchimp, ActiveCampaing, HubSpot, mailerlite… y muchas más).

[/et_pb_text][et_pb_button button_url=»https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23775&url=21923″ url_new_window=»on» button_text=»Ver plugin» _builder_version=»4.2.2″ custom_button=»on» button_text_color=»#ffffff» button_bg_color=»#76b92e» button_border_color=»#76b92e» custom_margin=»36px|||||» custom_padding=»4px|||||»][/et_pb_button][et_pb_text _builder_version=»4.2.2″ background_size=»initial» background_position=»top_left» background_repeat=»repeat» custom_margin=»50px||45px||false|false»]

Win Wheel

Si buscas algo llamativo para que se suscriban los visitantes a tu web, aquí tienes esta maravillosa ruleta. La puedes conectar con Mailchimp para almacenar los correos electrónicos y enviarles newsletters, promociones, descuentos…

[/et_pb_text][et_pb_button button_url=»https://1.envato.market/B35k4″ url_new_window=»on» button_text=»Ver plugin» _builder_version=»4.2.2″ custom_button=»on» button_text_color=»#ffffff» button_bg_color=»#76b92e» button_border_color=»#76b92e»][/et_pb_button][et_pb_text _builder_version=»4.2.2″ background_size=»initial» background_position=»top_left» background_repeat=»repeat» custom_margin=»50px||45px||false|false»]

Lucky Wheel

Es otra versión similar a la anterior, solo que permite más implementaciones, además de Mailchimp puedes hacerlo con Active Campaing o SendGrid.

[/et_pb_text][et_pb_button button_url=»https://1.envato.market/ZGVe0″ url_new_window=»on» button_text=»Ver plugin» _builder_version=»4.2.2″ custom_button=»on» button_text_color=»#ffffff» button_bg_color=»#76b92e» button_border_color=»#76b92e»][/et_pb_button][et_pb_text _builder_version=»4.2.2″ background_size=»initial» background_position=»top_left» background_repeat=»repeat» custom_margin=»50px||45px||false|false»]

SumoMe

Plugin gratuito y muy conocido. Funciona muy bien, tienes muchas opciones pero para mi tiene un pero y es que me hacía mucho más lenta la página web. Por este motivo dejé de utilizarlo, aunque por lo demás es fantástico.

[/et_pb_text][et_pb_button button_url=»https://es.wordpress.org/plugins/sumome/» url_new_window=»on» button_text=»Ver plugin» _builder_version=»4.2.2″ custom_button=»on» button_text_color=»#ffffff» button_bg_color=»#76b92e» button_border_color=»#76b92e»][/et_pb_button][et_pb_text _builder_version=»4.2.2″ background_size=»initial» background_position=»top_left» background_repeat=»repeat» custom_margin=»50px||45px||false|false»]

Y esta aquí estos plugins suscriptores pra Woocommerce. Son de estilos diferentes para que escojas el que mejor se adapte a tu web, además de que tienes opciones gratuitas y de pago. Si te han gustado, solo te queda compartirlos en tus redes sociales

[/et_pb_text][/et_pb_column][/et_pb_row][/et_pb_section]

La entrada Aumenta tus suscriptores fácilmente con estos plugins para Woocommerce aparece primero en García Ferro.

El 2 de enero, desde Prestashop descubrieron un malware llamado XsamXadoo Bot. Este malware puede ser utilizado para tener acceso a una tienda online y tomar el control de la misma.

Creen que el bot utilizó una conocida vulnerabilidad de la herramienta PHP, PHPUnit, que ha sido reportada como CVE-2017-9841.

Esto significa que un atacante:

• puede leer el contenido de tu base de datos para robar datos
• puede cargar archivos en tu servidor
• puede modificar archivos en tu servidor

Por este motivo es importante revisar las tiendas desarrolladas en prestashop en las versiones 1.6 y 1.7 y asegurarse que no tienen esa vulnerabilidad y por tanto atacadas.

Para más información, consulta este documento oficial de PrestaShop.

Si tienes contratado el Servicio de Mantenimiento de Tiendas PrestaShop, la incidencia ya está solucionada en tu web.

Si no tienes contratado el Servicio de Mantenimiento de Tiendas PrestaShop, puedes contactar conmigo para que te facilite un presupuesto para solucionar esta incidencia, o contratar el servicio de mantenimiento y así olvidarte de estas cuestiones técnicas.

La entrada Aviso de seguridad para tiendas online Prestashop 1.6 y 1.7 aparece primero en García Ferro.