[Résolu] Alignement des produits.

  • WordPress :5.0.3
  • Statut : résolu
13 sujets de 1 à 13 (sur un total de 13)
  • Auteur
    Messages
  • #2250884
    que
    Participant
    Padawan WordPress
    59 contributions

    Bonjour,

    [b]Ma configuration WP actuelle :[/b] [b]- Version de WordPress :[/b] 5.1 [b]- Version de PHP/MySQL :[/b] 7.2.15-1+0~20190209065123.16+stretch~1.gbp3ad8c0 / 5.5.5 [b]- Thème utilisé :[/b] Mon thème enfant [b]- Extensions en place :[/b] Advanced Order Export For WooCommerce (2.1.1), Astra Starter Sites (1.2.12), Booster for WooCommerce (4.2.0), Elementor (2.5.5), Forum_wordpress_fr (4.1), Google Analytics Dashboard for WP (GADWP) (5.3.7), Google Analytics for WordPress by MonsterInsights (7.4.2), Head, Footer and Post Injections (3.1.2), Hide Related Products in WooCommerce (1.0), Matomo tracking, by Sergio Santos (1.1.2), More Sorting Options for WooCommerce (3.1.5), WooCommerce (3.5.6), WooCommerce – Store Exporter (2.0.2), WooCommerce Blocks (1.4.0), WooCommerce Cart (1.0.2), Woocommerce Cart Limit (1.1), WooCommerce Piwik integration (2.1.4) [b]- Adresse du site :[/b] https://stephane.couanouz.net [b]- Nom de l’hébergeur :[/b] nginx/1.10.3

    Problème(s) rencontré(s) : Alignement des produits.

    Comme vous pouvez le voir sur le lien suivant  : https://stephane.couanouz.net/?product_cat=epicerie-sucree-4

    Je n’arrive pas à aligner les produits de manière à avoir

    Prix initial aligné pour tous les produits

    Taxe Carbone aligné pour tous les produits

    Prix aligné pour tous les produits

    Ajouter au panier aligné pour tous les produis.

    De plus je n’arrive pas à réduire l’espace en taxe carbone et Prix.

     

    Merci pour votre aide.

    #2250929
    ferman
    Participant
    Maître WordPress
    709 contributions

    C’est simplement parce-que vous n’avez pas le même nombre de lignes pour la description de l’article. Comparez avec épicerie salée: toutes les descriptions sont sur deux lignes donc tout est aligné. Faites pareil pour l’épicerie sucrée .

    #2250934
    que
    Participant
    Padawan WordPress
    59 contributions

    Bonjour,

    Merci de la réponse. Effectivement pour “épicerie salée ” tout fonctionne car je suis sur 2 lignes donc ça tombe bien mais dans épicerie sucré ça tombe mal car j’ai 3 linges, 2 lignes et 1 ligne. J’ai testé en ajoutant <p>&nbsp;</p> ou &nbsp; mais ça ne tombe jamais pareil. Je ne sais comment faire

    #2250938
    ferman
    Participant
    Maître WordPress
    709 contributions

    Je ne vois pas d’autre solution simple que de modifier votre description de produit. Quant à augmenter l’espace entre taxe carbone et prix, je crois que c’est trop compliqué (pour moi).  Comment avez-vous entré “prix initial” et “taxe carbone” dans vos produits?

    #2250941
    que
    Participant
    Padawan WordPress
    59 contributions

    Voici le code que j’ai utilisé :

    <p style=”text-align: left;”>Champignons de paris Casino 230g <span style=”color: #999999;”>7.78 €/kg (taxe carbone incluse) </span></p> <p style=”text-align: right;”>Prix initial: 2 Taxe carbone: 3</p>

    #2250949
    ferman
    Participant
    Maître WordPress
    709 contributions

    Normalement, dans woocommerce on entre simplement le prix en l’écrivant dans un onglet prix, dans la page produit. Vous l’avez entré (ainsi que  la taxe carbone”) autrement (dans un document html)? Comment avez vous fait?

    #2250952
    que
    Participant
    Padawan WordPress
    59 contributions

    Via TABLEAU DE BORD je vais dans PRODUIT qui s j’accede à tous mes produits. Ensuite je vais sur mon produit et je clique sur MODIFIER et je peux ajouter des informations au format texte et avec du html, j’ai ajouté le code suivant :

    <p style= »text-align: left; »>Champignons de paris Casino 230g <span style= »color: #999999; »>7.78 €/kg (taxe carbone incluse) </span></p> <p style= »text-align: right; »>Prix initial: 2 Taxe carbone: 3</p>

    Cf le doc en pj.

    Fichiers joints :
    Vous devez être connecté pour voir les fichiers joints.
    #2250974
    momofr@free.fr
    Modérateur
    Maître WordPress
    2435 contributions

    Salut, ce n’est pas évident à réaliser car on est dans une page archive, sans entrer dans les détails ni créer une vraie page d’archive produit qui utilise les fonctions CSS Flex qui conviendraient bien à ton problème (là c’est du dev pour et dur), tu peux essayer ces règles CSS que je viens de tester (à modifier selon tes envies) :

    h2.woocommerce-loop-product__title p:first-child {
    	text-align: center !important;
    	height: 100px;
    }
    h2.woocommerce-loop-product__title p:nth-child(2n) {
    	text-align: center !important;
    	height: 20px;
    }
    .astra-shop-summary-wrap span.price {
    	text-align: center;
    }
    .woocommerce ul.products li.product .button, .woocommerce-page ul.products li.product .button {
    	line-height: 1.3;
    	padding: 8px 20px;
    	border-radius: 8px;
    }

    Tu mets ces règles dans Apparence -> Personnaliser -> CSS additionnelle.

    Fichiers joints :
    Vous devez être connecté pour voir les fichiers joints.
    #2250981
    ferman
    Participant
    Maître WordPress
    709 contributions

    Pour faire ce que vous voulez, il faut enlever les styles du paragraphe et leur attribuer une classe. Dans votre cas, choisissez un produit,  enlevez<p style = text-align :left> et remplacez par <p class=”prix” > (ou le nom que vous voulez).

    Dans vos css personnalisées, ajoutez alors:

    p.prix {text-align:left; 
               line-height' '; }

    Regardez ce lien pour tester les valeurs à entrer pour arriver à ce que vous voulez. Quand vous serez satisfait, il ne vous restera qu’à mettre la même classe pour les autres produits.

    Edit: Vous  venez de recevoir de bien meilleurs conseils, et plus complets! Donc oubliez les miens.

    • Cette réponse a été modifiée le il y a 4 mois et 1 week par  ferman.
    • Cette réponse a été modifiée le il y a 4 mois et 1 week par  ferman.
    • Cette réponse a été modifiée le il y a 4 mois et 1 week par  ferman.
    #2251027
    que
    Participant
    Padawan WordPress
    59 contributions

    Bonsoir,

    MERCI pour votre aide.

    Momo c’est super tout fonctionne. J’ai modifié un peu le code pour que ce soit comme je le souhaite.

    Il y a une chose que je n’arrive pas à faire c’est qd un produit vient d’être ajouté au panier il y a un lien qui apparait sous le produit ajouté et apparait aussi juste à coté du mot panier la représentation comme si le produit était coché. Je souhaite l’enlever. je ne vois comment le faire dans le code. j’ai essayé mais ça ne fonctionne pas.

    #2251056
    momofr@free.fr
    Modérateur
    Maître WordPress
    2435 contributions

    Salut, essaye ça :

    .astra-shop-summary-wrap .added_to_cart.wc-forward, .astra-shop-summary-wrap  .woocommerce a.button.added::after {
    	display: none !important;
    }

    #2251365
    que
    Participant
    Padawan WordPress
    59 contributions

    Bonjour,

    J’ai ajout é ce code
    .astra-shop-summary-wrap .added_to_cart.wc-forward, .astra-shop-summary-wrap  .woocommerce a.button.added::after {display: none !important;}
    dans  Apparence -> Personnaliser -> CSS additionnelle. mais ça ne fonctionne pas.

    Voici sur le document en pj ce que j’ai enregistré en rouge qui apparait maintenant et que je souhaite faire disparaitre.

    • Cette réponse a été modifiée le il y a 4 mois par  que.
    • Cette réponse a été modifiée le il y a 4 mois par  que.
    • Cette réponse a été modifiée le il y a 4 mois par  que.
    Fichiers joints :
    Vous devez être connecté pour voir les fichiers joints.
    #2251443
    momofr@free.fr
    Modérateur
    Maître WordPress
    2435 contributions

    Salut, inverse les classes (woocommerce est le parent) pour pour le ::after :

    .astra-shop-summary-wrap .added_to_cart.wc-forward, .woocommerce .astra-shop-summary-wrap a.button.added::after {display: none !important;}

     

     

13 sujets de 1 à 13 (sur un total de 13)
  • Vous devez être connecté pour répondre à ce sujet.