Comment créer un formulaire responsive en 2 colonnes avec Contact Form 7?

Dans ce tutoriel nous allons voir comment créer non seulement un formulaire de contact à deux colonnes avec le célèbre Contact Form 7 qui deviendra un formulaire à 1 seule colonne sur un mobile, autrement dit un formulaire de contact responsive.

Le balisage HTML du formulaire dans CF7

Nous allons tout d’abord mettre en place les balises HTML du formulaire nouvellement ajouter via le panel d’administration de l’extension Contact Form 7. On va envelopper ce formulaire dans une balise <div> avec comme id="formulaire-responsive" comme ceci :

<div id="formulaire-responsive" class="clearfix">

<div class="rang-form">
<div class="demi-colonne">Votre prénom [text* first-name]</div>
<div class="demi-colonne">Votre nom [text* last-name]</div>
</div>

<div class="rang-form">
<div class="demi-colonne">Email [email* your-email]</div>
<div class="demi-colonne">Téléphone [text* your-phone]</div>
</div>

<div class="rang-form">
<div class="colonne">Sujet [text* your-subject]</div>
</div>

<div class="rang-form">
<div class="colonne">Votre message  [textarea your-message]</div>
</div>

<div class="rang-form">
<div class="colonne">[submit "Envoyer"]</div>
</div>

</div><!--fin de formulaire-responsive-->

Si vous publiez le formulaire de suite, il ressemblera à ça :

Ajoutons les styles CSS

On va donc ajouter les styles pour créer 2 colonnes :

#formulaire-responsive {
	max-width:600px /*-- à modifier en fonction de la largeur désirée --*/;
	margin:0 auto;
        width:100%;
}
.rang-form {
	width: 100%;
}
.demi-colonne, .colonne {
	float: left;
	position: relative;
	padding: 0.65rem;
	width:100%;
	-webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box
}
.clearfix:after {
	content: "";
	display: table;
	clear: both;
}

/**---------------- Media query ----------------**/
@media only screen and (min-width: 48em) { 
	.demi-colonne {
		width: 50%;
	}
}

Et des styles pour les champs, les labels, le bouton d’envoi et les messages de CF7 :

.wpcf7 input[type="text"], .wpcf7 input[type="email"], .wpcf7 textarea {
	width: 100%;
	padding: 8px;
	border: 1px solid #ccc;
	border-radius: 3px;
	-webkit-box-sizing: border-box;
	 -moz-box-sizing: border-box;
	      box-sizing: border-box
}
.wpcf7 input[type="text"]:focus{
	background: #fff;
}
.wpcf7-submit{
	float: right;
	color: #69af36; 
      font-family: 'Noto Sans', sans-serif;
      border-color: #69af36; 
      font-size: 14px; 
  	  line-height: 49px; 
      height: 49px; 
      font-weight: 600; 
      background-color: #ffffff; 
      border-radius: 4px; 
          -moz-border-radius: 4px; 
          -webkit-border-radius: 4px; 
       text-transform: uppercase; 
       border-width: 2px;  
       padding-left: 26px; 
       padding-right: 26px;
}
.wpcf7-submit:hover{
	background: #69af36;
      color: #ffffff;
  }
span.wpcf7-not-valid-tip{
	text-shadow: none;
	font-size: 12px;
	color: #fff;
	background: #ff0000;
	padding: 5px;
}
div.wpcf7-validation-errors { 
	text-shadow: none;
	border: transparent;
	background: #f9cd00;
	padding: 5px;
	color: #9C6533;
	text-align: center;
	margin: 0;
	font-size: 12px;
}
div.wpcf7-mail-sent-ok{
	text-align: center;
	text-shadow: none;
	padding: 5px;
	font-size: 12px;
	background: #59a80f;
	border-color: #59a80f;
	color: #fff;
	margin: 0;
}

Et voici le résultat final:

Un favicon au format PNG

Si le thème que vous utilisez ne propose pas le paramétrage d’un favicon pour votre site, collez simplement la portion de code ci-dessous dans votre fichier header.php:

<link rel="icon" 
     type="image/png" 
     href="http://partoom.world/favicon.png">
<style>

Et voilà, le tour est joué!

Comment afficher le pourcentage de réduction des promotions dans WooCommerce

