Agregar una clase CSS al botón de agregar al carrito, Woocommerce [cerrado]

2

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

  1. Copie toda la carpeta woocommerce de la carpeta "complementos" a "temas / MI TEMA / woocommerce".
  2. Modificar el archivo "add-to-cart.php" en "themes / MY-THEME / woocommerce / loop / add-to-cart.php

if ( ! defined( 'ABSPATH' ) ) {
    exit; // Exit if accessed directly
}

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 MY-TEST-CLASS-HERE' : '',
        esc_attr( $product->product_type ),
        esc_html( $product->add_to_cart_text() )
    ),
$product );

Aunque no puedo ver "MY-TEST-CLASS-HERE" en el código fuente. ¿Qué estoy haciendo mal?

    
pregunta JohnF 08.09.2015 - 12:51

3 respuestas

4

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

  1. Crea una carpeta woocommerce en tu tema.
  2. Copie cualquier plantilla dentro de la carpeta templates de WC dentro de su carpeta de tema woocommerce . Tenga en cuenta que debe mantener la estructura de la carpeta templates intacta en su carpeta de tema woocommerce para que esto funcione.
  3. Modifique las plantillas en la carpeta woocommerce de su tema a su gusto. Tienen precendencia de carga sobre las que están dentro del plugin templates .

Sugerencia: ¡no copie todas las plantillas del complemento dentro de su tema! Solo los que quieras modificar. De vez en cuando, WC actualiza sus plantillas y agrega funcionalidad. WooCommerce también le informará cuándo una plantilla que mantiene en su tema puede tener una versión actualizada dentro del complemento, 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 agregar una clase a un botón. Lo que no sabías era cómo usar el sistema de plantillas de WooCommerce. Porque no lo buscó en Google, lo cual creo que (técnicamente) sabe cómo hacerlo. Por favor, perdone mi toque de sarcasmo, fue eso u otro voto negativo.

    
respondido por el Andrei Gheorghiu 15.09.2015 - 01:16
1

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

<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;
}
    
respondido por el drjorgepolanco 23.11.2015 - 18:38
0

¿Estás usando un tema infantil? Si no, sugeriría eso. Luego, puede personalizar el botón en el archivo "style.css" del tema secundario editando el estilo de "add_to_cart_button" vs creando una nueva clase

    
respondido por el grlwondr 08.09.2015 - 17:28

Lea otras preguntas en las etiquetas