Discussion :

[duboi]

Bonjour,

je n'arrive pas à remonter un widget (retour à la boutique) malgré firefox édition.
je voudrais mettre cette phrase en haut à droite sur toutes les pages woocommerce.

https://trazdd.site/product-category...s-beniouarain/

Merci

[NoSmoking]

Bonjour,
as tu essayé le positionnement fixe : position:fixed ?

Bizarre quand même la construction !

[duboi]

oui je dois pas trouver la bonne propriété;
as tu une proposition?

[NoSmoking]

En modifiant légèrement le code HTML comme suit :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<div class="textwidget retour">
  <a href="https://trazdd.site/shop">Retourner à la boutique</a>
</div>

inutile d'ajouter des éléments intermédiaires inutiles comme le <p> et en ajoutant le CSS suivant :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
.textwidget.retour {
  z-index: 10000;       /* pour mettre au dessus des autres */
  position: fixed;      /* la fameuse position fixed */ 
  top: .5em;            /* décalage des bords */
  right: 1em;
  padding: .5em;        /* donne de l'air au texte */
  background: #ffee00;  /* un fond pour le distinguer */
}
.textwidget.retour a {
  color: #333;          /* une couleur au choix */
}

tu auras la base, à toi de même le visuel que tu veux.

[duboi]

merci pour ton code, parcontre il est tout en haut.
La cliente souhaitait l'avoir sur la droite en haut mais sur les fiches produits et catégorie.
Du coup, faut que je rajouter un padding top à ton code ou un height?

[duboi]

on m'a donné ce code aussi mais ça marche pas non plus

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
.sidebar .widget-area{
	padding: 0px 20px!important;
}

[NoSmoking]

La cliente souhaitait l'avoir sur la droite en haut mais sur les fiches produits et catégorie.

là cela ne me parle pas, vu le lien que tu nous as donné.

Du coup, faut que je rajouter un padding top à ton code ou un height?

Ce qui permet de positionner ton élément ce sont les propriétés top et left, même si padding le fait indirectement, mais ce n'est pas le rôle.

[duboi]

Comme tu peux le voir ton bouton est placé en bas de page ici : https://trazdd.site/product-category...ilims-afghans/
J'ai mit une position relative mais je voudrais le mettre juste à coté du bloc tri par défaut à sa droite sur toutes les pages woocommerce , produits et catégorie.

[NoSmoking]

Dans ce cas il est préférable que tu changes ton élément de place dans ton code et que tu le places dans le conteneur de l'élément, le positionnement sera plus facile.

[duboi]

en fait j'ai qu'un widget woocommerce dans wordpress
je ne sais pas comment faire autrement ou comment coder

[NoSmoking]

Tu peux toujours essayer de mettre ton élément <div id="Content"> en display:flex :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
#Content {
    display: flex;
}

Ensuite modifier le CSS de ton élément <div class="content_wrapper clearfix"> comme suit :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
.with_aside .content_wrapper {
    max-width: 1240px;
    margin: 0 0 0 auto;
}

ceci devrait te remonter ton élément, mais à vérifier que cela se passe bien au redimensionnement.

[duboi]

ca marche, je te remercie beaucoup.
J'aurai jamais trouvé, je connais que le css de 6eme on va dire
Quand on est bon en css, ca rend service

[duboi]

Bonjour,
No smoking,

Je me permettais de revenir vers toi suite au retour boutique
que tu m'as aidé à créer.

Le css marche bien mais je m'aperçois que sur smartphone le retour boutique est trop à l'extrême droite.
EXEMPLE SUR cette url : https://www.fleurdelin-caen.fr/produ...ilims-afghans/

Aurais tu une propriété à me suggérer ?
Rappel du code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
.textwidget.retour {
  z-index: 10000;       /* pour mettre au dessus des autres */
  position: relative;      /* la fameuse position fixed */ 
  top: .5em;            /* décalage des bords */
  right: 1em;
  padding: .5em;        /* donne de l'air au texte */
  background: #ffee00;  /* un fond pour le distinguer */
}
.textwidget.retour a {
  color: #333;          /* une couleur au choix */
}
 
 
 
 
#Content {
    display: flex;
}
 
.with_aside .content_wrapper {
    max-width: 1240px;
    margin: 0 0 0 auto;
}
 
p.stock.out-of-stock{
  display :none;
}

[NoSmoking]

Aurais tu une propriété à me suggérer ?

c'est à traiter via les « Media Queries ».

[duboi]

genre pour mettre ca en dessous du header et non sur la droite car pas assez de place,
j'ai essayé un css de ce type mais j'ai jamais utilisé les medias queries. Ca marche pas, je peux le mettre sur la même feuille de style que le reste du site?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
@media*only*screen*and*(max-width:*1024px)*
{
    *
    {
        font-size : 0.4cm;
    }
        h1 , h1+p
    {
        font-size: 0.5cm;
    }
.textwidget.retour {
{
        max-height: 320px;
        margin: auto;
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        justify-content: center;
    }

[NoSmoking]

@media*only*screen*and*(max-width:*1024px)*

C'est quoi ces * dans ton code ?

.. mais j'ai jamais utilisé les medias queries

La règle @media sur MDN

[duboi]

un problème de copier coller je pense