Cambiar el orden de los elementos en la ficha de producto de Woocommerce

LucusHost, el mejor hosting

Woocommerce por defecto tiene la misma estructura en la ficha de producto con el siguiente orden:

  1. Muestra el título del producto
  2. Reseñas
  3. Precio
  4. Descripción corta
  5. Variaciones(Si hay)
  6. Añadir al carrito

Entonces con esto podríamos querer que el botón de añadir al carrito esté antes de la descripción corta para que en móvil salga antes o mostrar el precio abajo del todo. Pues todo esto lo vamos a cambiar con un sencillo snippet sin tener que cambiar nada de la ficha de producto ¿Le echamos un vistazo?

Cambiar el orden por defecto sin plugin

Por defecto el orden utilizando código es el siguiente:

woocommerce_template_single_title - 5
woocommerce_template_single_price - 10
woocommerce_template_single_excerpt - 20
woocommerce_template_single_add_to_cart - 30
woocommerce_template_single_meta - 40
woocommerce_template_single_sharing - 50

El número que muestra al lado son las prioridades, así que vamos a cambiar el botón de añadir el carrito y lo vamos a subir arriba después del precio, por lo que:

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

Recuerdo que tenéis este tutorial para saber como insertar este código en tu Wooocommerce.

En este caso he eliminado el botón de añadir al carrito para volver a ponerlo con una prioridad inferior, en este caso 15 para que salga después del precio, en la siguiente imagen se puede ver la diferencia:

cambiar el orden de los elementos en la ficha de producto

Se puede mover todo! Os dejo otro ejemplo, en este caso pondremos el precio debajo de la descripción corta:

remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_price', 10 );
add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_price', 25 );
snippet de woocommerce cambair-orden elementos del producto

¿Cogéis la idea no? Jugando con las prioridades podemos alterar fácilmente el orden de los elementos.

Si queréis quitar el zoom de la imagen del producto os recomiendo este tutorial.

Yo la verdad recomiendo dejarla como está, pero si que puede ser en ciertas tiendas que no se trabajen las descripciones o se quieran hacer pruebas para mejorar la tasa de conversión o aumentar el pedido medio de compra.

Si necesitáis ayuda con este tutorial contactarme, o si necesitáis esta y otras herramientas en vuestra tienda online tenéis mi servicio de desarrollo de tiendas online.

[ratings]

¡Haz clic para puntuar esta entrada!
(Votos: 3 Promedio: 3.7)
mailerlite diegol

Especialista en Comercio electrónico con Woocommerce. Te ayudo a crear, gestionar y publicitar tu Ecommerce en función de tu sector y público objetivo. Puedes encontrarme en Diegol.top

¿Necesitas ayuda con este tutorial? Mándame un correo y te resuelvo todas las dudas!


Ver servicios Curso de WooCommerce

También puedes realizar una donacion para seguir apoyando la salida de nuevos tutoriales y actualizaciones

mailerlite diegol

Reader Interactions

comentarios

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *