Trucos

Cuando tienes una página con WooCommerce, y añades el plugin más conocido de SEO, el Yoast SEO, lo más seguro es que veas que tu backend de productos se descoloque. Se ven nombres a los lados y cada fila es mucho más alta que antes.. Lo que está pasando es que Yoast SEO añade unas columnas a un, ya por sí lleno, listado de productos. Y como no cabe bien se descoloca. Cuando queremos solucionarlo, siempre pensamos en cosas complejas como Snippets, funciones o trucos CSS. Pero es mucho más sencillo. Aquí os dejamos cómo solucionarlo.

Las webs multilingües son muy habituales hoy en día y, para nosotros, el mejor plugin para ello es WPML. Es de pago, si, pero no es excesivo y el plugin es potentísimo. Una de las cuestiones que nos salió hace poco con una web de este estilo, con varios idiomas, era cómo ocultar contenido para ciertos de ellos. Es decir, mostrar algo para unos idiomas y ocultarlo para otros. WPML permite definir widgets según idioma, pero hay ciertos componentes que o no son compatibles, o no se puede hacer ese cambio. Así que la opción es o quitarlo por Snippet, o quitarlo por CSS. Hoy os enseñaremos a hacerlo de las dos maneras Ocultar contenido con un Snippet. Podemos añadir el siguiente código en functions.php del tema hijo o en un Snippet para mostrar el código según el idioma. Ocultar contenido por CSS según el idioma. Para ello vamos a usar el siguiente código: html[lang=”código idioma”] claseoid {display:none;}Por ejemplo html[lang=”en-US”] #Footer .widgets_wrapper {display:none;}

Nos han pedido recientemente, que el enlace de algunos de los productos de su tienda WooCommerce, vaya directamente a una página externa.WooCoomerce tiene algo parecido, los productos externos o de afiliados, pero para ir al enlace tienes que entrar en el producto. La idea es que al pinchar en la imagen de cualquier página donde esté listado el producto, esta te lleve al enlace externo. Cómo enlazar productos de WooCommerce con páginas externas. El proceso consta de dos pasos. Lo primero es que, en nuestra solución (mencionaremos otras) creemos los productos como externos con la opción de producto de WooCommerce y pongamos ahí la url.Nos ha parecido más sencillo y cómodo para los usuarios así. La segunda es crear un Snippet (como siempre puedes editar functions.php de tu tema hijo también) que detecte si son productos externos y cambie la url por la personalizada. Os dejamos este posible código: add_filter( ‘woocommerce_loop_product_link’, ‘cambiar_permalink_prod_externo’, 99, 2 ); function cambiar_permalink_prod_externo ( $link, $product ) {$this_product_id = $product->get_id();if ($product->is_type( ‘external’ ))$link = $product->add_to_cart_url();return $link;} Este Snippet podemos modificarlo de muchas maneras: Cambiar el enlace sólo para unos artículos (ponemos como ejemplo un enlace interno): if( $this_product_id=== 25 ) $link= ‘/enlaceinterno’;return$link; Poniendo un campo personalizado en el producto, por ejemplo con ACF, y su valor como URL. Espero que os sirva. Mejora 2021. Un cliente nos pidió que los enlaces externos se abrieran en una nueva pestaña. Aquí tenéis la modificación.

La semana pasada descubrimos este truco muy útil para los que hacemos páginas web. Se pueden ocultar elementos, o modificarlos, para usuarios registrados mediante CSS. Esto permite que añadamos capas o avisos sólo para usuarios no registrados, cambiar el color de ciertos elementos para usuarios que están “logados” y una infinidad de aplicaciones y personalizaciones. ¿Cómo? Muy sencillo, WordPress añade una clase a todos los elementos, al principio del contenido cuando se ha iniciado sesión en una página. Así que sólo tenemos que poner esa clase delante de la clase que queremos afectar. Por ejemplo si tenemos una capa con clase avisoregistro, podemos ocultarla para usuarios registrados así: .logged-in .avisoregistro {display:none;} Obviamente si es un id se puede hacer igual. Nosotros lo hemos usado para, por ejemplo, ocultar pop ups de registro para usuario que han iniciado sesión. Para hacer lo contrario, es decir ocultar cosas si no ha iniciado sesión, podemos poner: boddy:not(.logged-in) .avisoregistro {display:none;} Es decir, si el cuerpo no tiene la clase logged-in, no muestres esa clase de avisoregistro.