web-dev-qa-db-de.com

Fügen Sie die CSS-Klasse der Schaltfläche "In den Warenkorb" hinzu, "Woocommerce"

Ich bin auf der Suche nach einer Möglichkeit, eine benutzerdefinierte Klasse zur Schaltfläche "In den Warenkorb" auf der Seite "single-product.php" in Woocommerce hinzuzufügen. Ich habe Folgendes ohne Ergebnis versucht:

  1. Kopiere den gesamten woocommerce-Ordner aus dem Ordner "plugins" nach "themes/MY-THEME/woocommerce".
  2. Änderung der Datei "add-to-cart.php" in "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 );

Obwohl ich die "MY-TEST-CLASS-HERE" im Quellcode nicht sehen kann. Was mache ich falsch?

pluginscsswoocommerce
2
JohnF

Wie in Ihrer Dokumentation erklärt, bietet WooCommerce eine Template-Struktur. Das Kopieren von WC in Ihr Thema bringt Sie nicht weiter.

  1. Erstellen Sie einen Ordner woocommerce in Ihrem Design.
  2. Kopieren Sie eine beliebige Vorlage in den Ordner templates von WC in Ihrem Themenordner woocommerce. Beachten Sie, dass Sie die Struktur des Ordners templates in Ihrem Themenordner woocommerce intakt halten müssen, damit dies funktioniert.
  3. Ändern Sie die Vorlagen im Ordner woocommerce Ihres Themas nach Ihren Wünschen. Sie haben Vorrang vor den im Plugin enthaltenen templates.

Tipp: Kopieren Sie nicht alle Vorlagen aus dem Plugin in Ihr Theme! Nur die, die Sie ändern möchten. Von Zeit zu Zeit aktualisiert WC seine Vorlagen und fügt Funktionen hinzu. WooCommerce teilt Ihnen auch mit, wann eine Vorlage, die Sie in Ihrem Design behalten, nach einem Upgrade möglicherweise eine aktualisierte Version im Plugin enthält.

Übrigens, ich vermute, die Gegenstimme war nicht für die Frage selbst, sondern für den Titel. Ich wette, Sie wissen, wie man einer Schaltfläche eine Klasse hinzufügt. Was Sie nicht wussten, war, wie man das Template-System von WooCommerce benutzt. Weil du es nicht googelt hast, was ich denke, dass du (technisch) weißt, wie es geht. Bitte verzeihen Sie meinen Anflug von Sarkasmus, es war entweder das oder eine andere Ablehnung.

4
Andrei Gheorghiu

Der einfachste Weg, den ich gefunden habe (ein bisschen hacky), ist, den Button in ein span-Tag zu wickeln, die Klasse zum Span hinzuzufügen und dann in Ihrem CSS die Eigenschaften auf den Button anzuwenden, der vom Span erbt:

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

und dann in CSS:

.my-Nice-class .button {
    color: black;
}
1
drjorgepolanco

Verwenden Sie ein untergeordnetes Thema? Wenn nicht, würde ich das vorschlagen. Anschließend können Sie die Schaltfläche in der Datei "style.css" des untergeordneten Themas anpassen, indem Sie den Stil von "add_to_cart_button" bearbeiten und eine neue Klasse erstellen

0
grlwondr