Cómo aplicar CSS personalizado al campo de producto

Cuando creas formularios en un diseño clásico de formulario, tendrás la opción de diseñar tus formularios con códigos CSS personalizados. Es una de las características geniales en el Creador de Formularios que te permite personalizar el aspecto general de tu formulario, incluyendo el campo de producto.

Ocultar el texto Gratis

El texto Gratis aparece cuando agregas un producto sin precio. Puedes ocultarlo con los siguientes códigos CSS personalizados:

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

Mostrar Subproductos por Defecto

El formulario oculta los Subproductos por defecto cuando optas por crearlos en el ítem del producto. Tus usuarios deberán seleccionar el ítem del producto antes de que se muestren. Para mostrar los Subproductos por defecto, inyecta los siguientes códigos CSS personalizados:

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

Cambiar el color y tamaño del precio del ítem

Puedes cambiar el color y tamaño del precio del ítem del producto con los siguientes códigos CSS personalizados:

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

Cambia “ff6a00” con los códigos hex del color que desees, y haz lo mismo para el tamaño cambiando de 20px al tamaño que prefieras. Para códigos Hex y RGB, te recomendamos el Selector de Color de Google.

Cambiar el color y tamaño del Subtotal, Impuestos, Envío y Total

El área total incluye el Subtotal, Impuestos, Envío y Total. Puedes personalizar estos ítems a la vez o individualmente. Para cambiar la apariencia de una vez, inyecta los siguientes códigos CSS personalizados:

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

Para personalizar los ítems individualmente, utiliza los siguientes códigos CSS personalizados:

/* Anular el tamaño de fuente actual del área total */
.payment_footer .total_area * {
font-size: unset;
}
/* Subtotal y Monto */
#subtotal-text {
font-size: 20px;
color: ff6a00;
}
#subtotal-text + .form-payment-price {
font-size: 20px;
color: ff6a00;
}

``````html
/* Impuestos y Monto */
#tax-text {
font-size: 20px;
color: ff6a00;
}
#tax-text + .form-payment-price {
font-size: 20px;
color: ff6a00;
}
/* Envío y Monto */
#shipping-text {
font-size: 20px;
color: ff6a00;
}
#shipping-text + .form-payment-price {
font-size: 20px;
color: ff6a00;
}
/* Total y Monto */
#total-text {
font-size: 20px;
color: ff6a00;
}
#total-text + .form-payment-price {
font-size: 20px;
color: ff6a00;
}

Eliminar el borde de los ítems del producto

Al habilitar el diseño de columna de producto, los productos tienen bordes alrededor de ellos. Puedes eliminar el borde con los siguientes códigos CSS personalizados:

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

Cambiar el color de fondo de los ítems de producto seleccionados

Cuando seleccionas un ítem de producto, el color de fondo de su contenedor cambiará. Inyecta los siguientes códigos CSS personalizados si deseas ese cambio:

/* Cuando pasas el ratón sobre el ítem del producto */
.form-product-item.new_ui.hover-product-item:hover {
background: rgba(85, 115, 215, 0.06);
background-color: rgba(85, 115, 215, 0.06);
}
/* Cuando el ítem está seleccionado */
.form-product-item.p_selected {
background: rgba(85, 115, 215, 0.06);
background-color: rgba(85, 115, 215, 0.06);
}
``````html

Cambiar el color y tamaño de la descripción del producto

Usa los siguientes códigos CSS personalizados para cambiar el color y tamaño de la descripción del producto:

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

El texto tiene una opacidad, por lo que también puedes considerar ajustarla. Puedes poner “1” si deseas eliminar la opacidad.

Ajustar el color y tamaño del título de la categoría

Inyecta los siguientes códigos CSS personalizados para cambiar el color y tamaño del título de la categoría:

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