{"id":233969,"date":"2023-02-27T15:25:00","date_gmt":"2023-02-27T12:25:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=233969"},"modified":"2022-11-11T13:28:22","modified_gmt":"2022-11-11T10:28:22","slug":"codificacion-para-woocommerce-una-introduccion","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/es\/codificacion-para-woocommerce-una-introduccion\/","title":{"rendered":"Codificaci\u00f3n para WooCommerce: una introducci\u00f3n"},"content":{"rendered":"\n<p>Esta es una introducci\u00f3n para desarrolladores principiantes al complemento WordPress <a href=\"https:\/\/woocommerce.com\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">WooCommerce<\/a>. En esta publicaci\u00f3n, veremos los conceptos b\u00e1sicos de c\u00f3mo funciona WooCommerce y c\u00f3mo podemos personalizarlo en nuestro tema o complemento utilizando ganchos y plantillas.<\/p>\n<p>En primer lugar, WooCommerce ofrece una gran flexibilidad para que los desarrolladores de temas y complementos ajusten su funcionalidad. Para modificaciones simples, generalmente tiene al menos dos alternativas para hacerlo. La elecci\u00f3n de c\u00f3mo modificar depende de c\u00f3mo prefiera trabajar, qu\u00e9 tan flexible y legible debe ser su c\u00f3digo, y c\u00f3mo prefiere seguir haciendo el mantenimiento futuro de su sitio cuando se trata de actualizaciones de complementos (y WordPress).<\/p>\n<p>Antes de comenzar a buscar la modificaci\u00f3n de la funcionalidad de WooCommerce a trav\u00e9s del c\u00f3digo, debe verificar si lo que desea lograr es posible cambiando la configuraci\u00f3n. WooCommerce viene con una gran p\u00e1gina de configuraci\u00f3n que le permite cambiar bastante. En versiones m\u00e1s recientes, WooCommerce tambi\u00e9n ha agregado y movido configuraciones adicionales al Personalizador de WordPress. Aqu\u00ed podr\u00e1, por ejemplo, ajustar el n\u00famero de columnas y ajustar algunos de los campos de pago.<\/p>\n<h2>Plantillas WooCommerce<\/h2>\n<p>WooCommerce ofrece una gran variedad de archivos de plantilla que usted, como desarrollador de temas, puede anular. La forma de hacerlo es haciendo una copia de la plantilla original de WooCommerce en la carpeta de su tema. Y luego realiza los cambios en el archivo en su tema.<\/p>\n<p>Navegue a su carpeta de complementos de WooCommerce en formato <code>\/wp-content\/plugins\/woocommerce\/<\/code>. Aqu\u00ed encontrar\u00e1 la subcarpeta <code>templates<\/code>. Todo el contenido de los archivos (\u00a1hay mucho!), <code>\/wp-content\/plugins\/woocommerce\/templates\/<\/code>incluidas sus subcarpetas, son todos los archivos de plantilla que puede anular en su tema.<\/p>\n<p>Para que WooCommerce encuentre sus plantillas modificadas, necesita una subcarpeta en el directorio ra\u00edz de su tema llamada <code>woocommerce<\/code>. Si el slug de su tema es &#8216;awhitepixel&#8217;, entonces su carpeta debe estar ubicada en <code>\/wp-content\/themes\/awhitepixel\/woocommerce\/<\/code>. Dentro de esta carpeta puede colocar sus copias modificadas de los archivos de plantilla de WooCommerce. Tenga en cuenta que los archivos de plantilla ubicados en subcarpetas deben colocarse en las subcarpetas correspondientes en su carpeta de woocommerce. Por ejemplo; anular WooCommerce <code>\/templates\/single-product\/add-to-cart\/simple.php<\/code>requiere que coloque su copia <code>simple.php<\/code>en <code>\/woocommerce\/single-product\/add-to-cart\/<\/code>la carpeta de su tema.<\/p>\n<p>Tambi\u00e9n habr\u00e1s notado que hay muchas acciones y filtros en las plantillas. La mayor\u00eda de ellos est\u00e1n llenos de <code>do_action()<\/code>s. Para un uso \u00f3ptimo de WooCommerce, no debe eliminar ninguno de los ganchos de las plantillas. En la mayor\u00eda de los casos, podr\u00eda considerar cambiar la funcionalidad mediante el uso de acciones y filtros en lugar de anular las plantillas. \u00a1D\u00e9jame explicarte por qu\u00e9!<\/p>\n<h3>Nota importante sobre la anulaci\u00f3n de plantillas y actualizaciones de complementos<\/h3>\n<p>Para un principiante, anular una plantilla puede parecer la soluci\u00f3n m\u00e1s f\u00e1cil e intuitiva. \u00bfPor qu\u00e9 meterse con ganchos si puede cambiar directamente la plantilla que genera lo que desea cambiar? Respuesta: Porque esta estrategia genera m\u00e1s trabajo para mantener el mantenimiento de su tienda web.<\/p>\n<p>WooCommerce se actualiza con frecuencia y, a veces, actualiza un archivo de plantilla. Para mantener su tienda web actualizada, tambi\u00e9n deber\u00e1 actualizar los archivos de plantilla anulados en su tema. Por lo general, deber\u00e1 reemplazar todo el archivo de plantilla con el archivo actualizado m\u00e1s reciente y luego volver a agregar los cambios. Esto r\u00e1pidamente se vuelve mucho m\u00e1s dif\u00edcil si no recuerda todos los cambios que realiz\u00f3. Conf\u00ede en m\u00ed, que tengo a\u00f1os de experiencia en la reparaci\u00f3n de archivos de plantilla de WooCommerce de otros desarrolladores durante las actualizaciones de complementos. Conf\u00eda en m\u00ed, \u00a1no es un trabajo divertido!<\/p>\n<p>Ahora que sabemos que los ganchos son una mejor estrategia, veamos c\u00f3mo hacerlo.<\/p>\n<h2>Ganchos de WooCommerce<\/h2>\n<p>WooCommerce ofrece una enorme cantidad de ganchos, tanto de acciones como de filtros. \u00a1Usar ganchos es realmente muy simple!<\/p>\n<p>Con los ganchos, tambi\u00e9n puede modificar mucho m\u00e1s que solo la salida de las plantillas. Puede personalizar los precios de los productos, los campos de pago o hacer que su tienda web haga algo cuando se agrega un producto al carrito.<\/p>\n<p>Si est\u00e1 desarrollando un complemento, los ganchos tambi\u00e9n son el \u00fanico camino a seguir. Solo puede anular plantillas en un tema, no en un complemento. (Est\u00e1 bien, hay formas de superar esto, pero es muy poco com\u00fan y no se recomienda).<\/p>\n<p>Si ha buscado en algunos de los archivos de plantilla de WooCommerce, deber\u00eda haber visto muchos archivos <code>do_action()<\/code>. Estos son ganchos; puntos de control a los que puede conectarse y agregar su c\u00f3digo o modificar una variable. Si no est\u00e1 seguro de c\u00f3mo funcionan los ganchos, tengo una <a href=\"http:\/\/awhitepixel.com\/blog\/all-about-hooks-in-wordpress\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">publicaci\u00f3n que explica<\/a> esto en profundidad.<\/p>\n<p>Si desea generar algo, por ejemplo, un texto o algo similar, busque acciones (<code>do_action()<\/code>). Por ejemplo, al generar algo en la plantilla del carrito, tiene la opci\u00f3n de conectarlo a <code>woocommerce_before_cart<\/code>, <code>woocommerce_before_cart_table<\/code>, <code>woocommerce_before_cart_contents<\/code>, <code>woocommerce_cart_contents<\/code>, <code>woocommerce_cart_actions<\/code>, <code>woocommerce_after_cart_contents<\/code>, <code>woocommerce_after_cart_table<\/code>, <code>woocommerce_cart_collaterals<\/code>o <code>woocommerce_after_cart<\/code>. Simplemente elija el que est\u00e1 posicionado donde desea su salida. Este es un ejemplo de mostrar un texto antes de la tabla y el formulario en la p\u00e1gina del carrito:<\/p>\n<pre><code>add_action('woocommerce_before_cart', function() {\n    _e('Here are the products you have added in the cart so far', 'textdomain');\n});<\/code><\/pre>\n<p>Los filtros (busque <code>apply_filters()<\/code>) son para modificar una salida o una variable. Un uso com\u00fan de los filtros en WooCommerce es modificar el texto &quot;Agregar al carrito&quot; en los botones de compra. WooCommerce ofrece m\u00faltiples filtros para esto, lo que le permite controlar el texto en diferentes p\u00e1ginas. Por ejemplo, puede personalizar el texto en el ciclo de la tienda o en la vista de un solo producto. Los filtros a menudo proporcionan m\u00faltiples argumentos para un mayor control; por ejemplo, el objeto del producto. Aqu\u00ed hay un ejemplo simple sobre c\u00f3mo cambiar los textos &quot;Agregar al carrito&quot; en la vista de un solo producto:<\/p>\n<pre><code>add_filter('woocommerce_product_single_add_to_cart_text', function($original_text, $product) {\n    return __('Buy this', 'textdomain');\n}, 10, 2);<\/code><\/pre>\n<p>Con un poco de conocimiento de c\u00f3mo funcionan los ganchos y simplemente mirando dentro de los archivos de plantilla, puede encontrar una gran cantidad de funciones f\u00e1cilmente modificables. Obviamente WooCommerce ofrece modificaciones mucho m\u00e1s avanzadas, cambio de precios, m\u00e9todos de pago, modificaciones de productos o importaciones, todo ello posible con el uso de ganchos.<\/p>\n<h2>Conclusi\u00f3n<\/h2>\n<p>El prop\u00f3sito de esta publicaci\u00f3n es brindarle al principiante los conceptos b\u00e1sicos sobre c\u00f3mo realizar modificaciones en WooCommerce y las consecuencias de c\u00f3mo realiza los cambios. Siempre recomiendo usar ganchos en lugar de sobrescribir archivos de plantilla, a menos que sea absolutamente necesario.<\/p>\n<p>El siguiente paso es sumergirse en modificaciones avanzadas conociendo los ganchos, procesos y objetos en WooCommerce. Como <a href=\"https:\/\/woocommerce.com\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">WooCommerce<\/a> es la plataforma de comercio electr\u00f3nico m\u00e1s popular que existe, hay muchos recursos y ejemplos de c\u00f3digo disponibles en la web. Eche un vistazo a la <a href=\"https:\/\/awhitepixel.com\/blog\/category\/woocommerce\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">categor\u00eda Woocommerce<\/a> aqu\u00ed en este sitio para obtener m\u00e1s informaci\u00f3n tambi\u00e9n.<\/p>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Fuente de grabaci\u00f3n:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/awhitepixel.com\" class=\"external external_icon\">awhitepixel.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Una introducci\u00f3n para desarrolladores a los conceptos b\u00e1sicos de WordPress WooCommerce; c\u00f3mo funciona y c\u00f3mo puede personalizar su funcionalidad en su tema o complemento.<\/p>\n","protected":false},"author":1,"featured_media":239407,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[892,892,810,1110,810,840,840,851,851,861,861],"tags":[1172],"class_list":["post-233969","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-codigo","category-complementos","category-n-a","category-tutoriales","category-woocommerce-2","category-wordpress-2","tag-affiai-es"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/posts\/233969","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/comments?post=233969"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/posts\/233969\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/media\/239407"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/media?parent=233969"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/categories?post=233969"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/tags?post=233969"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}