Redesigner le panier et la page de validation (css)

Voici un petit bout de code css, si comme moi vous avez cherché une solution pour redesigner certains éléments des pages Panier et ValidationDeCommande dans le constructeur Divi.

Assurément on peut faire plus propre, mais je donne déjà ça comme ça, si ça peut aider quelqu’un.

Et si vous avez d’autres solutions, je suis preneur 😉 !

/* ———————————————————————–

*

*

*     PAGES DU WOOCOMMERCE : PANIER & VALIDATION DE COMMANDE

*

*

* ———————————————————————–

*/

 

/* TABLEAU D AFFICHAGE DES PRODUITS */

.woocommerce table.shop_table {

border: 1px solid rgba(0,100,0,1);

margin: 0 0px 4px 0;

margin-left: auto;

margin-right: auto;

width: 70%;

border-collapse: separate;

border-radius: 1px;

background: #ffffff;

}

 

/* PANIER DE COMMANDE – SETUP GLOBAL AVANT SURCHARGE PAR CHAMPS */

/* setup général des boutons et zones message */

.woocommerce #respond input#submit,

.woocommerce-page #respond input#submit,

.woocommerce #content input.button,

.woocommerce-page #content input.button,

.woocommerce-message,

.woocommerce-error,

.woocommerce-info {

background: #000000!important;

}

 

/* LIGNE DE MESSAGE « Panier mis à jour » + error + code appliqué… */

.woocommerce-message,

.woocommerce-error{

font-weight:600!important;

font-size: 14px!important;

text-align:center;

/* background-color: rgba(10,10,10,.05)!important; */

background:black!important;

color: #fff!important;

margin-left: auto;

margin-right: auto;

width: 70%;

}

 

/* ZONE DE RECAPITULATION DES PRODUITS DU PANIER */

/* ligne du bandeau du haut*/

.woocommerce table.shop_table th {

background:#6869682b!important;

font-weight: 400;

padding: 9px 9px;

line-height: 1em!important;

}

 

/* lignes du panier */

/* croix pour retirer un produit */

.product-remove{

font-size: 150%;

color: black;

background: #6869682b;

width: 3%;

}

 

/* image du produit */

/* zone ou va l’image du produit */

.product-thumbnail{

/* background: #686968; */

margin-left: auto!important;

margin-right: auto!important;

}

/* vignette du produit */

.product-thumbnail a img{

/* border:2px solid #dd2222!important; */

width:30%!important;

}

 

/* Nom du produit */

.product-name a{

color:black;

font-size:14px;

font-weight: 500;

/* text-transform: uppercase; */

}

 

/* Prix unitaire */

.product-price{

color:black;

font-size:11px;

font-weight:400;

}

 

/* Nombre d unités commandées */

.product-quantity{

color: black;

font-size:11px;

font-weight:400;

}

/* bouton avec le nombre commandé pur un produit */

.woocommerce-page .quantity input.qty {

font-weight:600!important;

font-size: 15px!important;

background-color: rgba(10,10,10,.05)!important;

color: #000!important;

border:0.5px solid #dddddd!important;

border-radius: 3px!important;

-webkit-box-shadow: none!important;

height: 25%;

width:100%;

}

/* total de la ligne*/

.product-subtotal{

color: black;

font-size:13px;

font-weight:800;

}

 

/* ZONE DE FOND : CODE PROMO + SOUMETTRE LE PANIER */

/* Ligne de fond */

td.actions{

background:#6869682b!important;

}

/* toute la zone coupon : texte a saisir+bouton */

.coupon{

/* background:rgba(100,100,100,.5); */

/* height: 30px!important; */

}

/* Zone ou s’affiche le texte « Code coupon » */

#coupon_code{

background-color:#eeffee!important;

height: 40px!important;

}

/* zone de saisie et texte du placeholder */

.coupon>input::-webkit-input-placeholder {

background-color:#eeffee!important;

height: 40px!important;

color:black!important;

}

.coupon>input:-moz-placeholder { /* Firefox 18- */

background-color:#eeffee!important;

height: 40px!important;

color:black!important;

}

.coupon>input::-moz-placeholder {  /* Firefox 19+ */

background-color:#eeffee!important;

height: 40px!important;

color:black!important;

}

.coupon>input:-ms-input-placeholder {

background-color:#eeffee!important;

height: 40px!important;

color:black!important;

}

 

/* boutons appliquer le code promo*/

.coupon>button{

background-color:#8CAF15!important;

height: 40px!important;

color:white!important;

font-size: 13px!important;

font-weight: 400!important;

padding: 2em 2em 2em 4em;

line-height: 1em!important;

border: 0px solid black!important;

border-radius: 0px;

-webkit-transition: all .5s;

position: relative;

transition:none!important;

}

/* boutons Mettre a jour le panier*/

.actions>button,

.actions>button:disabled{

background-color:#000000!important;

opacity: 1!important;

height: 40px!important;

color:white!important;

font-size: 16px!important;

font-weight: 400!important;

padding: 2em 2em 2em 4em;

line-height: 1em!important;

border: 1px solid black!important;

border-radius: 3px;

-webkit-transition: all .2s;

position: relative;

transition:none!important;

}

 

/* Bouton Valider la commande */

.checkout-button {

background-color:#000000!important;

width: 70%;

color:white!important;

font-size: 16px!important;

font-weight: 400!important;

}

 

.woocommerce-cart table.cart td.actions .coupon .input-text{

width: 250px;

font-weight:300!important;

font-size: 14px!important;

/* background-color: rgba(100,0,0,.9)!important; */

background-color:blue!important;

color: #0ff!important;  /* == couleur en saisie */

border:0.5px solid #dddddd!important;

border-radius: 5px;

-webkit-box-shadow: none!important;

box-shadow: none!important;

border: none!important;

}

 

/* box de saisie du coupon */

.coupon a {

display:block;

display:inline;

width:150px;

line-height:50px;

text-align:center;

vertical-align:middle;

background:#55dd55;

color:yellow!important;

text-decoration:none;

}

 

/* Barre du haut de page de validation */

.woocommerce-info{

font-weight:600!important;

font-size: 14px!important;

text-align:center;

background-color:black!important;

color: #fff!important;

margin-left: auto;

margin-right: auto;

}

 

/* Bouton Commander */

.woocommerce-checkout-payment button.button,

.woocommerce-checkout-payment button.button.alt,

.woocommerce-checkout-payment  button.button.alt.disabled

{

background-color:#000000!important;

width: 20%;

color:white!important;

font-size: 16px!important;

font-weight: 400!important;

}

 

/* —- AJUSTEMENT POUR MOBILE —- */

@media (max-width: 768px) {

.woocommerce table.shop_table {

width: 100%;

}

.woocommerce #content table.cart .product-thumbnail,

.woocommerce table.cart .product-thumbnail,

.woocommerce-page #content table.cart .product-thumbnail,

.woocommerce-page table.cart .product-thumbnail {

display: unset;

}

.product-remove{

background: transparent!important;

margin-left: 43%!important;

}

.product-thumbnail a img{

margin-left: 30%!important;

width:100px!important;

}

.coupon>input,

.coupon>button,

.actions>button,

.checkout-button

{

width:100%!important;

}

 

}

 

====================