Códigos Code Snippets

ESTILOS CSS     FUNCIÓN Directo   JS   Shorcode línea de código   [   code_snippet  ] [  /  code_snippet  ]    

Code snippets que muestre en una nueva columna de la la tabla de usuarios (wp-admin/users.php) el ID de los usuarios previamente registrados o que se registren Para añadir una nueva… Leer más »Crear una nueva columna en menú de usuarios que muestre el ID de cada usuario

Ventana emergente ordenar por:

2 Ordenar por (productos)

function add_popup_link_and_script_orden() {
?>
<style>
/* Estilos para la ventana emergente */
.popup-overlay-orden {
display: none; /* Oculto por defecto */
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.7);
z-index: 1000;
}

.popup-content-orden {
position: absolute;
top: 32%;
left: 50%;
transform: translate(-50%, -50%);
background: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
z-index: 1001;
max-width: 90%;
width: 400px;
}

.popup-header-orden {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #323232; /* Fondo del botón */
color: #e6e6e6; /* Color del texto */
padding: 7px; /* Relleno del botón */
border-radius: 8px 8px 0 0;
font-size: 17px; /* Tamaño de texto */
cursor: pointer;
transition: background-color 0.3s;
text-align: center;
position: relative; /* Para alinear el icono de cerrar */
}

.popup-header-orden:hover {
background-color: #b40000; /* Color de fondo al pasar el cursor */
}

.popup-header-orden .icon-close-orden {
font-size: 20px; /* Tamaño del icono */
color: #ffffff; /* Color del icono */
position: absolute;
right: 10px; /* Distancia del icono al borde derecho */
top: 50%; /* Alineación vertical al centro */
transform: translateY(-50%);
cursor: pointer;
}
</style>

<a href="#" id="open-popup-link-orden"></a>

<div class="popup-overlay-orden" id="popup-overlay-orden">
<div class="popup-content-orden">
<div class="popup-header-orden" onclick="closePopupOrden()">
Ver orden de productos
<span class="icon-close-orden" id="popup-close-orden">&times;</span>
</div>
<?php echo do_shortcode('[wpf-filters id=3]'); ?>
</div>
</div>

<script>
function openPopupOrden() {
document.getElementById('popup-overlay-orden').style.display = 'block';
}

function closePopupOrden() {
document.getElementById('popup-overlay-orden').style.display = 'none';
}

document.getElementById('open-popup-link-orden').addEventListener('click', function(e) {
e.preventDefault();
openPopupOrden();
});

document.getElementById('popup-close-orden').addEventListener('click', function() {
closePopupOrden();
});

window.addEventListener('click', function(e) {
if (e.target == document.getElementById('popup-overlay-orden')) {
closePopupOrden();
}
});
</script>
<?php
}
add_action('wp_footer', 'add_popup_link_and_script_orden');

Leer más »Codigos ventanas emergentes para shorcode

  1.- Añadir el siguiente código en el plugin CODE SNIPPETS (código PHP):   add_action( 'wp_head', function () { ?> <style> .site-footer { position: fixed; left: 0; bottom: 0; width:… Leer más »Pie de página flotante en WordPress y Elementor Free (compatible con IOs - Apple)

Este código crea una la barra de progreso se llena con el color especificado a medida que el usuario se desplaza por la página, la barra se muestra en la… Leer más »Barra de progreso para sitio web con degradado

En las recientes actualizaciones de WordPress, ha surgido un intrigante enigma para muchos usuarios: al emplear las comillas altas rectas (") en sus textos, al publicar o previsualizar las entradas,… Leer más »Sustituir comillas españolas por comillas inglesas en WordPress

Este código CSS funciona para mejorar la experiencia de usuario en dispositivos táctiles, haciendo que la navegación por tu sitio sea más suave y evitando comportamientos no deseados. Agregar este… Leer más »CSS para Deshabilitar Zoom en celular