Changer le nom d'un bouton par une image

-- url of the page with the problem -- : www.pointboisson.com/
-- HikaShop version -- : 2.3.2
-- Joomla version -- : 3.3.3
-- PHP version -- : PAS UTILES
-- Browser(s) name and version -- : FIREFOX

Bonjour à toute l'équipe hikashop.

Dans un de mes posts précédents, je demandais comment faire pour modifier l'aspect graphique d'un bouton en l'occurence le bouton "ajouter au pannier". Pas de problème, vous m'aviez indiqué comment faire et je vous en remercie.

Autre question : toujours concernant ce bouton "ajouter au panier". Est-ce possible de remplacer ce bouton par une image au format PNG. Nous aimerions, remplacer le bouton "ajouter au panier" par une image d'un panier au format PNG.

Merci par avance de votre aide.

Bien cordialement

Franck

Bonjour,

Oui c'est possible, le plus simple restant de mettre cette image en background, et d'ajouter du css pour retirer les border et mettre le texte en transparent.

Bonjour Xavier et merci pour votre réponse.

En fait, je ne veux pas du texte, en gros le bouton "ajouter au panier" serait remplacé par une image "format PNG" comme par exemple l'image ci-jointe, je suppose que l'on doit intervenir dans un fichier en particulier ... pour dire que la fonction ajouter au panier ne se fait fait plus en cliquant sur un "bouton" mais sur une image..

En espérant avoir été assez clair dans mes explications...

Merci et bonne journée

Bien cordialement

Franck

Bonjour,

Comme a dit Xavier, pas besoin de modifier le code "la fonction ajouter au panier", il suffit d'ajouter du CSS pour rendre le texte transparent et mettre l'image en background du bouton.
Nous avons d'ailleurs expliqué cela à plusieurs reprises sur notre forum. Voici quelqu'uns des sujets à ce propos:
www.hikashop.com/forum/4-how-to/47121-cu...-to-cart-button.html
www.hikashop.com/forum/4-how-to/83718-ch...button-to-image.html
www.hikashop.com/forum/2-general-talk-ab...to-cart-graphic.html

Bonjour Nicolas

Ok, merci en lisant un des posts j'ai vu ceci :

et ceci :
2 questions donc :

1 - Pouvez vous me dire quel est le code qui répond à ma demande (cela me fera gagner du temps)
2 - Dans quel fichier CSS je dois ajouter le bon code.

Merci par avance de vos réponses précises.

---

En ajoutant ce code dans le fichier custom.css de mon template
j'arrive à obtenir ceci (voir copie d'écran) :
Le problème c'est que :
1 - L'image est multiplié
2 - Celle-ci remplace le fond de tout mes boutons alors que je voudrais qu'elle remplace uniquement le bouton "ajouter au panier"
Conclusion, comment faire s'il vous plait pour corriger cela.

Bon dimanche

Bien cordialement.

Franck

Bonjour,

Votre site est en maintenance et je n'y ai pas accès. Cela dépend de comment vous avez configuré l'option "style de bouton" dans la configuration et quels boutons vous souhaitez modifier. Donc il m'est impossible de vous répondre précisemment.
Notre documentation contient une page sur la façon de chercher les classes à utiliser dans le CSS pour se genre de personnalisation, et elle explique également dans quel fichier et comment ajouter vos modifications CSS.
Donc je vous recommende de la suivre :
www.hikashop.com/support/support/documen...ize-the-display.html

Mais je vois que vous êtes sur la bonne piste. Il suffit de rajouter un no-repeat à votre background-image pour éviter la multiplication de l'image (c'est du CSS standard). Et pour éviter de remplacer les autres boutons il suffit de rajouter .hikashop_product_page au début de votre CSS

Bonsoir Nicolas,

Le site est disponible ici : www.franckmalapeau.fr/POINTB

J'ai modifié le code de mon précédent post par ceci :

C'est mieux, l'image de mon panier n'est plus multiplié, par contre j'ai essayé de remplacer a.hikashop_cart_button par a.hikashop_product_page
mais en faisant ceci l'image de mon panier disparait au profit du bouton "ajouter au panier"

Pouvez vous éclairer ma lanterne sur ce dernier point...

Merci par avance de votre aide.

Bien cordialement

Franck

Bonjour,

En fait il ne faut pas remplacer, mais ajouter, comme ceci:
Pour rappel, ceci reste du domaine de la customisation, ce qui n'est normalement pas supporté dans le cadre du forum

Bonsoir Xavier et merci pour votre aide même hors cadre du forum.

En collant le code dans le fichier custom.css de mon template cela ne fonctionne pas, je retrouve le bouton "ajouter au panier".

Si j'enlève la partie "a.hikashop_product_page", j'ai à nouveau mon panier, mais malheureusement celui-ci remplace tous les boutons comme par exemple : Nous contacter pour plus d'information situé sur le descriptif du produit.

Peux être que je devrais copier le code dans le fichier : frontend_custom.css mais je ne sais pas où le coller, doit il remplacer un autre code ....

Tant pis, je ne vais pas abuser de votre temps. j'abandonne.

Merci encore de votre patience.

Bien cordialement

Franck

Le code suivant devrait fonctionner comme vous le voulez:
Vous pouvez ajouter cela à la fin du fichier frontend_custom.css

Bonsoir Xavier, c'est top vous êtes génial.

Cela fonctionne, merci de votre disponibilité et de votre patience.

Bien cordialement

Franck

Xavier,

Je me permet de vous embêter encore.

Pourriez vous me dire ce que je dois rajouter au code afin que le texte "ajouter à vos favoris" ne soit pas remplacé par l'image ?

Promis je vous embête plus après sur ce sujet (enfin j'espère ...)

Merci encore.

Franck

Vous pouvez éviter cela en ajoutant ce genre de CSS:
div#hikashop_add_wishlist a.hikashop_cart_button, div#hikashop_add_wishlist a.hikashop_cart_button:hover{
background-image:none !important;
width: auto !important;
height: auto !important;
}

Je vous invite à lire des tutoriaux sur l'apprentissage du CSS. C'est bien plus simple que le PHP et si vous faites un ou plusieurs site web, cela vous permettra d'aller beaucoup plus loin dans la personnalisation de vos pages.

Bonjour Nicolas et merci.

Bonne fin de journée.

Bien cordialement

Franck

Bonjour,

Comment puis afficher une image en fond pour un bouton ajouter au panier?

Merci beaucoup

Bonjour,

Il faut surcharger le css de ce bouton.
Voici de la documentation sur comment personnaliser les vues:
www.hikashop.com/support/support/documen...ize-the-display.html

Merci de votre réponse, cependant la page m'envoie vers une erreur 404

Merci,

J'ai lu le lien que vous m'avez envoyé mais il explique pas en détail comment modifier le bouton ajouter au panier par une image, j'ai des connaissances basiques en programmation,

Merci beaucoup

Bonjour,

Cette modification nécessite seulement du CSS, donc pas de réel programmation.
Le lien fournit était surtout là pour expliquer comment trouver les propriétés CSS à modifier pour le bouton en question.

Par exemple, pour les boutons ajouter au panier, passage en caisse, il faut utiliser la propriété suivante: