Comment customiser la page de checkout comme la version de demo?

  • Posts: 231
  • Thank you received: 41
  • Hikashop Business
1 year 6 months ago #350650

-- url of the page with the problem -- : www.guillenphoto.com/fr/hikashop-les-cat.../checkout/cid-1.html

Bonjour,

pourriez-vous me dire comment customiser la page de checkout comme la version de demo? A savoir :

- Avoir les titres cadrés à gauche et pas centrés?
- diminuer la taille de l'image pour afficher le prix et la quantité de manière plus aérée?
- voir chaque produit dans un style grisé?
- avoir le total dans un style grisé.

Pour l'instant je n'ai pas de séparation entre les différentes informations. C'est très difficile à lire?

J'ai recherché des informations sur ces customisations. Je n'ai pas trouvé comment faire.

J'espère que vous pourrez m'aider. En effet, après cette étape je vais pouvoir passer à l'importation de mes produits par des fichiers csv.

Sincèrement,
A. Guillen

Attachments:

Please Log in or Create an account to join the conversation.

  • Posts: 82570
  • Thank you received: 13293
  • MODERATOR
1 year 6 months ago #350654

Bonjour,

Le problème c'est que votre template n'a aucun CSS pour les tableaux. Normalement, un template est sensé avoir cela par défaut...

Rajoutez le CSS du template par défaut de Joomla pour les tableaux et cela sera mieux.
Le voilà:

.table {
  --table-bg: transparent;
  --table-accent-bg: transparent;
  --table-striped-color: #22262a;
  --table-striped-bg: rgba(0, 0, 0, 0.05);
  --table-active-color: #22262a;
  --table-active-bg: rgba(0, 0, 0, 0.1);
  --table-hover-color: #22262a;
  --table-hover-bg: rgba(0, 0, 0, 0.075);
  width: 100%;
  margin-bottom: 1rem;
  color: #22262a;
  vertical-align: top;
  border-color: #dfe3e7;
}
.table > :not(caption) > * > * {
  padding: 0.5rem 0.5rem;
  background-color: var(--table-bg);
  border-bottom-width: 1px;
  -webkit-box-shadow: inset 0 0 0 9999px var(--table-accent-bg);
          box-shadow: inset 0 0 0 9999px var(--table-accent-bg);
}
.table > tbody {
  vertical-align: inherit;
}
.table > thead {
  vertical-align: bottom;
}
.table > :not(:first-child) {
  border-top: 2px solid currentColor;
}

.caption-top {
  caption-side: top;
}

.table-sm > :not(caption) > * > * {
  padding: 0.25rem 0.25rem;
}

.table-bordered > :not(caption) > * {
  border-width: 1px 0;
}
.table-bordered > :not(caption) > * > * {
  border-width: 0 1px;
}

.table-borderless > :not(caption) > * > * {
  border-bottom-width: 0;
}
.table-borderless > :not(:first-child) {
  border-top-width: 0;
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
  --table-accent-bg: var(--table-striped-bg);
  color: var(--table-striped-color);
}

.table-active {
  --table-accent-bg: var(--table-active-bg);
  color: var(--table-active-color);
}

.table-hover > tbody > tr:hover > * {
  --table-accent-bg: var(--table-hover-bg);
  color: var(--table-hover-color);
}

.table-primary {
  --table-bg: #cfd4dd;
  --table-striped-bg: #c5c9d2;
  --table-striped-color: black;
  --table-active-bg: #babfc7;
  --table-active-color: black;
  --table-hover-bg: #bfc4cc;
  --table-hover-color: black;
  color: black;
  border-color: #babfc7;
}

.table-secondary {
  --table-bg: #e2e3e5;
  --table-striped-bg: #d7d8da;
  --table-striped-color: black;
  --table-active-bg: #cbccce;
  --table-active-color: black;
  --table-hover-bg: #d1d2d4;
  --table-hover-color: black;
  color: black;
  border-color: #cbccce;
}

.table-success {
  --table-bg: #dae6da;
  --table-striped-bg: #cfdbcf;
  --table-striped-color: black;
  --table-active-bg: #c4cfc4;
  --table-active-color: black;
  --table-hover-bg: #cad5ca;
  --table-hover-color: black;
  color: black;
  border-color: #c4cfc4;
}

.table-info {
  --table-bg: #d6e0e8;
  --table-striped-bg: #cbd5dc;
  --table-striped-color: black;
  --table-active-bg: #c1cad1;
  --table-active-color: black;
  --table-hover-bg: #c6cfd7;
  --table-hover-color: black;
  color: black;
  border-color: #c1cad1;
}

