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