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:
Gostou? Depois comente algum código de personalização que acha interessante que possamos compartilhar com você!