Superpositionner une logo sur une image (Créer un compte)

  • WordPress :5.8
  • Statut : non résolu
  • Ce sujet contient 12 réponses, 4 participants et a été mis à jour pour la dernière fois par ferman, le il y a 50 secondes.
13 sujets de 1 à 13 (sur un total de 13)
  • Auteur
    Messages
  • #2389445
    klapiosus
    Participant
    Initié WordPress
    20 contributions

    Bonjour à tous,

    Je fais de la vente de vêtement en ligne et j’ai des marques marques comme Nasa/Kappa, etc.
    Je souhaite insérer sur chaque produit à droite de la photo le logo de la marque en question.
    Un plug-in peut-il faire ça dans Woocommerce ?
    Je cherche mais en vain.

    Merci d’avance

    #2389446
    Li-An
    Modérateur
    Maître WordPress
    25634 contributions

    Bonjour, il y a ça qui ne fait pas tout à fait ce que vous voulez mais permet de trier par marque https://woocommerce.com/fr-fr/products/brands/

    Avec du code ici https://stackoverflow.com/questions/54377971/add-brand-logo-on-each-woocommerce-product

    Et une extension là https://fr.wordpress.org/plugins/product-watermark-for-woocommerce/

     

    #2389507
    klapiosus
    Participant
    Initié WordPress
    20 contributions

    Merci pour votre réponse.

    En effet, cela ne correspond pas car le filigrane de l’extension Watermark ne propose qu’un seul filigrane (ainsi que les extensions voisines)

    • Cette réponse a été modifiée le il y a 2 jours et 1 heure par klapiosus.
    #2389511
    Li-An
    Modérateur
    Maître WordPress
    25634 contributions

    Il faudrait donc passer par le code avec toutes les conditions pour chacune des marques. Ben c’est un boulot… Je n’ai rien trouvé de plus. Vous pouvez aussi rajouter via un logiciel de graphisme le logo sur l’image, hein, c’est quand même le plus simple.

    #2389515
    klapiosus
    Participant
    Initié WordPress
    20 contributions

    Je pense faire ça.

    Merci bien

    #2389523
    Lumiere de Lune
    Participant
    Maître WordPress
    19735 contributions

    La marque est un attribut, j’imagine ? Un plugin comme taxonomy image permet d’associer une image à un terme, et de l’afficher où on veut avec un peu de php.

    #2389534
    ferman
    Participant
    Maître WordPress
    4610 contributions

    Bonjour,

    Si vous n’avez rien contre le code, celui donné par Li-An, un peu modifié (avec des conditions), fonctionne. Ce n’est pas très compliqué: il suffit que chaque marque ait sa propre catégorie ou étiquette, puis de mettre des conditions. On  peut ensuite terminer la mise en page avec un peu de CSS.

    • Cette réponse a été modifiée le il y a 1 jour et 19 heures par ferman.
    #2389589
    klapiosus
    Participant
    Initié WordPress
    20 contributions

    Merci pour vos réponses.

    Non là il s’agit d’jouter un filigrane sur une image (en référence à une marque).

    #2389596
    ferman
    Participant
    Maître WordPress
    4610 contributions

    Par exemple quelque chose comme sur la pj?: (Elesse ajouté). Et sur quel type d’image: page produit, page catégorie?

    • Cette réponse a été modifiée le il y a 18 heures et 24 minutes par ferman.
    Fichiers joints :
    Vous devez être connecté pour voir les fichiers joints.
    #2389642
    klapiosus
    Participant
    Initié WordPress
    20 contributions

    Oui c’est exactement comme dans la PJ.

    Seulement sur les produits.

    #2389658
    ferman
    Participant
    Maître WordPress
    4610 contributions

    Pour que ça fonctionne

    • Il faut créer des étiquettes (ou des catégories mais c’est moins bien)  pour les marques et les affecter aux produits.
    • Il vaut mieux que toutes les images aient la même taille.

    On utilise la fonction suivante.

    function logo_sur_image_produit() {
    	if( has_term( 'nasa', 'product_tag')){
    		echo '<p class="superlogo"><img src="URL IMAGE" /></p>';
    		}
    	elseif ( has_term( 'kappa', 'product_tag')){
    		echo '<p class="superlogo"><img src="URL IMAGE" /></p>';
    		}
    	else {return;
    		}
    	}	
    add_action( 'woocommerce_single_product_summary', 'logo_sur_image_produit',5 );

    Vous répétez  le paragraphe elseif… autant de fois que vous avez de marques. Cela place le logo à droite de l’mage sur la page produit. Vous pouvez régler la hauteur en remplaçant  la valeur  5 (en bas à droite) par 0 ou 10.

    Ce code est à mettre de préférence dans le fichier “functions.php” d’un thème enfant. Si vous n’en avez pas c’est facile à créer avec l’extension “Child theme configurator“. Si vous ne voulez pas en créer vous pouvez utiliser l’extension “my custom functions“. C’est simple mais lisez les FAQ et surtout ça: “Q. What to do if this plugin crashed the website?” qui vous dit comment rétablir la situation en cas de problème (pas grave et facilement réparable  par FTP). Il vaut mieux éviter de mettre des codes dans functions.php du thème parent: ce sera effacé lors de la prochaine mise à jour du thème. Bien sûr on peut remettre le code après mais c’est un peu pénible, surtout si vous envisagez de mettre d’autres codes dans l’avenir.

    Ensuite  dans vos CSS personnalisées il sera possible de déplacer le logo sur l’image.

    .superlogo{position:relative;
    right:180px;}

    Cela dépend du thème donc il faudra sans doute jouer sur la valeur 180px et c’est valable pour les PC/tablettes. Pour les smartphones, il faudra modifier ces CSS. Si vous ne savez pas le faire, le plus simple sera de pouvoir jeter un coup d’oeil au site.

     

    #2389661
    klapiosus
    Participant
    Initié WordPress
    20 contributions

    Merci beaucoup, je vais voir ça

    #2389662
    ferman
    Participant
    Maître WordPress
    4610 contributions

    J’oubliais: il faudra certainement ajuster la taille du logo. XXXX à modifier (essayez d’abord 100px ou 200px) puis ajustez à vitre goût.

    .superlogo{position:relative;
    right:180px;
    width:xxxxpx;}

    • Cette réponse a été modifiée le il y a 15 secondes par ferman.
13 sujets de 1 à 13 (sur un total de 13)
  • Vous devez être connecté pour répondre à ce sujet.