Ajouter un lien avec le nombre d'articles et le total du panier WooCommerce photo

Rendre la page panier WooCommerce réactive

27 juillet 2021 by Matt Biscay · Lecture: 3 minutes

Lors de mon dernier projet WooCommerce, j’ai remarqué que la page panier de WooCommerce n’était pas vraiment réactive sous Safari (iPhone, iOS) : le tableau ne s’empile pas comme il le devrait et toutes les colonnes sont comprimées. Les dernières colonnes sont hors du viewport.

Safari sous iOS (iPhone) semble être le seul concerné – je n’ai pas réussi à reproduire ce comportement sur FireFox, Chrome ou Opera.

Le site en question utilise Astra, qui est vraiment bien éprouvé, ainsi qu’Elementor comme constructeur de page.

Voici comment rendre le tableau du panier WooCommerce réactif, en utilisant quelques lignes de CSS.

Forcer la réactivité du panier WooCommerce

J’ai opté pour une solution propre, en CSS, en ne ciblant que les iPhones puisqu’ils sont les seuls concernés (Safari + résolution d’écran).

Voici donc le code utilisé pour rendre le panier WooCommerce réactif:

/*
Plugin Name: Sky WooCommerce Responsive Cart
Plugin URI: https://mattbiscay.com
Description: Make WooCommerce cart responsive
Version: 1.1
Author: Matt Biscay
Author URI: https://mattbiscay.com
*/

/* responsive cart */
@media only screen and ( max-width: 479px ) {
  
  .short-description, .product_meta, body.woocommerce div.product .woocommerce-tabs, body.woocommerce #content div.product .woocommerce-tabs { display: none; }
  body.woocommerce .images { float: none !important; width: auto !important; margin-bottom: 40px !important; clear: both !important; }
  
  table .product-thumbnail { display: none; }
  
  .woocommerce-page #content div.product form.cart .variations { margin-left: 0; }
  
  table.cart th, #content table.cart th, table.cart td, #content table.cart td, table.cart tr, #content table.cart tr, #content-area table tr, #content-area table td, #content-area table th { padding: .857em 0.287em; }
  
  .woocommerce .woocommerce .col2-set .col-1, .woocommerce-page .col2-set .col-1, .woocommerce .col2-set .col-2, .woocommerce-page .col2-set .col-2 { width: 100% !important; }
  .woocommerce .woocommerce form .form-row, .woocommerce-page form .form-row { width: auto !important; float: none !important; }
  
  #order_review .shop_table { margin-left: 0; }
  
  /* cart: tax on its own line */
  .includes_tax { display: block; }
  
}

/* cart weird bug on Safari: cart table is not collapsing */
/* this corrects the bug on iphones */

@media (max-width: 768px){
  .iphone .woocommerce table.shop_table_responsive tr,
  .iphone .woocommerce-page table.shop_table_responsive tr {
    display: flex;
    flex-direction: column;
    flex-basis: 100%;
    flex: 1;
  }
  
  .woocommerce table.shop_table_responsive tr td::before, .woocommerce-page table.shop_table_responsive tr td::before {
    content: attr(data-title) ' ';
    font-weight: 700;
    float: left;
  }
  
  p.no-shipping-options {
    clear: both;
    margin-top: 3rem;
  }
}
Code language: CSS (css)

Créer un enregistrement BIMI pour afficher votre logo dans vos emails clients et prospects

14 March 202213 juillet 2021 by Matt Biscay · Lecture: 8 minutes

Les Brand Indicators for Message Identification (BIMI) – indicateurs de marque pour l’identification des messages en français – sont un moyen standardisé pour les entreprises d’utiliser leur logo comme indicateur visible pour aider les destinataires d’e-mails à reconnaître et à éviter les messages frauduleux.

BIMI s’appuie sur le protocole d’authentification de messagerie DMARC pour développer la confiance avec les clients actuels et potentiels.

Avantages de l’enregistrement BIMI

En publiant votre fiche BIMI et le logo associé dans le DNS, votre marque sera facilement reconnue et approuvée par les clients actuels et futurs.

Non seulement les clients actuels et potentiels sont convaincus que vos e-mails sont légitimes, mais ils gagnent également un niveau de confiance en voyant votre logo approuvé dans leur boîte de réception.

Chaque fois qu’un client reçoit un message de votre domaine en utilisant la norme BIMI, au moins trois impressions de marque uniques potentielles sont effectuées: liste de messages, adresse e-mail dans le message et dans le message lui-même.

Plus vite votre entreprise décide d’adopter le BIMI (lorsqu’il est disponible via votre fournisseur de messagerie sortante), plus votre marque sera reconnue.

Étape 1 : mettre en place SPF, Sender-ID, DKIM et DMARC (et HTTPS)

Habituellement, les logos sont automatiquement extraits de diverses sources et organisés par les fournisseurs de clients de messagerie. En conséquence, différents logos s’affichent en fonction du client de messagerie et de l’appareil. Avec BIMI, les marques contrôlent leurs logos officiels affichés, quelle que soit la taille de la marque.

Les symboles sont un moyen succinct et efficace de communiquer des informations sur votre entreprise. Un logo est un élément important de la marque de votre entreprise et a un impact significatif sur la perception du public d’une entreprise.

En fait, un logo est l’un des investissements de marque les plus importants qu’une entreprise puisse faire. Il attire l’attention, fait une première impression forte, est le fondement de votre identité de marque, de la sécurité, est mémorable, vous sépare de la concurrence, favorise la fidélité à la marque et est attendu par votre public.

La spécification BIMI s’appuie sur les normes d’authentification de messagerie existantes telles que Sender Policy Framework (SPF), DomainKeys Identified Mail (DKIM) et Domain-based Message Authentication, Reporting & Conformance (DMARC).