Lorsque vous faites des soldes sur votre boutique en ligne WooCommerce, vous pouvez par exemple afficher un bouton « PROMO! » sur vos produits.

Mais afficher le pourcentage de réduction exact de vos produits peut inciter vos clients à passer à l’achat plus facilement et ainsi développer votre activité, ou celle de votre client.

Voici comment faire. Copiez-collez le code suivant dans le fichier functions.php de votre thème enfant:

/* Afficher le pourcentage de réduction des promotions WooCommerce */

add_action( 'woocommerce_before_shop_loop_item_title', 'wpm_show_sale_percentage_loop', 25 );

function wpm_show_sale_percentage_loop() {
global $product;

// Si le produit est en promotion
if ( $product->is_on_sale() ) {

// Si le produit n'est pas un produit variable
if ( ! $product->is_type( 'variable' ) ) {
$max_percentage = round( ( ( $product->regular_price - $product->sale_price ) / $product->regular_price ) * 100 );
} else {

// Sinon si c'est un produit variable, on récupère les différents prix
foreach ( $product->get_children() as $child_id ) :
$variation = $product->get_child( $child_id );
$price = $variation->get_regular_price();
$sale = $variation->get_sale_price();

// On calcule le pourcentage
$percentage = $price != 0 && ! empty( $sale ) ? ( ( $price - $sale ) / $price * 100 ) : $max_percentage;
if ( $percentage >= $highest_percentage ) :
    $max_percentage = $percentage;
    $regular_price = $product->get_variation_regular_price( 'min' );
    $sale_price = $product->get_variation_sale_price( 'min' );
endif;
endforeach;
}

// On affiche le pourcentage en l'arrondissant
echo "<div class='pourcentage'>-" . round($max_percentage) . "%</div>";
}
}

On ajoute ensuite un peu de CSS pour styliser l’affichage de notre pourcentage :

/* CSS pourcentage promotion WooCommerce */

.pourcentage {
	background-color: #D9534F;
	display: block;
	width:25%;
	margin:auto;
	padding: .2em .6em .3em;
	font-size: 75%;
	font-weight: bold;
	color: #fff;
	text-align:center;
	border-radius: .25em;
}

Et voilà le résultat:

Source: wpmarmite.com

Ajouter un bouton « Continuer le shopping » sur la page Panier

De nombreux sites proposent à leurs clients de continuer leurs achats lorsqu’ils s’apprêtent à valider leur commande.

Nous allons donc rajouter un bouton « Continuer le shopping » renvoyant vers votre page boutique sous le bouton « Procéder à la commande ».

Copiez-collez le code suivant dans le fichier functions.php de votre thème enfant :

function wpm_continue_shopping_button() {

	 // On récupère le lien de votre page boutique   
	 $shop_page_url = get_permalink( woocommerce_get_page_id( 'shop' ) );
 
	 // On ajoute notre bouton 
	echo '<div class="wpm-continue-shopping">';
	echo ' <a href="'.$shop_page_url.'" class="button wpm-shopping-button">Continuer le shopping</a>';
	echo '</div>';
}

Bien entendu, vous pouvez modifier le texte « Continuer le shopping » par celui que vous préférez. Le bouton est maintenant présent sur la page Panier.

Copiez-collez le code suivant dans le fichier style.css de votre thème enfant:

/*CSS du bouton Continuer le Shopping */

.wpm-shopping-button{
	width:100%;
	text-align: center;
}

Et voilà :

Source: wpmarmite.com

WooCommerce : Ajouter un badge « Rupture de stock » sur les produits indisponibles

Nous allons plutôt afficher une badge « Rupture de stock » en rouge et gros sur l’image au niveau de la boutique et à coté du titre sur notre page produit. Cela améliorera grandement l’expérience client.

Voici comment procéder : copiez-collez le code suivant dans le fichier functions.php de votre thème enfant:

/* Indiquer la rupture de stock */

add_action( 'woocommerce_before_shop_loop_item_title', 'wpm_display_sold_out_loop_woocommerce' );// On l'affiche sur la page boutique
add_action( 'woocommerce_single_product_summary', 'wpm_display_sold_out_loop_woocommerce' );// On l'affiche sur la page du produit seul

 
function wpm_display_sold_out_loop_woocommerce() {
    global $product;
 	//Si le produit est en rupture de stock, on affiche :
    if ( !$product->is_in_stock() ) {
        echo '<span class="soldout">' . __( 'Rupture de stock', 'woocommerce' ) . '</span>';
    }
}

