Cómo preparar un tema de WordPress de WooCommerce

Así que quieres agregar una tienda a tu tema, ¡genial! WooCommerce es una excelente opción. Desde un punto de vista técnico, todos los temas son “compatibles con WoCommerce” porque es un complemento. En teoría, cualquier complemento debe funcionar con cualquier tema de WordPress (que esté codificado correctamente). Como desarrollador de temas, es posible que desee cambiar el resultado de WooCommerce para adaptarse mejor a su base o proporcionar opciones a los usuarios finales que no están disponibles en la configuración de WooCommerce (como cambiar la cantidad de columnas en la tienda). A continuación encontrará algunos fragmentos útiles que puede usar para proporcionar un soporte “mejor” para WoCommerce en su tema y / o para cambiar las cosas de acuerdo con su diseño específico.
IMPORTANTE: Muchos de los fragmentos a continuación usan funciones disponibles solo en WoCommerce. Así que asegúrese de que estos fragmentos no solo sean lanzados en la parte inferior del archivo Functions.php en un tema creado para su distribución. Si desea compartir el tema con otros o venderlo, asegúrese de colocar los fragmentos en su propio archivo cargado solo cuando el complemento WooCommerce esté activo.
Compruebe que WooCommerce se activa en mi tarea. Me gusta definir una constante personalizada que se pueda usar para verificar si WooCommerce se activa de esta manera. Puede incluir archivos o funciones de ejecución solo cuando WoCommerce esté activo (consulte el mensaje importante anterior si aún no lo ha hecho).
// Agregar nueva constante que devuelve verdaderas si VoOcommerce está activo Define (‘wpex_wooCommerce_active’, class_exists (‘woCommerce’)); // Comprobación de si WooCommerce está activo si (wpex_wooCommerce_active) {// haz algo … // como incluir un archivo nuevo todas sus ediciones Woo. } Declare la asistencia de WooCommerce Esta es la primera y más importante pieza de código en agregar a su tema, que “activa” la asistencia de WooCommerce y evita las advertencias de complementos que le dicen al usuario que el tema no es compatible. add_action (‘after_setup_theme’, function () {add_theme_support (‘wooCommerce’);}); Elimine WooCommerce CSS Personal, reemplace los estilos de WooCommerce para evitar cualquier problema con los complementos de WooCommerce de terceros. Sin embargo, si desea eliminar todos los estilos de WooCommerce, es muy fácil. El fragmento tiene la intención de eliminar todos los estilos de WooCommerce: // eliminar todo el estilo woo (‘wooCommerce_enqueue_styles’, ‘__eturn_Artay’); Este fragmento es un ejemplo de eliminación condicional de ciertos estilos de CSS: función wpex_remove_woo_styles ($ style) {unset ($ style [‘wooCommerce-general’]); Unset ($ Styles [‘WooCommerce-Layout’); Unset ($ estilos [‘wooCommerce-marlscreen’]); devolver $ estilos; } add_filter (‘wooCommerce_enqueue_styles’, ‘wpex_remove_woo_styles’); Active la galería de productos WooCommerce, Zoom y Lightbox (V3.0 +) en WooCommerce 3.0 ha introducido una nueva galería de productos, Zoom y Lightbox. Todo esto debe ser activado por “add_theme_support” si desea usarlos en su tema.
add_theme_support (‘WC-Production-Gallery-slider’);add_theme_support (‘wc-production-galery-zoom’);add_theme_support (‘WC-Production-Gallery-Lightbox’);Elimine el título de la tienda muchos temas ya tienen funciones para mostrar títulos de archivo, por lo que este código elimina el título adicional de WooCommerce, que es mejor que ocultarlo a través de CSS.add_filter (‘wooCommerce_show_page_itle’, ‘__return_false’);Cambie el título de la tienda para la tienda si su tema usa Archive_Title () o get_archive_title () para mostrar el título de los archivos, puede cambiarlo fácilmente a través de un filtro para tomar el nombre de la página del producto en lugar del título de archivo de la tienda.
función wpex_woo_archive_itle ($ títulos) {if (is_shop () && $ shop_id = toile_get_page_id (‘shop’)) {$ title = get_the_title ($ shop_id); } devolver $ título; } add_filter (‘get_the_archive_title’, ‘wpex_woo_archive_title’); Cambie el número de productos que se muestran en la página en la tienda utilizada para cambiar la cantidad de productos que se muestran en la página en la tienda y los archivos de productos (categorías y etiquetas). // alterar las publicaciones de la tienda de WooCommerce por función de la página wpex_woo_posts_per_page ($ cols) {return 12; } add_filter (‘loop_shop_per_page’, ‘wpex_woo_posts_per_page’); Cambie el número de columnas que se muestran en la tienda en cada fila. No entiendo por qué WooCommerce funciona de esta manera, pero no solo puede cambiar el filtro “Loop_shop_Columns”, pero también debe agregar las clases únicas a la etiqueta del cuerpo para las columnas. Si bien los códigos cortos de Woo tienen un contenedor de divisas con las clases correctas, las páginas de la tienda no tienen, por eso necesitamos dos funciones .// Alter Shop Columns Function wpex_woo_shop_columns ($ columnas) {return 4; } add_filter (‘loop_shop_columns’, ‘wpex_woo_shop_columns’); // Agregue la clase de cuerpo correcta para las columnas de la tienda Función wpex_woo_shop_columns_body_class ($ class) {if (is_shop () || is_product_category () } Devolver $ clase; } add_filter (‘Body_class’, ‘wpex_woo_shop_columns_body_class’); Cambie las siguientes flechas de paginación anteriores Este fragmento le permitirá cambiar las flechas de paginación en la tienda para que coincidan con las de su tema.
function wpex_woo_pagination_args ($ args) {$ args [‘prev_text’] = ‘ ‘;$ args [‘next_text’] = ‘ ‘;devolver $ args;} add_filter (‘wooCommerce_pagination_args’, ‘wpex_woo_pagination_args’);Cambie el texto de la insignia de ventaja, especialmente en los sitios que usan otro idioma o para eliminar el signo de exclamación, no son un gran admirador.función wpex_woo_sale_flash () {return ‘.esc_html __ (‘venta’, ‘wooCommerce’).”;} add_filter (‘wooCommerce_sale_flash’, ‘wpex_woo_sale_flash’);Cambie las columnas de las miniaturas en la galería de productos, es posible que desee cambiar el número de columnas para las miniaturas de la galería de productos individual de acuerdo con su apariencia y esta función funcionará exactamente.
función wpex_woo_product_thumbnails_columns () {return 4;} add_action (‘wooCommerce_product_thumbnails_columns’, ‘wpex_woo_product_thumbnails_);Cambie el número de productos relacionados que se muestran utilizados para cambiar el número de productos que se muestran para productos relacionados en la página del producto.// Establezca productos relacionados para mostrar 4 productos funcionan wpex_woo_related_posts_per_page ($ args) {$ args [‘Post_per_page’] = 4;devolver $ args;} add_filter (‘wooCommerce_output_related_products_args’, ‘wpex_woo_related_posts_per_page’);Cambie el número de columnas por fila para las secciones relacionadas y las ventas en los productos como la tienda, si desea cambiar adecuadamente el número de columnas para productos relacionados y de venta en las páginas de productos, debe filtrar las columnas y cambiar las clases del cuerpo en consecuencia.

