Adăugare clasă CSS la butonul add-to-cart în WooCommerce

Question

Adăugare clasă CSS la butonul add-to-cart în WooCommerce

8 sept. 2015, 13:51:22

Vizualizări: 21.8K

Voturi: 2

Caut o modalitate de a adăuga o clasă personalizată butonului add-to-cart de pe pagina single-product.php în WooCommerce. Am încercat următoarele fără niciun rezultat:

Copierea întregului folder woocommerce din directorul "plugins" în "themes/MY-THEME/woocommerce".
Modificarea fișierului "add-to-cart.php" în "themes/MY-THEME/woocommerce/loop/add-to-cart.php

if ( ! defined( 'ABSPATH' ) ) {
    exit; // Ieșire dacă este accesat direct
}

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

Deși nu pot vedea "MY-TEST-CLASS-HERE" în codul sursă. Ce fac greșit?

JohnF

39

pluginuri css woocommerce offtopic

Toate răspunsurile la întrebare

Comentarii

Sunt destul de sigur că se referă la altceva, nu la butoanele WooCommerce, care este un plugin, nu o temă..

jnhghy - Alexandru Jantea

12 dec. 2016 17:12:29

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

După cum este explicat în documentația lor, WooCommerce oferă o structură de template-uri. Copierea WC în tema ta nu te va ajuta cu nimic.

Crează un folder woocommerce în tema ta.
Copiază orice template din folderul templates al WC în folderul woocommerce al temei tale. Atenție, trebuie să păstrezi structura din folderul templates intactă în folderul woocommerce al temei tale pentru ca acest lucru să funcționeze.
Modifică template-urile din folderul woocommerce al temei tale după preferințele tale. Acestea au prioritate la încărcare față de cele din folderul templates al plugin-ului.

Sfat: nu copia toate template-urile din plugin în tema ta! Doar pe cele pe care dorești să le modifici. Din când în când, WooCommerce își actualizează template-urile și adaugă funcționalități. WooCommerce te va anunța, de asemenea, când un template pe care îl păstrezi în tema ta ar putea avea o versiune actualizată în plugin, după o actualizare.

Apropo, bănuiesc că votul negativ nu a fost pentru întrebarea în sine, ci pentru titlu. Pun pariu că știi cum să adaugi o clasă unui buton. Ceea ce nu știai era cum să folosești sistemul de template-uri al WooCommerce. Pentru că nu ai căutat pe Google, lucru pe care (din punct de vedere tehnic) cred că știi să-l faci. Te rog, iartă-mi tentativa de sarcasm, a fost fie asta, fie un alt vot negativ.

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

Cea mai ușoară metodă pe care am găsit-o (puțin cam hacky) este să înfășor butonul într-un tag span, să adaug clasa la span și apoi în CSS să aplic proprietățile butonului moștenind de la span:

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

și apoi în CSS:

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

epicrato

201

23 nov. 2015 19:38:55

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

Folosești un child theme? Dacă nu, aș sugera să îl folosești. Apoi poți personaliza stilul butonului în fișierul "style.css" din child theme prin editarea stilului clasei "add_to_cart_button" în loc să creezi o clasă nouă.

grlwondr

29

8 sept. 2015 18:28:32