[RESOLU] WooCommerce – Problème alignement bouton commander boutique

[Simond]

Bonjour,

 

J’ai hérité d’un site internet commencé par une personne qui a visiblement du bidouiller dans le code .css. J’ai un soucis dans ma boutique, le bouton “commander” sous chaque photos de produits n’est pas centré et est collé à la photo (je souhaiterai mettre un espace et le centrer). Voir pièce jointe.

J’utilise wordpress avec le thème Bridge et woocommerce.

 

En fouillant sur le forum j’ai trouvé ces codes CSS pour résoudre le problème mais ça ne fait rien chez moi, quand j’entre le code .css dans l’éditeur de fichier du thème.

 

.woocommerce-loop-product__title {

min-height: 80px;

margin-bottom: 0 !important;

}

.woocommerce ul.products li.product .button,

.woocommerce-page ul.products li.product .button {

margin: 0 !important;

}

Auriez-vous une solution ?

Merci d’avance !

Simond

• Ce sujet a été modifié le il y a 1 année et 2 mois par Simond.
• Ce sujet a été modifié le il y a 1 année et 2 mois par Simond.
• Ce sujet a été modifié le il y a 1 année et 2 mois par Simond.
• Ce sujet a été modifié le il y a 1 année et 2 mois par WB2.

[Victor de Nivo-Web]

Bonjour,

Pouvez-vous nous envoyer le lien du site pour que nous puissions vous donner le CSS adapté?

le CSS que vous avez trouvé ne fait pas du tout ce que vous souhaitez. (C’est même tout l’inverse)

 

Victor Gauthereau, Président de Nivo-Web agence Web sur Paris et Bordeaux.
Vous avez apprécié mon aide ? Cliquez ici pour me remercier GRATUITEMENT
Besoin d'une agence web pour votre projet ? Contactez-nous ?
Site Web: https://nivo-web.fr
Email: victor@nivo-web.fr
Tel: 07 55 78 21 91
Standard: 09 77 25 01 18
Mes Ressources WordPress

[Simond]

Bonjour,

D’accord voici le site en questions : https://aife.ch/

 

Quand vous allez dans la boutique sur les pages de produits les boutons ne sont pas centré et sont collés à la photo.

Simond

[Victor de Nivo-Web]

Le code d’origine risque de bloqué et c’est assez mal fait. (sans doute à cause du thème choisi)

Cependant, ceci devrait fonctionner :

.woocommerce ul.products li.product .top-product-section {

display: flex !important;

flex-direction: column !important;

justify-content: center !important;

align-items: center !important;

}

body .top-product-section a.button {

margin: 10px !important;

}

Modifier les fichiers du thème est une mauvaise pratique qui vous posera problème à moyen terme.

Je vous recommande d’ajouter du CSS via Personnaliser > CSS additionnel (si votre thème le gère), sinon via une application comme WP Code. Ca sera beaucoup moins compliqué.

Victor Gauthereau, Président de Nivo-Web agence Web sur Paris et Bordeaux.
Vous avez apprécié mon aide ? Cliquez ici pour me remercier GRATUITEMENT
Besoin d'une agence web pour votre projet ? Contactez-nous ?
Site Web: https://nivo-web.fr
Email: victor@nivo-web.fr
Tel: 07 55 78 21 91
Standard: 09 77 25 01 18
Mes Ressources WordPress

2 utilisateurs ont remercié l'auteur de ce message.

WB2, Simond

[Simond]

Bonjour,

Incroyable ça fonctionne merci beaucoup je vous suis infiniment reconnaissant !

 

Simond

[WB2]

Tout comme Victor, je vous suggère aussi d’utiliser les CSS additionnels pour le futur, c’est plus sécurisé et plus facile à mettre en place 🙂

[Auteur]

Messages