Vous souhaitez désactiver l’ouverture par défaut du premier ongler de l’accordéon d’Elementor? Copiez le code ci-dessous dans votre fichier style.css:
.elementor-accordion .elementor-accordion-item:first-of-type {
display: none;}
Attention: ce code désactive l’affichage du premier onglet de l’accordéon, vous devez donc avoir un premier onglet qui sera vide.
Une des pages de votre site déborde sur la droite et affiche un espace blanc? Copiez le code suivant dans votre fichier style.css:
html,body{
width:100%;
overflow-x:hidden;
}
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.
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 :
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:
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é!
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
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
Vous souhaitez modifier la couleur de fond des textes sélectionnés sur les pages de votre site WordPress, copiez/collez le code suivant dans le fichier style.css de votre thème:
::-moz-selection { /* Code for Firefox */
color: #FFF;
background: yellow;
}
::selection {
color: #FFF;
background: yellow;
}
Et voilà!
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
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…
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