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

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 année et 6 mois par ferman.

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 1 année et 6 mois par ferman.

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.

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 1 année et 6 mois par ferman.