Cambiar la Posición del botón Añadir al Carrito en WooCommerce [Tutorial]

Cambiar la Posición del botón Añadir al Carrito en WooCommerce [Tutorial]

Inicio desactivadoInicio desactivadoInicio desactivadoInicio desactivadoInicio desactivado
 

Dentro de un buen diseño de una tienda online tenemos que tener en cuenta la usabilidad. Si piensas que para tus usuarios la posición del botón de WooCommerce no es el correcto puedes cambiarlo para darles a los visitantes de tu tienda online la experiencia de usuario que se merecen. En este tutorial vamos a explicarte como funcionan las posiciones de los elementos en WooCommerce y como cambiarlas. Nos centraremos en modificar la posición del botón de Añadir al Carrito, pero también puedes mover otros elementos.

 

Entendiendo la lógica del orden de los elementos en la página de producto de WooCommerce

La acción de WooCommerce: 

woocommerce_single_product_summary

Es la acción que ordena toda la información en tu pantalla de producto de WooCommerce. Es acción la encontrarás dentro del archivo content-single-product.php dentro de la carpeta de WooCommerce templates. Dentro como comentario de PHP podrás ver cada elemento y un valor numérico. 

<?php
        /**
         * woocommerce_single_product_summary hook
         *
         * @hooked woocommerce_template_single_title - 5
         * @hooked woocommerce_template_single_price - 10
         * @hooked woocommerce_template_single_excerpt - 20
         * @hooked woocommerce_template_single_add_to_cart - 30
         * @hooked woocommerce_template_single_meta - 40
         * @hooked woocommerce_template_single_sharing - 50
         */
        do_action( 'woocommerce_single_product_summary' );
    ?>

 

 Te lo muestro en imagen (fíjate en el elemento woocommerce_template_single_add_to_cart y su valor, 40):

 

Cambiar la posición del Botón de añadir al carrito en WooCommerce

Cambiar la posición del botón de añadir al carrito en WooCommerce a través de functions.php

Como te habrás dado cuenta en la captura anterior WooCommerce ordena el contenido del producto desde 5 a 60 otorgándole a cada elemento un valor. Para cambiar la posición deberás localizar el archivo functions.php de tu tema. Lo encontrarás dentro de la carpeta wp-content/themes/tutema. Como siempre te recomiendo descargar una copia de seguridad de funtions.php para sustituirlo si el cambio te da error. Lo que debes hacer es pegar el siguiente código indicando la posición en la que quieres colocar el botón de añadir al carrito, nosotros lo vamos a colocar en el valor 15, es decir entre el precio y la descripción corta. 

/** cambiar la posición del botón añadir al carrito en las paginas de producto **/
    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 );

Con este código damos la orden a nuestro tema de eliminar el valor por defecto, 30, y colocarlo en la posición con el valor 15.

 

Bonus ¿Quieres modificar la posición del precio, las categorías o los botones de compartir? ¿Que son el resto de hooked?

Un hook no es más que una modificación del código de WordPress, a través de estas acciones introducimos nuevo código en nuestra web, por ejemplo, el botón de añadir al carrito. En una página de producto de WooCommerce hay variedad de hookers. Te dejo la relación de hooks que tienes en el código superior por si te interesa por ejemplo cambiar la posición de la descripción corta.

woocommerce_template_single_title Nombre del Producto
woocommerce_template_single_rating Valoraciones
woocommerce_template_single_price Precio
woocommerce_template_single_add_to_cart Botón Añadir al Carrito
woocommerce_template_single_meta Categorías y Etiquetas
woocommerce_template_single_sharing Compartir

 

Puedes cambiar cualquier posición de los elementos de la tabla sustituyendo su valor en el código. 

Sobre el Autor
Author: Álvaro
WooCommerce & WordPress Manager
Álvaro forma parte del equipo de Rombo, especializado en el desarrollo de aplicaciones web en WordPress y WooCommerce, aunque su pasión ha sido Joomla! desde 2008 ¡Le encanta compartir sus conocimientos! Así que... ¡pregunta!

5 1 1 1 1 1 1 1 1 1 1 Valoracion 5.00 (6 Votos)

PATROCINADO

Agencia de Marketing Digital en Cádiz y Chiclana de la Forntera
Somos una Agencia de marketing digital 100% online orientada a resultados.