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)