Comment appliquer du code CSS personnalisé au champ Produit

Lors de la création de formulaires avec une mise en page classique, vous avez la possibilité de personnaliser vos formulaires avec des codes CSS personnalisés. C’est l’une des fonctionnalités intéressantes qu’offre le Générateur de formulaires Jotform, 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 directement dans l’élément Produit. Vos utilisateurs devront sélectionner l’article pour qu’ils s’affichent. Pour afficher les sous-produits par défaut, injectez les codes CSS personnalisés ci-dessous :

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

Modifier la couleur et la taille du prix de l’élément Produit

Vous pouvez modifier la couleur et la taille du prix de l’élément 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, puis effectuez la même opération pour la taille en passant de 20px à la taille de votre choix. Pour les codes Hex et RVB, nous recommandons le sélecteur de couleurs Google.

Modifier 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 tous à la fois ou un par un. Pour modifier leur apparence en une seule fois, insérez les codes CSS personnalisés ci-dessous :

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

Pour personnaliser chaque élément un par un, 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;
}
/* 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;
}

Supprimer la bordure de l’élément Produit

En activant la disposition en colonnes des produits, ceux-ci ont des bordures autour d’eux. Vous pouvez supprimer la bordure avec les codes CSS personnalisés suivants :

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

Modifier la couleur de fond des éléments Produit sélectionnés

Lorsque vous sélectionnez un élément Produit, la couleur d’arrière-plan de son conteneur changera. Injectez les codes CSS personnalisés ci-dessous si vous souhaitez la modifier :

/* 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);
}

Modifier la couleur et la taille de la description du produit

Utilisez les codes CSS personnalisés suivants pour changer la couleur et la taille de la description du produit :

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

Le texte a une opacité, vous pouvez donc envisager de l’ajuster. Vous pouvez mettre le chiffre « 1 » si vous souhaitez supprimer l’opacité.

Ajuster la couleur et la taille du titre de la catégorie

Injectez les codes CSS personnalisés suivants afin de modifier la couleur et la taille du titre de la catégorie :

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