Comment appliquer du CSS personnalisé au champ produit

Lorsque vous créez des formulaires dans un Mise en page classique, vous avez la possibilité de concevoir vos formulaires avec des codes CSS personnalisés. C’est l’une des fonctionnalités intéressantes du Créateur de Formulaires qui vous permet de personnaliser l’apparence générale de votre formulaire, y compris le champ Produit.

Masquer le texte libre

Le texte libre apparaît lorsque vous ajoutez un produit sans prix. Vous pouvez le masquer avec les codes CSS personnalisés ci-dessous :

.freeCurr + span {
display: none !important;
}

Afficher les sous-produits par défaut

Le formulaire masque les sous-produits par défaut lorsque vous choisissez de les créer dans l’élément produit. Vos utilisateurs devront sélectionner l’élément produit avant qu’ils ne soient affichés. Pour afficher les sous-produits par défaut, insérez les codes CSS personnalisés ci-dessous :

``````html
.sub_product .form-product-child-table {
display: block !important;
}

Changer la couleur et la taille du prix de l’article

Vous pouvez changer la couleur et la taille du prix de l’article de produit avec les codes CSS personnalisés ci-dessous :

.form-product-details {
color: #ff6a00 !important;
font-size: 20px !important;
}

Remplacez “ff6a00” par les codes hexadécimaux de la couleur que vous souhaitez, et faites de même pour la taille en passant de 20px à la taille de votre choix. Pour les codes Hex et RGB, nous recommandons Google Color Picker.

Changer la couleur et la taille du sous-total, des taxes, de l’expédition et du total

La zone de total comprend le sous-total, les taxes, l’expédition et le total. Vous pouvez personnaliser ces éléments à la fois ou individuellement. Pour changer l’apparence en une fois, insérez les codes CSS personnalisés ci-dessous :

.payment_footer .total_area * {
font-size: 19px !important;
color: #ff6a00 !important;
}

Pour personnaliser individuellement les éléments, utilisez les codes CSS personnalisés suivants :

/* Annuler la taille actuelle de la police de la zone totale */
.payment_footer .total_area * {
font-size: unset;
}
/* Sous-total et montant */
#subtotal-text {
font-size: 20px;
color: ff6a00;
}
#subtotal-text + .form-payment-price {
font-size: 20px;
color: ff6a00;
}

``````html
/* Taxes et Montant */
#tax-text {
font-size: 20px;
color: ff6a00;
}
#tax-text + .form-payment-price {
font-size: 20px;
color: ff6a00;
}
/* Expédition et Montant */
#shipping-text {
font-size: 20px;
color: ff6a00;
}
#shipping-text + .form-payment-price {
font-size: 20px;
color: ff6a00;
}
/* Total et Montant */
#total-text {
font-size: 20px;
color: ff6a00;
}
#total-text + .form-payment-price {
font-size: 20px;
color: ff6a00;
}

.form-product-item {
border: none !important;
}

/* Lorsque vous survolez l'article de produit */
.form-product-item.new_ui.hover-product-item:hover {
background: rgba(85, 115, 215, 0.06);
background-color: rgba(85, 115, 215, 0.06);
}
/* Lorsque l'article est sélectionné */
.form-product-item.p_selected {
background: rgba(85, 115, 215, 0.06);
background-color: rgba(85, 115, 215, 0.06);
}
``````html

.form-product-item .form-product-container .form-product-description {
color: #43464e;
font-size: 14px;
opacity: .6;
}

.form-product-category-item {
font-size: 18px;
color: #18bd5b;
}