Les marques qui déploient correctement l’authentification des e-mails à l’aide de DMARC pourront tirer parti de BIMI. DMARC est une norme qui permet aux propriétaires de domaines (marques) de protéger leurs domaines en définissant des politiques d’authentification des e-mails.

DMARC fournit également des rapports qui aident à configurer l’authentification des e-mails à l’aide de SPF et DKIM sur toutes les sources.

Je vous conseille le tutoriel sur la mise en place de DMARC pour votre domaine, ainsi que celui sur l’authentification SPF, Sender-ID et DKIM pour tout paramétrer dans les règles de l’art.

Le domaine doit impérativement être servi en HTTPS.

Une fois toutes les sources valides identifiées et authentifiées, une politique DMARC restrictive (c’est-à-dire p=quarantine ou p=reject) peut être définie:

_dmarc IN TXT v=DMARC1; p=reject; rua=mailto:dmarc@example.com;

En utilisant cette stratégie, les propriétaires de domaine peuvent contrôler ce qu’il advient des messages non authentifiés (non approuvés), qu’ils finissent dans le spam ou qu’ils soient complètement rejetés par le fournisseur de messagerie destinataire.

DMARC aide les marques à se protéger contre divers types d’abus de domaine et d’attaques de phishing, mais courants.

En termes simples, vous souhaitez éventuellement avoir vos enregistrements DMARC avec une politique de quarantaine ou de rejet pour le domaine de votre marque, que vous implémentiez ou non BIMI.

Créer un site staging pour WordPress sur un sous-domaine

27 September 202412 juillet 2021 by Matt Biscay · Lecture: 5 minutes

Le Centre de Kriya Yoga France n’avait pas de site staging, ce site de développement et de test qui permet de tester, développer ou mettre à jour de nouvelles extensions, sans affecter le site principal.

Une des extensions a eu besoin d’être débugguée par ses concepteurs mais pour des raisons de confidentialité, il nous est apparu intéressant et plus sécurisé de donner accès à un site de développement, fraîche copie du site original, pour le débuggage.

Si vous avez besoin de créer un site staging pour votre site WordPress et que votre hébergeur ne le propose pas, voici comment faire.

Étape 1 : créer un sous-domaine au niveau DNS

Nous choisissons la solution la plus simple: servir le site STAGING depuis un sous-domaine. Il suffit de créer un nouvel enregistrement DNS sous la forme:

staging IN A xxx.xxx.xxx.xxxCode language: CSS (css)

où staging represente le sous-domaine et xxx.xxx.xxx.xxx représente l’adresse IPv4 du serveur.

Étape 2 : créer le server block sous NginX

Le domaine étant déjà actif, j’ai uniquement rajouté ce server block:

### STAGING ###
 server {
 listen              443 ssl http2;
 listen              [::]:443 ssl http2;
 server_name staging.kriyayoga.fr;
 root /home/www/kriyayoga/staging/public_html;
 set $root /home/www/kriyayoga/staging/public_html;
 index index.php index.htm index.html;
 error_log /var/log/nginx/kriyayoga_staging_error.log;
 #SSL
 ssl_certificate        /etc/nginx/ssl/kriyayoga.fr/fullchain.pem;
 ssl_certificate_key    /etc/nginx/ssl/kriyayoga.fr/privkey.pem;
 include snippets/mime-types.conf;
 #Exclusions
 include snippets/exclusions.conf;
 #Security
 include snippets/security.conf;
 #Static Content
 include snippets/static-files.conf;
 #Fastcgi cache rules
 include snippets/fastcgi-cache.conf;
 include snippets/limits.conf;
 include snippets/nginx-cloudflare.conf;
 #Gzip
 include snippets/gzip.conf;
 location / {
 try_files $uri $uri/ /index.php?$args;
 }
 location ~ .php$ {
 try_files $uri =404;
 include snippets/fastcgi-params.conf;
 fastcgi_pass unix:/run/php/php7.4-fpm.sock;
 #Skip cache based on rules in snippets/fastcgi-cache.conf.
 fastcgi_cache_bypass $skip_cache;
 fastcgi_no_cache $skip_cache;
 #Define memory zone for caching. Should match key_zone in fastcgi_cache_path above.
 fastcgi_cache kriyayoga;
 #Define caching time.
 fastcgi_cache_valid 60m;
 #increase timeouts
 fastcgi_read_timeout 6000;
 fastcgi_connect_timeout 6000;
 fastcgi_send_timeout 6000;
 proxy_read_timeout 6000;
 proxy_connect_timeout 6000;
 proxy_send_timeout 6000;
 send_timeout 6000;
 #these lines should be the ones to allow Cloudflare Flexible SSL 
 #to be used so the server does not need to decrypt SSL if you wish
 proxy_set_header X-Forwarded-Host $host;
 proxy_set_header X-Forwarded-Server $host;
 proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
 proxy_set_header X-Forwarded-Proto https;
 proxy_set_header X-Real-IP $remote_addr;
 proxy_set_header X-NginX-Proxy true;
 }
 #Protect WooCommerce upload folder from being accessed directly.
 #You may want to delete this config if you are using "Redirect Only" method for downloadable products.
 #Place this config towards the end of "server" block in NginX configuration.
 location ~* /wp-content/uploads/woocommerce_uploads/ {
   if ( $upstream_http_x_accel_redirect = "" ) {
     return 403;
     }
     internal;
 }
 }Code language: PHP (php)

Testez la nouvelle configuration:

nginx -t

Puis redémarrez NginX:

service nginx reload

Note: il est important de noter que je n’ai pas besoin de créer de certificat SSL puisque mes certificats sont wildcard par défaut. Si ce n’est pas le cas chez vous, pensez à en générer pour votre sous-domaine.

← Précédent Suivant →