Aggiungere una classe CSS al pulsante aggiungi al carrello in WooCommerce

Question

Aggiungere una classe CSS al pulsante aggiungi al carrello in WooCommerce

8 set 2015, 13:51:22

Visualizzazioni: 21.8K

Voti: 2

Sto cercando un modo per aggiungere una classe personalizzata al pulsante aggiungi al carrello nella pagina single-product.php in WooCommerce. Ho provato quanto segue senza alcun risultato:

Copiare l'intera cartella woocommerce dalla cartella "plugins" a "themes/MY-THEME/woocommerce".
Modificare il file "add-to-cart.php" in "themes/MY-THEME/woocommerce/loop/add-to-cart.php

if ( ! defined( 'ABSPATH' ) ) {
    exit; // Uscire se accesso diretto
}

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 );

Anche se non riesco a vedere "MY-TEST-CLASS-HERE" nel codice sorgente. Cosa sto facendo di sbagliato?

JohnF

39

plugin css woocommerce offtopic

Tutte le risposte alla domanda

Commenti

Sono abbastanza sicuro che questo si riferisca a qualcos'altro e non ai pulsanti di WooCommerce, che è un plugin e non un tema..

jnhghy - Alexandru Jantea

12 dic 2016 17:12:29

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

Come spiegato nella loro documentazione, WooCommerce fornisce una struttura di template. Copiare WC nel tuo tema non ti porterà da nessuna parte.

Crea una cartella woocommerce nel tuo tema.
Copia qualsiasi template all'interno della cartella templates di WC nella tua cartella woocommerce del tema. Attenzione, devi mantenere intatta la struttura della cartella templates nella tua cartella woocommerce del tema perché funzioni.
Modifica i template nella cartella woocommerce del tuo tema come preferisci. Questi avranno la precedenza di caricamento rispetto a quelli presenti nella cartella templates del plugin.

Suggerimento: non copiare tutti i template dal plugin nel tuo tema! Solo quelli che vuoi modificare. Di tanto in tanto WC aggiorna i propri template e aggiunge funzionalità. WooCommerce ti avviserà anche quando un template che mantieni nel tuo tema potrebbe avere una versione aggiornata all'interno del plugin, dopo un aggiornamento.

E comunque, sospetto che il downvote non fosse per la domanda in sé, ma per il titolo. Scommetto che sai come aggiungere una classe a un pulsante. Quello che non sapevi era come utilizzare il sistema di template di WooCommerce. Perché non l'hai cercato su Google, cosa che (tecnicamente) so che sai fare. Per favore, perdona il mio tocco di sarcasmo, era quello o un altro downvote.

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

Il modo più semplice che ho trovato (un po' approssimativo) è racchiudere il pulsante in un tag span, aggiungere la classe allo span e poi nel css applicare le proprietà al pulsante ereditandole dallo span:

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

e poi nel css:

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

epicrato

201

23 nov 2015 19:38:55

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

Stai utilizzando un child theme? In caso contrario, te lo consiglio vivamente. Potrai quindi personalizzare lo stile del pulsante nel file "style.css" del child theme modificando lo stile della classe "add_to_cart_button" invece di creare una nuova classe

grlwondr

29

8 set 2015 18:28:32