WooCommerce Archivos - García Ferro https://garciaferro.es/woocommerce/ Diseñadora web freelance Mon, 20 Jun 2022 21:51:13 +0000 es hourly 1 https://garciaferro.es/wp-content/uploads/2024/01/cropped-isabelgarcia-2-32x32.png WooCommerce Archivos - García Ferro https://garciaferro.es/woocommerce/ 32 32 Cómo añadir campos personalizados a un producto https://garciaferro.es/como-anadir-campos-personalizados-a-un-producto/ https://garciaferro.es/como-anadir-campos-personalizados-a-un-producto/#respond Tue, 21 Jun 2022 07:00:04 +0000 https://garciaferro.es/?p=1782 Un producto por defecto tiene unos campos predeterminados, como son el título, la descripción, foto, galería, precio… pero en ocasiones es necesario que existan nuevos campos para complementar el producto. En este artículo voy a ir mostrando paso a paso como añadir campos nuevos a un producto, en este caso, en un ecommerce de plantas […]

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

]]>
Un producto por defecto tiene unos campos predeterminados, como son el título, la descripción, foto, galería, precio… pero en ocasiones es necesario que existan nuevos campos para complementar el producto. En este artículo voy a ir mostrando paso a paso como añadir campos nuevos a un producto, en este caso, en un ecommerce de plantas para que veas todo el proceso.

¿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.

]]>
https://garciaferro.es/como-anadir-campos-personalizados-a-un-producto/feed/ 0
Ocultar SKU de productos en WooCommerce https://garciaferro.es/ocultar-sku-de-productos-en-woocommerce/ https://garciaferro.es/ocultar-sku-de-productos-en-woocommerce/#respond Thu, 22 Jul 2021 13:46:05 +0000 https://garciaferro.es/?p=1879 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 […]

La entrada Ocultar SKU de productos en WooCommerce 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.

]]>
https://garciaferro.es/ocultar-sku-de-productos-en-woocommerce/feed/ 0
Tipos de productos que puedes añadir a tu WooCommerce https://garciaferro.es/tipos-de-productos-que-puedes-anadir-a-tu-woocommerce/ https://garciaferro.es/tipos-de-productos-que-puedes-anadir-a-tu-woocommerce/#respond Fri, 20 Nov 2020 17:19:42 +0000 https://garciaferro.es/?p=1321 Que WooCommerce es un plugin superpotente no lo puede negar nadie. Podrás crear tu propia tienda online fácilmente a partir de tu WordPress. En este artículo vamos a hablar de los tipos de productos que podrás crear en él. Podrás valorar si se adapta al tipo de producto que quieres vender y también podrás ver […]

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

]]>
Que WooCommerce es un plugin superpotente no lo puede negar nadie. Podrás crear tu propia tienda online fácilmente a partir de tu WordPress. En este artículo vamos a hablar de los tipos de productos que podrás crear en él. Podrás valorar si se adapta al tipo de producto que quieres vender y también podrás ver todas las opciones de que dispones. También veremos otras opciones que no vienen por defecto con WooCommerce pero con otros plugins podrás crear otros tipos de productos.

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.

]]>
https://garciaferro.es/tipos-de-productos-que-puedes-anadir-a-tu-woocommerce/feed/ 0
Como activar el modo catálogo en WooCommerce https://garciaferro.es/como-activar-el-modo-catalogo-en-woocommerce/ https://garciaferro.es/como-activar-el-modo-catalogo-en-woocommerce/#respond Wed, 04 Nov 2020 15:29:32 +0000 https://garciaferro.es/?p=1223 [et_pb_section fb_built=»1″ _builder_version=»3.22″ custom_padding=»4px|||||»][et_pb_row _builder_version=»3.25″ background_size=»initial» background_position=»top_left» background_repeat=»repeat» custom_padding=»0px|||||»][et_pb_column type=»4_4″ _builder_version=»3.25″ custom_padding=»|||» custom_padding__hover=»|||»][et_pb_text _builder_version=»4.6.6″ background_size=»initial» background_position=»top_left» background_repeat=»repeat»] 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 […]

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

]]>
[et_pb_section fb_built=»1″ _builder_version=»3.22″ custom_padding=»4px|||||»][et_pb_row _builder_version=»3.25″ background_size=»initial» background_position=»top_left» background_repeat=»repeat» custom_padding=»0px|||||»][et_pb_column type=»4_4″ _builder_version=»3.25″ custom_padding=»|||» custom_padding__hover=»|||»][et_pb_text _builder_version=»4.6.6″ background_size=»initial» background_position=»top_left» background_repeat=»repeat»]

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.

]]>
https://garciaferro.es/como-activar-el-modo-catalogo-en-woocommerce/feed/ 0
Productos relacionados con WooCommerce: mejoras y personalizaciones https://garciaferro.es/productos-relacionados-con-woocommerce/ https://garciaferro.es/productos-relacionados-con-woocommerce/#respond Mon, 19 Oct 2020 18:31:46 +0000 https://garciaferro.es/?p=1190 Los productos relacionados con WooCommerce son una opción más de compra. Normalmente están al final de la ficha de producto. Si al visitante no le convence un producto de la tienda online ve otras opciones relacionadas al final de la ficha de ese producto. Se trata de que el visitante no se vaya sin comprar […]

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

]]>
Los productos relacionados con WooCommerce son una opción más de compra. Normalmente están al final de la ficha de producto. Si al visitante no le convence un producto de la tienda online ve otras opciones relacionadas al final de la ficha de ese producto. Se trata de que el visitante no se vaya sin comprar viendo otros productos. Esta es la parte teórica de porqué existen los productos relacionados pero el artículo va enfocado a que les quites provecho y los optimices para tu negocio.

¿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.

]]>
https://garciaferro.es/productos-relacionados-con-woocommerce/feed/ 0
Como personalizar la ficha de producto en WooCommerce + Divi https://garciaferro.es/como-personalizar-la-ficha-de-producto-en-woocommerce-divi/ https://garciaferro.es/como-personalizar-la-ficha-de-producto-en-woocommerce-divi/#comments Tue, 06 Oct 2020 15:26:26 +0000 https://garciaferro.es/?p=1147 [et_pb_section fb_built=»1″ _builder_version=»3.22″][et_pb_row _builder_version=»3.25″ background_size=»initial» background_position=»top_left» background_repeat=»repeat»][et_pb_column type=»4_4″ _builder_version=»3.25″ custom_padding=»|||» custom_padding__hover=»|||»][et_pb_text _builder_version=»4.6.5″ background_size=»initial» background_position=»top_left» background_repeat=»repeat» hover_enabled=»0″ sticky_enabled=»0″] 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 […]

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

]]>
[et_pb_section fb_built=»1″ _builder_version=»3.22″][et_pb_row _builder_version=»3.25″ background_size=»initial» background_position=»top_left» background_repeat=»repeat»][et_pb_column type=»4_4″ _builder_version=»3.25″ custom_padding=»|||» custom_padding__hover=»|||»][et_pb_text _builder_version=»4.6.5″ background_size=»initial» background_position=»top_left» background_repeat=»repeat» hover_enabled=»0″ sticky_enabled=»0″]

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.

]]>
https://garciaferro.es/como-personalizar-la-ficha-de-producto-en-woocommerce-divi/feed/ 2