Changer la couleur du bouton “ajouter au panier” en fonction de la catégorie de produit Woocommerce
J'essaie de changer la couleur de tous les boutons "Ajouter au panier" de la page Produits/Archives, en fonction de la catégorie dans laquelle se trouve le produit.
J'ai déjà appliqué un filtre sur la page products/archive pour afficher uniquement les produits d'une catégorie donnée.
Toutefois, en fonction du code ci-dessous, le texte "ajouter au panier" change, mais la couleur ne change pas.
Aucune suggestion?
// Change add to cart button text per category
add_filter( 'woocommerce_product_add_to_cart_text', 'custom_single_add_to_cart_text', 20, 2 );
function custom_single_add_to_cart_text( $text_button, $product ) {
global $post;
$domain = 'woocommerce';
// HERE set the array of categories terms slug and corresponding colors and texts
$categories_colors = array(
'protein' => array( 'color' => 'red', 'text' => __('Order your Protein', $domain ) ),
'pantry' => array( 'color' => 'blue', 'text' => __('Order your Pantry', $domain ) ),
);
$color = '';
$text_button = __('Order now', $domain ); // default
foreach ($categories_colors as $key => $value ) {
if( has_term( $key, 'product_cat', $post->ID ) ){
$color = $value['color'];
$text_button = $value['text'];
break;
}
}
if ( empty($color) ) return $text_button; // Exit if empty
// Dynamic css andjquery to set the color when defined
?>
<style>
button.single_add_to_cart_button.<?php echo $color; ?>{background-color:<?php echo $color; ?> !important;}
</style>
<?php
// jQuery (add color css class)
?>
<script type="text/javascript">
(function($){
$('button.single_add_to_cart_button').addClass('<?php echo $color; ?>');
})(jQuery);
</script>
<?php
return $text_button;
}
Ceci est un filtre. Il devrait renvoyer une valeur, pas rendre HTML/CSS/JS à l'intérieur. Pour votre changement de couleur, pourquoi n'avez-vous pas remplacé le fichier de modèle? par exemple: woocomerce\produit unique\add-to-cart\simple.php