// FILTER COLUNSS FUNCIONES WPEX_WOO_SIGHER_LOOPS_COLUMNS ($ columnas) {return 4; } add_filter (‘wooCommerce_up_sells_columns’, ‘wpex_woo_single_loops_columns’); // FILTER ARGS RELACION a la función wpex_woo_related_columns ($ args) {$ args [‘columnas’] = 4; devolver $ args; } Add_filter (‘wooCommerce_output_related_products_args’, ‘wpex_woo_related_columns’, 10); // Filtro de la clase del cuerpo para agregar la función de clase de columna wpex_woo_single_loops_columns_body_class ($ class) {if (is_singular (‘producto’)) {$ class [] = ‘columns-4’; } Devolver $ clase; } add_filter (‘Body_class’, ‘wpex_woo_single_loops_columns_body_class’); Agregue un enlace dinámico y el costo de la canasta al menú Este fragmento agregará a su menú un artículo de canasta de WooCommerce que muestra el costo de los artículos en el carrito. Además, si su sitio tiene un actrizado increíble, mostrará un pequeño icono de bolsa de compras. IMPORTANTE: Estas funciones no deben empaquetarse en un IS_Admin () condicional porque se basan en AJAX para actualizar el costo, debe asegurarse de que las funciones estén disponibles cuando IS_Admin () devuelve verdadero y falso.
// Agregue el enlace CART a la función de menú wpex_add_men_cartem_item_menus ($ ittems, $ args) {// Haga su cambio ‘wpex_main’ en la ubicación de su menú. If ($ args-> thema_location === ‘wpex_main’) {$ css_class = ‘menú-printm-type-tarde-comed If (is_carart ()) {$ css_class. = ‘Currt-commem’; } $ ittems. = ‘
‘; $ ittems. = wpex_men_cart_item (); $ ittems. = ‘
‘; } Devolver $ elementos; } Add_filter (‘wp_nav_men_items’, ‘wpex_add_men_cart_item_to_menus’, 10, 2); // Función Devuelve la función del enlace del carrito del menú principal wpex_men_cart_item () {$ output = ”; $ CART_COUNT = inodoro ()-> CART-> CART_CONTINS_COUNT; $ css_class = ‘wpex-menu-card-tootal wpex-card-total-‘. intval ($ CART_COUNT); if ($ CART_COUNT) {$ url = wc ()-> car-> get_cart_url (); } else {$ url = toile_get_page_permalink (‘shop’); } $ html = $ CART_EXTRA = WC ()-> CART-> GET_CART_TOTAL (); $ html = str_replace (‘cantidad’, ”, $ html); $ output. = ‘<a href = "'. Esc_url ($ url). '" class = "'. Esc_attr ($ CSS_Class). $ output. = ' ‘; $ output. = wp_kses_post ($ html); $ output. = ‘‘; devolver $ salida; } // Actualizar el enlace CART con la función AJAX WPEX_MAIN_NU_CART_LINK_FRAGMENTS ($ fragmentos) {$ fragment [‘. Wpex-Menu-card’] = wpex_men_cart_item (); devolver $ fragmentos; } add_filter (‘add_to_cart_fragments’, ‘wpex_main_men_cart_link_fragments’);