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)Retarder l’affichage du panier
Même avec le nouveau code, il peut y avoir un effet de reflow : pendant quelques dixièmes de secondes, on peut apercevoir le tableau changer de direction et s’empiler, ce qui n’est pas très esthétique.
J’ai opté pour un affichage légèrement retardé du panier, de quelques dixièmes de secondes, de manière à ce que le panier s’affiche lorsqu’il est déjà empilé:
/*
Author: Matt Biscay
Author URI: https://mattbiscay.com
*/
/* hide the cart first, then animate into showing */
.woocommerce-cart-form {
animation: cssAnimation 0s 0.6s forwards;
opacity: 0;
}
@keyframes cssAnimation {
to { opacity: 1; }
}
/* hide quantity controls, which are added with JS and reflow the cart */
.quantity .minus, .quantity .plus {
display: none !important;
}Code language: CSS (css)Et voilà, le tableau qui forme le panier WooCommerce s’empile maintenant sous Safari comme sous les autres navigateurs et ne s’affiche que lorsqu’il est prêt.
Rencontrez-vous des défis avec votre site WordPress ou WooCommerce? Laissez-moi les résoudre pour vous.