Ir al contenido principal
Todas las coleccionesVentasConfiguración de facturación
Personalizar las plantillas existentes de forma avanzada
Personalizar las plantillas existentes de forma avanzada

Aprende a utilizar el HTML de las plantillas a tu disposición con ejemplos prácticos.

Camilla avatar
Escrito por Camilla
Actualizado hace más de una semana

Una vez aprendido como personalizar las tablas, aplicar variables e integrar texto dinámico, tal y como explicado aquí, descubre como aplicar el código HTML de forma avanzada con ejemplo prácticos.

Recuerda que esta funcionalidad está únicamente disponible para los planes Estándar, Avanzado y Premium.

Ejemplos de código general

1. Insertar un condicional

[[DUEDATE| INSERTAR CÓDIGO AQUI ]]

2. Imagen secundaría

<img src="%SECIMG%" width="100%" />

3. Mostrar la página actual y el número total de páginas

{PAGENO} | {nb}

4. Fecha

{LANG_date} %DATE%

5. Fecha de vencimiento

[[DUEDATE|{LANG_duedate}: %DUEDATE%<br />]]

6. Dirección de envío

[[SHIPPING|
<p><b>{LANG_shippingaddress}</b></p>
<p>%SHIPPINGADDRESS%</p>
<p>%C_PHONE%</p>
]]

7. Términos y condiciones

[[TAC|
<br /><p><b>{LANG_tac}:</b><br />%TAC%</p>
]]

8. Margen para condiciones generales a toda página

  #tacfullpage{
margin-left:90px;
}

9. Método de pago

[[PM|<br><br>%PM%]]

10. Campos personalizados

[[CUSTOMFIELDS|
<br><br>%CFK%: %CFV%
]]

11. Notas

[[NOTES|
<div style="text-align: left; font-style: italic;"><br>%NOTES%</div>
]]

Ejemplos de Items

1. Modificar el estilo de los títulos de la tabla de facturación

    .items thead td{  font-size: 12pt; color: red; }

2. Separar el desglose de totales de la tabla de facturación

<div class="items-table">%ITEMS%</div>
<div style="display: none;">%TOTALSHTML%</div>

Ejemplos de Totales

1. Editar “Total” en Totales

.thetotaltext{
color:#ff0000;
}

2. Editar “$$$ TOTAL” en Totales

.thetotalvalue{
color:#ff0000;
}

4. Editar la columna izquierda en Totales

.tabletotals td:nth-child(1) {
background-color:#ccc;
}

5. Editar la columna derecha en Totales

 .tabletotals td:nth-child(2) {
background-color:#e6e6e6;
}
¿Ha quedado contestada tu pregunta?