Agregar clase CSS al botón añadir al carrito, Woocommerce

Question

Agregar clase CSS al botón añadir al carrito, Woocommerce

8 sept 2015, 13:51:22

Vistas: 21.8K

Votos: 2

Estoy buscando una manera de agregar una clase personalizada al botón de añadir al carrito en la página single-product.php en Woocommerce. He intentado lo siguiente sin ningún resultado:

Copiar toda la carpeta woocommerce desde la carpeta "plugins" a "themes/MI-TEMA/woocommerce".
Modificar el archivo "add-to-cart.php" en "themes/MI-TEMA/woocommerce/loop/add-to-cart.php

if ( ! defined( 'ABSPATH' ) ) {
    exit; // Salir si se accede directamente
}

global $product;

echo apply_filters( 'woocommerce_loop_add_to_cart_link',
    sprintf( '<a href="%s" rel="nofollow" data-product_id="%s" data-product_sku="%s" data-quantity="%s" class="button %s product_type_%s">%s</a>',
        esc_url( $product->add_to_cart_url() ),
        esc_attr( $product->id ),
        esc_attr( $product->get_sku() ),
        esc_attr( isset( $quantity ) ? $quantity : 1 ),
        $product->is_purchasable() && $product->is_in_stock() ? 'add_to_cart_button MI-CLASE-DE-PRUEBA-AQUI' : '',
        esc_attr( $product->product_type ),
        esc_html( $product->add_to_cart_text() )
    ),
$product );

Aunque no puedo ver "MI-CLASE-DE-PRUEBA-AQUI" en el código fuente. ¿Qué estoy haciendo mal?

JohnF

39

plugins css woocommerce fueradetema

Todas las respuestas a la pregunta

Comentarios

Estoy bastante seguro de que esto se refiere a otra cosa, no a los botones de WooCommerce, que es un plugin, no un tema.

jnhghy - Alexandru Jantea

12 dic 2016 17:12:29

tao 985 · Answer 1 · 2015-09-15T02:16:26Z

Como se explica en su documentación, WooCommerce proporciona una estructura de plantillas. Copiar WC en tu tema no te llevará a ninguna parte.

Crea una carpeta woocommerce en tu tema.
Copia cualquier plantilla dentro de la carpeta templates de WC dentro de tu carpeta woocommerce en el tema. Ten en cuenta que necesitas mantener la estructura de la carpeta templates intacta en tu carpeta woocommerce del tema para que esto funcione.
Modifica las plantillas en la carpeta woocommerce de tu tema a tu gusto. Estas tienen prioridad de carga sobre las que están dentro de la carpeta templates del plugin.

Consejo: ¡no copies todas las plantillas del plugin dentro de tu tema! Solo las que quieras modificar. De vez en cuando, WC actualiza sus plantillas y añade funcionalidades. WooCommerce también te avisará cuando una plantilla que mantienes en tu tema podría tener una versión actualizada dentro del plugin, después de una actualización.

Y por cierto, sospecho que el voto negativo no fue por la pregunta en sí, sino por el título. Apuesto a que sabes cómo añadir una clase a un botón. Lo que no sabías era cómo usar el sistema de plantillas de WooCommerce. Porque no lo buscaste en Google, lo cual creo que (técnicamente) sabes hacer. Por favor, perdona mi toque de sarcasmo, era eso o otro voto negativo.

epicrato 201 · Answer 2 · 2015-11-23T19:38:55Z

La forma más fácil que encontré (un poco hacky) es envolver el botón en una etiqueta span, agregar la clase al span y luego en tu css aplicar las propiedades al botón heredando del span:

<span class="my-nice-class">
    <?php woocommerce_get_template( 'loop/add-to-cart.php' ); ?>
</span>

y luego en css:

.my-nice-class .button {
    color: black;
}

epicrato

201

23 nov 2015 19:38:55

grlwondr 29 · Answer 3 · 2015-09-08T18:28:32Z

¿Estás usando un tema hijo? Si no es así, te lo recomendaría. Luego puedes personalizar el estilo del botón en el archivo "style.css" del tema hijo editando el estilo de "add_to_cart_button" en lugar de crear una nueva clase.

grlwondr

29

8 sept 2015 18:28:32