.table-warning {
  --table-bg: #efe0cc;
  --table-striped-bg: #e3d5c2;
  --table-striped-color: black;
  --table-active-bg: #d7cab8;
  --table-active-color: black;
  --table-hover-bg: #ddcfbd;
  --table-hover-color: black;
  color: black;
  border-color: #d7cab8;
}

.table-danger {
  --table-bg: #edd2d1;
  --table-striped-bg: #e1c8c7;
  --table-striped-color: black;
  --table-active-bg: #d5bdbc;
  --table-active-color: black;
  --table-hover-bg: #dbc2c1;
  --table-hover-color: black;
  color: black;
  border-color: #d5bdbc;
}

.table-light {
  --table-bg: #f9fafb;
  --table-striped-bg: #edeeee;
  --table-striped-color: black;
  --table-active-bg: #e0e1e2;
  --table-active-color: black;
  --table-hover-bg: #e6e7e8;
  --table-hover-color: black;
  color: black;
  border-color: #e0e1e2;
}

.table-dark {
  --table-bg: #353b41;
  --table-striped-bg: #3f454b;
  --table-striped-color: white;
  --table-active-bg: #494f54;
  --table-active-color: white;
  --table-hover-bg: #444a4f;
  --table-hover-color: white;
  color: white;
  border-color: #494f54;
}

.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 575.98px) {
  .table-responsive-sm {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}
@media (max-width: 767.98px) {
  .table-responsive-md {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}
@media (max-width: 991.98px) {
  .table-responsive-lg {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}
@media (max-width: 1199.98px) {
  .table-responsive-xl {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}
@media (max-width: 1399.98px) {
  .table-responsive-xxl {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

Please Log in or Create an account to join the conversation.

  • Posts: 231
  • Thank you received: 41
  • Hikashop Business
1 year 6 months ago #350671

Bonjour Nicolas,

je vous remercie pour votre réponse rapide et parfaite.

La mise en forme fonctionne parfaitement. C'est très beau et très professionnel.

Je voulais un design simple, sobre, efficace et élégant (sans fioriture). C'est pour cette raison que j'aime votre démonstration. C'est ce qui m'a incité à acheter votre produit.

Concernant votre question sur mon template, j'ai utilisé Template Creator pour le générer.
J'ai effectué ce changement après le passage à la version 4 de Joomla il y 4 mois.
Pendant 13 ans, j'ai utilisé le Template Creativity de Gavick Pro. Mais je n'étais jamais satisfait avec les positions proposées.
J'ai donc choisi Template Creator pour réaliser ce dont j'avais vraiment envie comme design. Je voulais une présentation simple et sobre correspondant à mes besoins.
Je ne m'étais pas rendu compte qu'il y avait d'autres contraintes comme cette surchrage des tableaux.

Je vous remercie une nouvelle fois pour votre professionnalisme et votre aide.
Votre produit correspond exactement à ce que je recherchais car il me donne toutes les fonctions que j'attendais.

Sincèrement,
A. Guillen

Please Log in or Create an account to join the conversation.

  • Posts: 82570
  • Thank you received: 13293
  • MODERATOR
1 year 6 months ago #350675

Bonjour,

Vous voulez parler de Template Creator CK ( www.template-creator.com/en/ ) ?
Bizarre que le template manque ce CSS alors. Il faudrait notifier le développeur de cela. Je pense que c'est dommage que les tableaux n'ai aucun CSS par défaut avec les templates générés, alors même que les templates Joomla ont normalement cela d'inclus.

Please Log in or Create an account to join the conversation.

  • Posts: 231
  • Thank you received: 41
  • Hikashop Business
1 year 6 months ago #350682

Bonjour Nicolas,

je viens d'upgrader de Essential vers Business.
Je vais paramétrer correctement la gestion des devises. C'est absolument crucial dans mon cas.
Je vais suivre vos recommandations.

Pour vous répondre sur Template Creator, il s'agit bien de ce produit. Je le trouve bien adapté à mes besoins et à mes attentes. pour l'intégration de HikasShop j'ai par exemple modifié plusieurs fois mon template principal pour trouver le meilleur design.

Suite à votre remarque je vais contacter le développeur. Je reviendrai vers vous lorsque j'aurai une réponse.

Merci pour votre aide.

Sincèrement,
A. Guillen

The following user(s) said Thank You: Philip

Please Log in or Create an account to join the conversation.

Time to create page: 0.070 seconds
Powered by Kunena Forum