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 Nicolas

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

a.hikashop_cart_input_button{
  background-image:url(/templates/my-template/images/add-to-cart.jpg);
}

a.hikashop_cart_button, a.hikashop_cart_button:hover, a.hikashop_compare_button, a.hikashop_compare_button:hover{background-image:url(LINK TO YOUR NEW ADD TO CART BUTTON IMAGE);

a.hikashop_cart_button{
  background-image:url(/POINTB/images/cart.png);
  width:100px;
  height:50px;
}
a.hikashop_cart_button:hover{
  background-image:url(/POINTB/images/cart-over.png);
  width:100px;
  height:50px;
}

Bonsoir Nicolas,

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

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

a.hikashop_cart_button{
  background-image:url(/POINTB/images/cart.png);
  background-repeat:no-repeat;
  width:100px;
  height:50px;
}
a.hikashop_cart_button:hover{
  background-image:url(/POINTB/images/cart-over.png);
  background-repeat:no-repeat;
  width:100px;
  height:50px;
}

Bonjour,

En fait il ne faut pas remplacer, mais ajouter, comme ceci:

a.hikashop_product_page a.hikashop_cart_button{
  background-image:url(/POINTB/images/cart.png);
  background-repeat:no-repeat;
  width:100px;
  height:50px;
}
a.hikashop_product_page a.hikashop_cart_button:hover{
  background-image:url(/POINTB/images/cart-over.png);
  background-repeat:no-repeat;
  width:100px;
  height:50px;
}

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:

.hikashop_product_stock a.hikashop_cart_button{
  background-image:url(/POINTB/images/cart.png);
  background-repeat:no-repeat;
  width:100px;
  height:50px;
}
.hikashop_product_stock a.hikashop_cart_button:hover{
  background-image:url(/POINTB/images/cart-over.png);
  background-repeat:no-repeat;
  width:100px;
  height:50px;
}

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

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:

.hikashop_cart_button{
    background: url('url_de_image.jpg') !important;
}