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
#8

Bom dia, amigos,
como fiquei de reportar, aqui vai:
Na versão Mobile (e acredito que apenas nela), a bateria das condições de pagamento mais em conta para o cliente é sempre a última a carregar. Nela estão o parcelamento e preço à vista com 10% de desconto. Essa demora pode ocasionar perda de conversões.
Além disso, a exibição da loja na integração Facebook/Instagram não mostra esse valor exclusivo para pagamento Depósito/Pix, apenas o valor normal da promoção. Então pode parecer enganação, quando divulgo no post o preço para Pix/Depósito.
Gostaria de checar isso e para tanto tentarei transcrever o código completo do meu CSS personalizado, para vocês avaliarem se tem alguma coisa ali que resulta nessa condição.
Obrigado.

@media(min-width: 769px) {
.shipping-line + small {
width: 50%
}
}
.top-bar {
background-color: #e8e1d5;
}
.header {
background-color: #e8e1d5;
}
.footer 
{
background-color: #e8e1d5;
}
body, p, .btn {
  font-family: 'Poppins', sans-serif !important;
}
.shipping-calculator__services::before { content: "⚠️ Todos os itens são confeccionados sob encomenda, exceto as Ofertas. Observe o prazo de produção informado acima."; border: 1px solid #000; border-radius: 2rem; padding: 1.5rem;
 font-size: 1.2rem; display: inherit;
 margin-bottom: 1rem 
}
.product__short-stock .fas.fa-forward, .product__short-stock strong, .product__short-stock strong:before, .product__short-stock strong:after {
font-size: .875rem !important
}
.product__short-stock strong:before {
content: 'Apenas '
}
.product__short-stock strong:after {
content: ' em estoque'
}
.product__short-stock {
font-size: 0px
}
.product__discount {
display: none !important;
}
.product-card__buy.fade {
  opacity: 1;
}
.product-card--small .product-card__buy {
  position: static;
  display: block;
}
.product__short-stock {
display: none !important;
}
.banner {
    width: 100% !important;
}
.footer .col-12.col-sm-6.col-lg:nth-child(3) {
  display: none !important;
}
.discount-applier.checkout__discount, 
.checkout__notes {
display: none !important;
}
.discount-applier.cart__discount { 
display: none !important; 
}
.order-info__toggle {
 display: none !important;
}
.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
}```
#9

Boa tarde @construindoosom Tudo bem?

Fiz alguns testes pelo meu celular e pra mim funcionou ok, chegou a testar em outros celulares? Vou te mandar um vídeo que fiz no privado.

Sobre essa questão vou verificar pra você se teria como incluir o desconto dos pagamentos, porque até onde eu sei, o feed do xml que conecta com seu catálogo do facebook só permite enviar os dados de preço que estão configurados no campo do produto.

#10

Boa tarde. Agradeço.
E fico até contente em saber que esse pequeno atraso não aconteceria em todo dispositivo móvel.
Na verdade eu foquei mais no exame do código, já que não tenho expertise para avaliar a forma como os comandos estão configurados ali.
Então é uma limitação do xml… eu às vezes até hesito em marcar o produto no post do Insta, já que exibe o preço padrão, e mesmo quando tem promoção de produto, aquele valor temporário eventual vai aparecer na loja do Instagram, deixando a impressão que ainda é válido o desconto.
No mais, sempre satisfeito com o suporte da E-Com Plus, muito obrigado!

1 curtida
#11

Simmm, mas qualquer novidade sobre isso eu te aviso! :wink:

De nada, precisando só chamar!

#12

Grato.
A gente fica preso aos desígnios dessas plataformas de mídias sociais, mas no final das contas é sempre vantajoso utilizar essas ferramentas.
Eu tenho como primeira prioridade ao meu domínio e ao site da loja, que é onde eu tenho a total liberdade e propriedade, por isso que essa parceria com vocês é um auxílio luxuoso.
Abraços!

#13

E obrigada pela pareceria de sempre :pray: