Diseño Web

Cuando estás diseñando una página web, tienes que tener en cuenta los diferentes tamaños de los dispositivos. Ya no diseñamos una web, sino varias para diferentes tamaños. Lo que se llama hacer la página responsive y se hace mediante los media queries.

Una vez hecha la web, podemos querer saber en que tamaños están definidos esos cambios de comportamiento. Cuándo cambia una web de ser modo escritorio a ser modo tableta o modo móvil. E incluso dentro de cada una, si hay diferencias.
Esto se puede hacer con un truco en el inspector del navegador que no está activo por defecto. Hoy os enseñamos a activarlo (en Chrome, es similar en otros).

Activar los media queries en el inspector de Chrome.

Para activar los media queries en el inspector tenemos que:

• Activar el inspector (botón derecho-> inspeccionar o Ctrl+Shit+I)
• Ponerlo en modo responsive pinchando en el icono del móvil.
• Arriba a la derecha hay 3 puntos en vertical en la barra de responsive.
• Si pinchas en esos puntos se despliega un menú y tiene la opción de show media queries.

En el vídeo se ve cómo hacerlo y cómo usarlos.

Nos ha preguntado hoy un lector una duda que tienen bastantes clientes, así que aprovechamos para responderlo para todos.

La duda venía del artículo sobre cómo crear cupones en Woocommerce. Y la pregunta era “¿cómo crear unos 300 cupones?, y ¿cómo ver quién ha usado qué cupón?”. Los vamos a responder en dos secciones.

Cómo crear cupones de modo masivo en WooCommerce.

En el artículo anterior explicamos cómo crear un cupón en WooCommerce. Es fácil si tienes que crear unos pocos. Pero obviamente no está pensado para crear muchos. Para eso, como siempre, tenemos que recurrir a plugins.

Tenéis el plugin Cupon Generator for WooCommerce que está pensado justo para esto. En tres pasos se ha probado ¡hasta para 1,000,000 cupones!

Son tres pasos sencillos:
1) Configuración del Cupón.
2) Configuración de la generación masiva.
3) Generación masiva de cupones.

Cómo ver qué cliente ha usado qué cupón. Filtrar pedidos por cupones.

He visto en algún artículo que, en teoría, en Cupones>Uso , pinchando en el número de cupones usados, debería llevarte a una pantalla con los pedidos. Yo no lo he conseguido en ninguna tienda.

Opción 1.

Un usuario creó un plugin (en Github) para hacer esto. NO LO HEMOS PROBADO y no se ha actualizado en 3 años…así que probadlo con cuidado.

El plugin está aquí.

Opción 2.

Añadir un snippet (o código en functions.php del tema) para que aparezca el cupón usado en el backend. De nuevo no lo hemos probado, pero debería funcionar.

add_filter( 'manage_edit-shop_order_columns', 'woo_customer_order_coupon_column_for_orders' );
function woo_customer_order_coupon_column_for_orders( $columns ) {
    $new_columns = array();

    foreach ( $columns as $column_key => $column_label ) {
        if ( 'order_total' === $column_key ) {
            $new_columns['order_coupons'] = __('Coupons', 'woocommerce');
        }

        $new_columns[$column_key] = $column_label;
    }
    return $new_columns;
}

add_action( 'manage_shop_order_posts_custom_column' , 'woo_display_customer_order_coupon_in_column_for_orders' );
function woo_display_customer_order_coupon_in_column_for_orders( $column ) {
    global $the_order, $post;
    if( $column  == 'order_coupons' ) {
        if( $coupons = $the_order->get_coupon_codes() ) {
            echo implode(', ', $coupons) . ' ('.count($coupons).')';
        } else {
            echo '<small><em>'. __('No coupons') . '</em></small>';
        }
    }
}

Opción 3.

También podrías configurar un snippet cada vez que se aplique un cupón específico. Tampoco lo hemos probado.
Aquí tienes que cambiar el código del cupon (elcódigodelcupónquequieras ) y el correo del destinatario (emaildeldestinatario@dominio.com ).

add_action( 'woocommerce_applied_coupon', 'custom_email_on_applied_coupon', 10, 1 );
function custom_email_on_applied_coupon( $coupon_code ){
    if( $coupon_code == 'elcódigodelcupónquequieras' ){

        $to = "emaildeldestinatario@dominio.com"; // Recipient
        $subject = sprintf( __('Coupon "%s" has been applied'), $coupon_code );
        $content = sprintf( __('The coupon code "%s" has been applied by a customer'), $coupon_code );

        wp_mail( $to, $subject, $content );
    }
}

Muchas veces queremos poner símbolos en una página web como subíndices o superíndices. El símbolo de copyright, los cuadrados y cubos de las unidades de medidas, fórmulas químicas…

Esto en Html está resuelto con las etiquetas  (subíndice) y  (superíndice). Y WordPress lo acepta desde hace tiempo en todos sus elementos (bloques tanto clásicos como Gutenberg, título …).

También podéis ponerlo a mano en cualquier CMS o página web estática porque los navegadores modernos reconocen estos códigos.

Así que si quieres poner estos típos de índice, no os vale con copiarlo de textos Word o Pdf, porque Html no lo reconoce, tenéis que ponerles esos códigos. Os ponemos un ejemplo de cada uno:

Subíndice:

Si queréis poner la fórmula del agua no vale con poner H2O, porque saldrá como un número normal. Incluso aunque lo copiéis de un documento que tenía el subíndice. Tenéis que poner el siguiente código en un bloque de html (no en el editor de texto normal de WordPress):

H<sub>2</sub>O

Superíndice.

Si queremos poner algo como 20 metros cuadrados nos saldría así 20m2

Pero si ponemos el código correcto en un bloque de html:

20 m<sup>2</sup>

Nos aparece así: