Diseño Web

Cuando vas a comprar en Woocommerce hay ciertos campos de registro obligatorios para realizar el checkout. Hoy os enseñamos cómo modificar dichos campos. Personalizar los campos obligatorios en el checkout de WooCommerce. Como viene siendo habitual, os dejamos dos maneras de hacerlo: Con plugins. Os dejamos tres de los más usados. El modo de hacerlo es similar en los tres. Escogemos la sección y ahí decidimos qué campos queremos que sean obligatorios. En alguno tienes que crear el campo  y luego definir su obligatoriedad o no. –Flexible Checkout Fields for WooCommerce– WooCommerce Checkout Manager– Checkout Field Editor (Checkout Manager) for WooCommerce   Aquí os dejamos cómo usar el primero. Puedes modificar los campos a través de un plugin o poniendo código en functions.php o en un Snippet. Personalmente creo que para este caso es mejor usar plugins, pero por si lo necesitas, aquí lo tienes.La información la tienes en este artículo de WooCommerce. Vas a tener que “jugar” un poco hasta encontrar los campos que quieres y cómo modificarlos, pero te dejamos un par de ejemplos de gente que lo ha hecho para que veas el código.   – Ejemplo de poner campos como obligatorios y quitar otros.– Deshabilitar la validación de campos (no se si es necesario). Ejemplo de Snippets.

Hoy os dejamos un plugin que para un usuario o dueño de página web puede no ser útil, pero que para los desarrolladores de páginas multiusuario es una maravilla. Plugin de WordPress para acceder como otro usuario. User Switching te permite, si eres administrador, acceder y ver la web como si fueras otro usuario. De esta manera, puedes comprobar que tiene los permisos adecuados, que puede ver o no ver las partes que debería. Es decir iniciar sesión como un usuario. También es muy útil cuando una web está en producción para poder resolver incidencias. Cuando un usuario se queja de algo, podemos acceder como ellos y comprobar exactamente qué le ocurre. Como digo, una maravilla para cualquier desarrollador web. Prestashop lo tiene de serie y lo echábamos de menos en WordPress. Para usar el plugin, una vez instalado, sólo tendremos que ir a Usuarios, buscar el que queremos y pinchar en la opción Switch to que aparece al posicionar el cursor encima de su nombre. Esto nos llevará a la web como dicho usuario. No necesitamos ni saber ni cambiar la contraseña del usuario en cuestión. Cuando hayamos acabado, sólo tenemos que bajar a fina de la pantalla donde veremos una opción de cambiar de vuelta a nuestro usuario administrador. También está  la opción en el menú de usuario de WordPress. El plugin es seguro, usa el sistema de cookies y no revela contraseña. Sólo pueden usarlo aquellos que puedan editar otros usuarios. Lo dicho….encantados con este descubrimiento que nos ahorra tener que abrir sesiones desde incógnito.

Por defecto, cuando se realiza un pago de un pedido en WooCommerce este no aparece como completado sino como En Espera o “Procesando“.  Hoy te enseñamos a poner los pedidos como Completados automáticamente, una vez se hayan pagado. Cómo marcar los pedidos como Completados automáticamente en WooCommerce. WooCommerce considera que, tras el pago de un pedido, se debe realizar un proceso previo antes finalizarlo. Por ejemplo empaquetarlo o enviado. Por lo tanto, cuando un cliente realiza el pago, el estado pasa a Procesando y es el dueño de la tienda el que tiene que cambiarlo al siguiente estado. Sólo en los casos en los que el producto sea virtual y descargable (ambas opciones a la vez), WooCommerce completa los pedidos. Pero claro, esto puede no ser muy deseable para muchas tiendas online. Aquellas que tengan productos virtuales, las que sean aulas online y muchas otras, pueden querer que el pedido se procese tras el pago y el cliente tenga directamente acceso a lo que ha pagado. Sin tener que esperar a que el dueño de la tienda se lo apruebe. Os dejamos dos maneras de hacerlo: Con plugins. Tienes un plugin de pago, Order Status Control, pero también tienes alguno gratuito como Autocomplete WooCommerce Orders. Nosotros hemos probado este último y va genial. Puedes poner que se autocompleten los productos virtuales, o cualquier producto que se pague (nosotros probamos esta opción), o todos los productos independientemente de su pago (no recomendable). Con código. De nuevo puedes ponerlo en el functions.php de tu plantilla hija o en un plugin como Code Snippets. Los códigos te permiten más personalización como elegir el método de pago o el estado final. He encontrado varios y os los dejo para probar. –WooCommerce propone este: /** * Auto Complete all WooCommerce orders. */ add_action( ‘woocommerce_thankyou’, ‘custom_woocommerce_auto_complete_order’ ); function custom_woocommerce_auto_complete_order( $order_id ) { if ( ! $order_id ) { return; } $order = wc_get_order( $order_id ); $order->update_status( ‘completed’ ); } /** * Auto Complete all WooCommerce orders. */ add_action( ‘woocommerce_thankyou’, ‘custom_woocommerce_auto_complete_order’ ); function custom_woocommerce_auto_complete_order( $order_id ) { if ( ! $order_id ) { return; } $order = wc_get_order( $order_id ); $order->update_status( ‘completed’ ); } –Aquí podéis ver este donde podéis elegir el método de pago. // Actualiza automáticamente el estado de los pedidos a COMPLETADO add_action( ‘woocommerce_order_status_processing’, ‘actualiza_estado_pedidos_a_completado’ ); add_action( ‘woocommerce_order_status_on-hold’, ‘actualiza_estado_pedidos_a_completado’ ); function actualiza_estado_pedidos_a_completado( $order_id ) { global $woocommerce; //ID’s de las pasarelas de pago a las que afecta $paymentMethods = array( ‘bacs’, ‘cheque’, ‘cod’, ‘paypal’ ); if ( !$order_id ) return; $order = new WC_Order( $order_id ); if ( !in_array( $order->payment_method, $paymentMethods ) ) return; $order->update_status( ‘completed’ ); } – Y este otro artículo da varias opciones. Los estados de los pedidos por defecto los puedes ver entrando en un pedido y pinchando en el desplegable de estados o en la configuración de WooCommerce en los Emails. Pero son:   Cancelado (Cancelled). Fallido (Failed). Completo (Completed). Pendiente  (Pending payment). Procesando (Processing). En espera (On hold). Reembolsado (Refunded)

Tu web es diferente a las demás, y seguramente requerirá algún comportamiento único. Esto se puede hacer por plugins, pero si es algo más concreto requiere código personalizado. Hoy os enseñamos a añadir dicho código en tu página de WordPress. Cómo añadir código personalizado en tu página de WordPress. Hay tres maneras lógicas de hacerlo: Añadir el código en el fichero functions.php de tu plantilla. Para eso está ese fichero, para las funciones que necesite la plantilla, y las adicionales que quieras tú. PERO (y es un gran pero), sólo lo recomendamos en el caso que hayas creado un tema hijo. Porque si lo añades en tu plantilla “padre”, y la actualizas, lo más seguro es que pierdas las modificaciones realizadas. Con un plugin para añadir código. El más famoso es Code Snippets y se lo ha ganado. Este plugin te permite añadir pequeños códigos (snippets) que puedes activar, desactivar, editar, añadir y borrar a tu antojo. Estos snippets funcionan como si los hubieras añadido al fichero functions.php. Pero además añade varias ventajas muy a tener en cuenta. -La primera es que si cometes un error de código no rompes la página entera (como ocurriría editando el fichero functions), sino que el plugin te avisa del error, de la línea, y desactiva el snippet. – La segunda es que puedes decidir el ámbito de aplicación del código: en toda la web, sólo en el backend, ejecutarlo sólo una vez…. – Para mi es excelente poder activar y desactivar códigos para poder hacer pruebas. – Además puedes poner descripción y etiquetas a tu código para poder saber lo que hace cuando haya pasado un tiempo, o para que lo lea otro desarrollador. – Los snippets se puede exportar y importar entre sitios. – No tienes que añadir tags como los de php, pero si se te olvida y los pones el plugin se encarga de quitarlos. Crear tu propio plugin. Otro día hablaremos de ello. Así que, si no quieres complicarte mucho, y no quieres que tu código dependa del tema, instala Code Snippets y a añadir código. Nosotros lo usamos para php pero puedes poner html, css javascript….lo que quieras.    

Para una de las webs que estábamos desarrollando esta semana, necesitábamos crear una página para que los clientes pudieran ver sus productos.  Hemos encontrado un código que realiza esta función y os lo queremos dejar aquí para que lo uséis. Código para añadir una página de Mis Productos en WooCommerce. Lo primer es mencionar la fuente, el código lo encontramos aquí. Para activar el código tienes dos maneras: Ponerlo en el fichero functions.php de tu plantilla. Solo te recomiendo que hagas esto si has creado una plantilla hija. De no ser así, al actualizar la plantilla se te borrará el código modificado. Ponedlo antes de ?> Usar un plugin para poner códigos personalizados. Como el que mencionamos en este artículo. El código que hay que  poner es : /**  * @snippet       Display All Products Purchased by User via Shortcode – WooCommerce  * @how-to        Watch tutorial @ https://businessbloomer.com/?p=19055  * @sourcecode    https://businessbloomer.com/?p=22004  * @author        Rodolfo Melogli  * @compatible    Woo 3.4.5  */ // Note: this will only return purchased products for completed and processing orders add_shortcode( ‘my_products’, ‘bbloomer_user_products_bought’ ); function bbloomer_user_products_bought() { global $product, $woocommerce, $woocommerce_loop; $columns = 3; $current_user = wp_get_current_user(); $args = array(     ‘post_type’ => ‘product’,     ‘post_status’ => ‘publish’,     ‘posts_per_page’ => -1 ); $loop = new WP_Query($args); ob_start(); woocommerce_product_loop_start(); while ( $loop->have_posts() ) : $loop->the_post(); $theid = get_the_ID(); if ( wc_customer_bought_product( $current_user->user_email, $current_user->ID, $theid ) ) { wc_get_template_part( ‘content’, ‘product’ ); } endwhile; woocommerce_product_loop_end(); woocommerce_reset_loop(); wp_reset_postdata(); return ‘<div class=”woocommerce columns-‘ . $columns . ‘”>’ . ob_get_clean() . ‘</div>’; } /** * @snippet       Display All Products Purchased by User via Shortcode – WooCommerce * @how-to        Watch tutorial @ https://businessbloomer.com/?p=19055 * @sourcecode    https://businessbloomer.com/?p=22004 * @author        Rodolfo Melogli * @compatible    Woo 3.4.5 */ // Note: this will only return purchased products for completed and processing orders add_shortcode( ‘my_products’, ‘bbloomer_user_products_bought’ ); function bbloomer_user_products_bought() { global $product, $woocommerce, $woocommerce_loop; $columns = 3; $current_user = wp_get_current_user(); $args = array( ‘post_type’ => ‘product’, ‘post_status’ => ‘publish’, ‘posts_per_page’ => -1 ); $loop = new WP_Query($args); ob_start(); woocommerce_product_loop_start(); while ( $loop->have_posts() ) : $loop->the_post(); $theid = get_the_ID(); if ( wc_customer_bought_product( $current_user->user_email, $current_user->ID, $theid ) ) { wc_get_template_part( ‘content’, ‘product’ ); } endwhile; woocommerce_product_loop_end(); woocommerce_reset_loop(); wp_reset_postdata(); return ‘<div class=”woocommerce columns-‘ . $columns . ‘”>’ . ob_get_clean() . ‘</div>’; } Después puedes usar el shortcode [my_products] en cualquier sitio de WordPress para mostrar los productos. Aquí tenéis una versión del código que antes realiza una búsqueda en la base de datos y comprueba también si hay productos duplicados (porque unos incluyeron otros).