Vous pouvez utiliser le CSS suivant pour modifier l’apparence du badge :

.soldout {
	padding: 3px 8px;
	text-align: center;
	background: red;
	color: white;
	font-weight: bold;
	position: absolute;
	top: 6px;
	right: 6px;
	font-size: 12px;
}

Et voilà!

Source: wpmarmite.com

Une solution alternative au NOBR dans le CSS

Les balises et , qui servaient à éviter les césures au sein d’une expression, sont aujourd’hui considérées comme non standards.

Elles peuvent être remplacées avec votre fichier CSS de la façon suivante:

 

1. Ajoutez ce code au fichier style.css

.test{
	white-space: nowrap;
}

2. Dans votre page:

<div class="test">Le texte sans césure</div>

 

Et voila, le texte contenu dans la balise <div> ne contiendra plus de saut à la ligne…

WooCommerce : Afficher le nombre de produits vendus

Pour afficher le nombre de produits vendus sur la page de chaque article, insérez le code suivant dans votre fichier functions.php:

/* Afficher le nombre de produit vendu sur les pages produits WooCommerce */

// On affiche le nombre de ventes sur la page produit
add_action( 'woocommerce_single_product_summary', 'wpm_product_sold_count', 11 );
 
function wpm_product_sold_count() {
    global $product;

	//On récupère le nombre total de ventes par produit
    $units_sold = $product->get_total_sales();
   
	// On affiche notre texte personnalisé contenant le nombre de vente
    echo '<p class="wpm-sold-product">' . sprintf( __( 'Produit vendu %s fois', 'woocommerce' ), $units_sold ) . '</p>';
}

Pour modifier la phrase affichant le nombre de ventes, modifiez le texte 'Produit vendu %s fois'.

 Attention à bien laisser le %s dans ce texte. C’est la variable contenant le nombre de ventes du produit !

Si vous voulez styliser un peu cet affichage, vous pouvez par exemple ajouter le code suivant dans le fichier style.css de votre thème enfant en ciblant la class CSS de notre texte qui est wpm-sold-product:

/* CSS Affichage nombre de produits vendus */

.wpm-sold-product {
	font-weight: bold; /* On met le texte en gras */
	background-color: #cecece; /* On met une couleur de fond grise */
	text-align:center; /* On centre le texte */
	padding-top:10px; /* On met une marge interne supérieure de 10pixels */
	margin-bottom:10px; /* On met une marge externe inférieure de 10pixels  */
}

Voici le rendu:

Source: wpmarmite.com

Commentaires de l’admin en surbrillance

Si vous souhaitez mettre en surbrillance les commentaires de l’administrateur du site, histoire de les visualiser plus rapidement? Suivez simplement les étapes ci-dessous:

1. Ajoutez les lignes suivantes à votre fichier style.css:

.authcomment {
background-color: #B3FFCC !important;
}

2. Éditez le fichier comments.php

Dans votre fichier comments.php, recherchez une ligne qui ressemble à celle-ci:

<li class=”<?php echo $oddcomment; ?>” id=”comment…

et remplacez la par:

<li class=”<?php
/* Utilisez uniquement la classe authcomment de style.css si le user_id est 1 (admin) */
if (1 == $comment->user_id)
$oddcomment = “authcomment”;
echo $oddcomment;
?>” id=”comment…

Et voila…

Ajouter des icônes dans votre menu

1. Rendez vous sur l’interface de gestion des menus et activez l’affichage des classes en cliquant sur les Options de l’écran.

menu_icons_1

2. Créez un item du menu pour la page d’accueil et attribuez lui la classe iconhome

menu_icons_2

3. Ajoutez le code CSS de votre icone du menu dans votre fichier style.css

.iconhome a{
   padding-left: 30px !important;
   background-image: url(images/home.png);
   background-position: center center;
   background-repeat: no-repeat;
}

 

Si vous souhaitez masquer le texte du menu et n’afficher que l’icône, ajoutez la ligne suivante:

text-indent: -9999px;

Votre code sera donc:

.iconhome a{
   background-image: url(images/home.png);
   background-position: center center;
   background-repeat: no-repeat;
   text-indent: -9999px;
}