blog webempresa

Añadir nuevo botón en la vista simple de un producto en WooCommerce

por Karen | Ago 12, 2022 | Tutoriales sobre WooCommerce

Una de las funcionalidades que usualmente queremos añadir en nuestra tienda es un nuevo botón personalizado en la vista simple del producto que nos permita añadir un enlace con la opción de regresar a la tienda, por ejemplo.

Añadir este botón es muy sencillo, para ello solo tenemos que añadir el siguiente código en nuestro function.php (preferiblemente un tema hijo) o a través de un plugin como code snippets.

Code Snippets

Una vez tenemos el plugin instalado tenemos que ir al apartado Fragmento de código -> Añadir nuevo y pegar el siguiente código

function add_content_after_addtocart() {

$current_product_id = get_the_ID();
$product = wc_get_product( $current_product_id );
$checkout_url = WC()->cart->get_checkout_url();

if( $product->is_type( 'simple' ) ){
echo '<a href="https://tudominio.com/tienda/" class="single_add_to_cart_button button alt">Regresar a la tienda</a>';
}
}
add_action( 'woocommerce_after_add_to_cart_button', 'add_content_after_addtocart' );

Tabla de contenidos
1 Recuerda que debes modificar la ruta https://tudominio.com/tienda/ por la de tu tienda.
2 ¿Te ha resultado útil este artículo?

Recuerda que debes modificar la ruta https://tudominio.com/tienda/ por la de tu tienda.

De esta forma una vez pulses sobre cualquier producto podrás ver tu nuevo botón añadido

Para añadir estilizar mejor tu botón y añadir espacio entre cada elemento, añade el siguiente código CSS en el apartado Apariencia -> Personalizar -> CSS Adicional

a.single_add_to_cart_button.button.alt {
margin-top: 20px;
}

El resultado final será tu botón nuevo con un espacio entre cada elemento

Puedes ver el proceso completo de su configuración en el siguiente video

¿Te ha resultado útil este artículo?

Ayúdanos a mejorar nuestros contenidos compartiendo tu opinión

Karen

Equipo de soporte WordPress y Woocommerce en Webempresa.

Video tutorial, paso a paso y demo del editor de contenidos

La verdad es que este creador de webs con IA me tiene algo enamorado, y aquí te envío un vídeo de cómo es “por dentro”, para terminar de convencerte y animarte a que lo utilices.

Durante el vídeo voy a:

Configurar la web desde cero, con el asistente (que hemos visto en el apartado anterior).
Añadir información sobre mi web (una web para un restaurante vegano en madrid, especializado en verduras de la huerta).
Ver el resultado y explorar las características principales de WeBuilder en cuanto a configuración y posibilidades generales.

Ten en cuenta que este vídeo no es un curso completo sobre la herramienta, es un recorrido por encima para que te hagas una idea de las posibilidades que tiene.

Conclusión

Crear una web con IA y WeBuilder te permite centrarte en tu negocio o tu pasión, dejando la parte técnica en manos de algoritmos inteligentes. Ahorro de tiempo, costes reducidos y resultados profesionales son solo el comienzo.

Define tu proyecto y palabras clave.
Deja que la IA genere la estructura y contenido.
Personaliza el diseño y las funcionalidades.
Publica y mantén tu sitio siempre optimizado.
Delega la parte técnica y las dudas al equipo de soporte de Webempresa.

Prueba WeBuilder hoy mismo y lleva tu proyecto a un nivel que no pensabas alcanzable hasta antes de leer este artículo, y todo gracias a la potencia de la inteligencia artificial en Webempresa.

¡Espero de todo corazón que este artículo te haya servido para darte un empujoncito a llevar a cabo esa puesta a punto de tu web o prueba de concepto de tu proyecto, y nos vemos en el siguiente artículo!

Plugin Gratuito WordPress