Como mudar ordem do preço na vitrine?

CMS Personalização
,
#1

Olá lojistas, tudo bem?
Um caso bem normal é quando as pessoas decidem trocar a ordenação de preços da vitrine. No caso, por padrão mostra:

Preço cheio
Preço parcelado
Preço da forma de pagamento com desconto.

Caso queira colocar:

Preço da forma de pagamento com desconto
Preço cheio
Preço parcelado

O código abaixo irá lhe ajudar, basta copiar ele e colar no seu CMS em Layout > Inserir Código > Editar CSS:

// Add your custom CSS here.
.product-card .prices__value + span {
  display: flex;
  flex-direction: column;
  order: -1;
  min-height: 80px;
  justify-content: space-between;
}

.product-card .prices__value + span .prices__discount {
  order: -1;
}
.product-card .prices__value + span .prices__discount span {
  order: -1;
  font-size: var(--font-size-lg);
  color: var(--success);
}
.product-card .prices__value {
  font-size: 1rem;
  position: absolute;
  margin: 17px 30%;
}
.product-card {
  text-align: center
}
.product-card .prices__value small {
   display: none;
}
.product-card .prices__installments {
  font-weight: bold !important;
}
.product-card .prices__discount span {
  font-weight: bold !important;
}
.product-card .prices__discount .prices__discount-label:after {
 content: '\a com 5% de desconto';
 white-space: pre
}
.product-card .prices__installments::before {
  content: 'até';
  font-weight: normal !important;
}
.product-card .prices__installments span::before {
  content: 'de';
  font-weight: normal !important;
}
.product-card .prices__installments span::after {
  content: 'sem juros';
  font-weight: normal !important;
}
.product-card--small .prices__value + span {
  display: flex;
  flex-direction: column;
  order: -1;
  min-height: 90px;
  justify-content: space-between;
}
.product-card--small .prices__value {
  font-size: 1rem;
  position: absolute;
  margin: 30px 25%;
}
@media(max-width: 576px) {
  .product-card .prices__value + span {
  display: flex;
  flex-direction: column;
  order: -1;
  min-height: 95px;
  justify-content: space-between;
}

.product-card .prices__value + span .prices__discount {
  order: -1;
}
.product-card .prices__value + span .prices__discount span {
  order: -1;
  font-size: 1.2rem;
  color: var(--success);
}
.product-card .prices__value {
  font-size: 1rem;
  position: absolute;
  margin: 30px 17%;
}
.product-card {
  text-align: center
}
.product-card .prices__value small {
   display: none;
}
.product-card .prices__installments {
  font-weight: bold !important;
}
.product-card .prices__discount span {
  font-weight: bold !important;
}
.product-card .prices__discount .prices__discount-label:after {
 content: '\a com 5% de desconto';
 white-space: pre
}
.product-card .prices__installments::before {
  content: 'até';
  font-weight: normal !important;
}
.product-card .prices__installments span::before {
  content: 'de';
  font-weight: normal !important;
}
.product-card .prices__installments span::after {
  content: 'sem juros';
  font-weight: normal !important;
}

.product-card.search-engine__item .prices__value + span {
  display: flex;
  flex-direction: column;
  order: -1;
  min-height: 125px;
  justify-content: space-between;
}
.product-card.search-engine__item .prices__value {
  font-size: 1rem;
  position: absolute;
  margin: 50px 17%;
}

}

@media(max-width: 992px) and (min-width: 567px)  {
  .product-card .prices__value + span {
  display: flex;
  flex-direction: column;
  order: -1;
  min-height: 80px;
  justify-content: space-between;
}

.product-card .prices__value + span .prices__discount {
  order: -1;
}
.product-card .prices__value + span .prices__discount span {
  order: -1;
  font-size: 1.2rem;
  color: var(--success);
}
.product-card .prices__value {
  font-size: 1rem;
  position: absolute;
  margin: 15px 25%;
}
.product-card {
  text-align: center
}
.product-card .prices__value small {
   display: none;
}
.product-card .prices__installments {
  font-weight: bold !important;
}
.product-card .prices__discount span {
  font-weight: bold !important;
}
.product-card .prices__discount .prices__discount-label:after {
 content: '\a com 5% de desconto';
 white-space: pre
}
.product-card .prices__installments::before {
  content: 'até';
  font-weight: normal !important;
}
.product-card .prices__installments span::before {
  content: 'de';
  font-weight: normal !important;
}
.product-card .prices__installments span::after {
  content: 'sem juros';
  font-weight: normal !important;
}
  .product-card .prices__installments {
    font-size: .8rem !important;
  }
.product-card.search-engine__item .prices__value + span {
  display: flex;
  flex-direction: column;
  order: -1;
  min-height: 90px;
  justify-content: space-between;
}
.product-card.search-engine__item .prices__value {
  font-size: 1rem;
  position: absolute;
  margin: 29px 19%;
}

}

Nesse código tem algumas informações a mais, como x% de desconto e parcelamento sem juros, no caso, basta adaptar conforme as suas regras, veja o exemplo do resultado:

image
image1387×757 147 KB

Gostou? Depois comente algum código de personalização que acha interessante que possamos compartilhar com você!

1 curtida
#2

Bom dia Matheus,
Vou experimentar isso.
Uma dúvida:
É só comigo que acontece, ou o campo

Preço parcelado
Preço da forma de pagamento com desconto

demora mais para ser exibido?
O que pode ser feito a respeito?

Abraço

#3

Essa observação foi feita em relação ao mobile.
Feita a inclusão, observei que alterou a ordem na Categoria, porém não no Produto.

categoria
categoria360×589 41 KB

produto
A sobreposição do parcelamento se deu aí porque já tinha antes, então removi essa linha.

#4

Qual (quais) dessas linhas de código devo usar para somente trocar a ordenação de preços da vitrine?
(Percebi só depois que desde o início a proposta era alterar apenas na vitrine.

#5

Boa noite @construindoosom, tudo bem?

Segue um código de css para a sua loja:

.product-card__prices .prices__discount small:after {
  content: '10% de desconto'
}

.product-card__prices {
  display: flex;
}
.product-card__prices .prices__value + span:last-child {
  order: -1
}

.product-card__prices span.prices__compare {
  order: -2
}

.product-card__prices span:last-child {
  display: flex;
  flex-direction: column;
}

.product-card__prices .prices__discount {
  order: -1
}

.product-card__prices .prices__discount span {
  font-size: 20px;
  font-weight: bold;
}

.product-card__prices .prices__installments {
    display: inline-flex;
    gap: 0.3rem;
  white-space: nowrap;
}

.product-card__prices .prices__installments span::before {
    content: "de";
}

.product-card__prices .prices__installments span::after {
    content: " sem juros";
    margin-left: 0.2rem; /* Adjust spacing before 'sem juros' */
}

.product-card__prices .prices__installments span {
  display: inline;
}

/* Optional: Add styles for the discount block if needed */
.product-card__prices .prices__discount {
    margin-top: 0.5rem; /* Adjust spacing if needed */
}

.product-card__prices .prices__value {
  font-size: 15px
}
1 curtida
#6

Boa noite, Matheus.
Vou examinar.
Obrigado.

1 curtida
#7

Tá valendo já, eu colei ao final dos códigos que já havia antes no CSS.
Qualquer coisa eu reporto aqui, muito grato mais uma vez Matheus.

2 curtidas