web-dev-qa-db-fra.com

Ajouter une classe CSS au bouton d'ajout au panier, Woocommerce

Je cherche un moyen d'ajouter une classe personnalisée au bouton d'ajout au panier de la page single-product.php dans Woocommerce. J'ai essayé ce qui suit sans aucun résultat:

  1. Copiez tout le dossier woocommerce du dossier "plugins" dans "themes/MY-THEME/woocommerce".
  2. Modification du fichier "add-to-cart.php" dans "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 );

Bien que je ne puisse pas voir le "MY-TEST-CLASS-HERE" dans le code source. Qu'est-ce que je fais mal?

pluginscsswoocommerce
2
JohnF

Comme expliqué dans leur documentation WooCommerce fournit une structure de modèles. Copier les WC dans votre thème ne vous mènera nulle part.

  1. Créez un dossier woocommerce dans votre thème.
  2. Copiez n’importe quel modèle dans le dossier templates de WC dans votre dossier de thème woocommerce. Attention, vous devez conserver la structure du dossier templates dans votre dossier de thèmes woocommerce pour que cela fonctionne.
  3. Modifiez les modèles dans le dossier woocommerce de votre thème selon vos préférences. Ils ont une priorité de chargement sur ceux à l'intérieur du templates du plugin.

Astuce: ne copiez pas tous les modèles du plugin dans votre thème! Seuls ceux que vous souhaitez modifier. De temps en temps, WC met à jour leurs modèles et ajoute des fonctionnalités. WooCommerce vous indiquera également quand un modèle que vous conservez dans votre thème peut avoir une version mise à niveau dans le plugin, après une mise à niveau.

Et en passant, je soupçonne que le vote par opposition n'était pas pour la question elle-même, mais pour le titre. Je parie que vous savez comment ajouter une classe à un bouton. Ce que vous ne saviez pas, c'est comment utiliser le système de templates de WooCommerce. Parce que vous ne l'avez pas fait sur Google, ce que je pense que vous savez (techniquement) comment faire. S'il vous plaît, excusez ma touche de sarcasme, c'était soit ça, soit un autre vote négatif.

4
Andrei Gheorghiu

Le moyen le plus simple que j'ai trouvé (un petit hacky) est d'envelopper le bouton dans une balise span, d'ajouter la classe à l'étendue, puis, dans votre css, d'appliquer les propriétés du bouton hérité de l'étendue:

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

puis en css:

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

Utilisez-vous un thème pour enfants? Sinon, je suggérerais cela. Vous pouvez ensuite personnaliser le style du bouton dans le fichier "style.css" du thème enfant en modifiant le style de "add_to_cart_button" et en créant une nouvelle classe.

0
grlwondr