Cómo hacer que un tema de WordPress esté listo para WooCommerce

Haga que su tema de WordPress WooCommerce sea compatible con estos fragmentos útiles

Por lo tanto, desea agregar una tienda a su tema, ¡increíble! WooCommerce es una gran opción. Tecnicamente hablando TODAS los temas son “compatibles con WooCommerce” porque es un complemento. En teoría, cualquier complemento debería funcionar con cualquier tema de WordPress (que esté codificado correctamente).


Como desarrollador de temas, es posible que desee ajustar la salida de WooCommerce para que se ajuste mejor a su tema o para proporcionar opciones a sus usuarios finales que no están disponibles en la configuración de WooCommerce (como alterar el número de columnas en la tienda). A continuación encontrará algunos fragmentos útiles que puede usar para proporcionar “mejor” soporte para WooCommerce en su tema y / o para alterar las cosas para su diseño específico.

Importante: Muchos de los fragmentos a continuación utilizan funciones disponibles solo en WooCommerce. Por lo tanto, asegúrese de que estos fragmentos no se encuentren en la parte inferior de su archivo functions.php en un tema creado para su distribución. Si va a compartir su tema con otros o venderlo, asegúrese de colocar los fragmentos en su propio archivo cargado solo cuando el complemento WooCommerce esté activo.

Compruebe si WooCommerce está habilitado

En mis temas, me gusta definir una constante personalizada que se pueda usar para verificar si WooCommerce está habilitado de esta manera, puedo incluir archivos o ejecutar funciones solo cuando WooCommerce está activo (vea el mensaje importante anterior si aún no lo ha hecho).

// Agrega una nueva constante que devuelve verdadero si WooCommerce está activo
define ('WPEX_WOOCOMMERCE_ACTIVE', class_exists ('WooCommerce'));

// Comprobando si WooCommerce está activo
if (WPEX_WOOCOMMERCE_ACTIVE) {
// Hacer algo...
// Como incluir un nuevo archivo con todas tus ediciones de Woo.
}

Declarar soporte de WooCommerce

Esta es la primera y más importante pieza de código para agregar a su tema que “habilita” el soporte de WooCommerce y evita que las advertencias del complemento le digan al usuario final que el tema no es compatible.

add_action ('after_setup_theme', function () {
add_theme_support ('woocommerce');
});

Eliminar CSS de WooCommerce

Personalmente, prefiero anular los estilos de WooCommerce para evitar posibles problemas con los complementos de WooCommerce de terceros. Sin embargo, si desea eliminar todos los estilos de WooCommerce, es muy fácil.

El siguiente fragmento es para eliminar TODOS los estilos de WooCommerce:

// Eliminar todos los estilos Woo
add_filter ('woocommerce_enqueue_styles', '__return_empty_array');

Este fragmento es un ejemplo de eliminación condicional de estilos CSS específicos:

función wpex_remove_woo_styles ($ styles) {
unset ($ styles ['woocommerce-general']);
unset ($ styles ['woocommerce-layout']);
unset ($ styles ['woocommerce-smallscreen']);
return $ styles;
}
add_filter ('woocommerce_enqueue_styles', 'wpex_remove_woo_styles');

Habilite la Galería de productos WooCommerce, Zoom y Lightbox (v3.0 +)

En WooCommerce 3.0 introdujeron una nueva galería de productos, zoom y lightbox. Todos estos deben estar habilitados a través de “add_theme_support” si desea utilizarlos en su tema.

add_theme_support ('wc-product-gallery-slider');
add_theme_support ('wc-product-gallery-zoom');
add_theme_support ('wc-product-gallery-lightbox');

Eliminar 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, lo que es mejor que ocultarlo a través de CSS.

add_filter ('woocommerce_show_page_title', '__return_false');

Alterar el título del archivo de The Shop

Si su tema usa las funciones archive_title () o get_archive_title () para mostrar el título de sus archivos, puede modificarlo fácilmente a través de un filtro para obtener el nombre de la página de su producto en lugar del título del archivo de la tienda.

función wpex_woo_archive_title ($ title) {
if (is_shop () && $ shop_id = wc_get_page_id ('tienda')) {
$ title = get_the_title ($ shop_id);
}
devolver $ título;
}
add_filter ('get_the_archive_title', 'wpex_woo_archive_title');

Cambiar la cantidad de productos que se muestran por página en la tienda

Se utiliza para modificar la cantidad de productos que se muestran por página en la tienda y los archivos de productos (categorías y etiquetas).

// Alterar publicaciones de la tienda WooCommerce por página
función wpex_woo_posts_per_page ($ cols) {
volver 12;
}
add_filter ('loop_shop_per_page', 'wpex_woo_posts_per_page');

Cambiar el número de columnas que se muestran en la tienda por fila

No entiendo por qué WooCommerce funciona de esta manera, pero no puede alterar el filtro “loop_shop_columns”, también debe agregar las clases únicas a la etiqueta del cuerpo para que las columnas funcionen. Si bien los códigos cortos de Woo tienen un contenedor div con las clases correctas que las páginas de la tienda no tienen, es por eso que necesitamos dos funciones.

// Alterar columnas de la tienda
función wpex_woo_shop_columns ($ columnas) {
retorno 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 ($ classes) {
if (is_shop () || is_product_category () || is_product_tag ()) {
$ clases [] = 'columnas-4';
}
devolver $ clases;
}
add_filter ('body_class', 'wpex_woo_shop_columns_body_class');

Cambiar las flechas de paginación siguiente y anterior

Este fragmento le permitirá ajustar las flechas de paginación en la tienda para que coincidan con las de su tema.

función wpex_woo_pagination_args ($ args) {
$ args ['prev_text'] = '';
$ args ['next_text'] = '';
devolver $ args;
}
add_filter ('woocommerce_pagination_args', 'wpex_woo_pagination_args');

Cambiar el texto de la insignia de OnSale

Especialmente útil en sitios que usan un idioma diferente o para eliminar el signo de exclamación del que no soy un gran fanático.

función wpex_woo_sale_flash () {
regreso ''. esc_html __ ('Venta', 'woocommerce'). '';
}
add_filter ('woocommerce_sale_flash', 'wpex_woo_sale_flash');

Cambiar columnas de miniaturas de la galería de productos

Es posible que desee cambiar el número de columnas para las miniaturas de la galería de productos individuales dependiendo de su diseño y esta función hará exactamente eso.

función wpex_woo_product_thumbnails_columns () {
retorno 4;
}
add_action ('woocommerce_product_thumbnails_columns', 'wpex_woo_product_thumbnails_columns');

Modifique la cantidad de productos relacionados que se muestran

Se usa para modificar la cantidad de productos que se muestran para productos relacionados en la página de un solo producto.

// Establecer productos relacionados para mostrar 4 productos
función wpex_woo_related_posts_per_page ($ args) {
$ args ['posts_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 secciones relacionadas y de mayor venta en productos

Al igual que en la tienda, si desea alterar adecuadamente el número de columnas para productos relacionados y de mayor venta en las páginas de productos individuales, debe filtrar las columnas y también alterar las clases de cuerpo en consecuencia.

// Filtrar columnas de ventas ascendentes
función wpex_woo_single_loops_columns ($ columnas) {
retorno 4;
}
add_filter ('woocommerce_up_sells_columns', 'wpex_woo_single_loops_columns');

// Filtrar argumentos relacionados
función wpex_woo_related_columns ($ args) {
$ args ['columnas'] = 4;
devolver $ args;
}
add_filter ('woocommerce_output_related_products_args', 'wpex_woo_related_columns', 10);

// Filtrar clases de cuerpo para agregar clase de columna
función wpex_woo_single_loops_columns_body_class ($ classes) {
if (is_singular ('producto')) {
$ clases [] = 'columnas-4';
}
devolver $ clases;
}
add_filter ('body_class', 'wpex_woo_single_loops_columns_body_class');

Agregue un enlace de carrito dinámico y costo de carrito a su menú

Este fragmento agregará un artículo de carrito de WooCommerce a su menú que muestra el costo de los artículos en su carrito. Además, si su sitio tiene habilitado Font-Awesome, mostrará un pequeño icono de bolsa de compras. Importante: Estas funciones no deben incluirse en un condicional is_admin () porque dependen de AJAX para actualizar el costo. Debe asegurarse de que las funciones estén disponibles cuando is_admin () devuelve verdadero y falso.

// Añadir el enlace del carrito al menú
función wpex_add_menu_cart_item_to_menus ($ items, $ args) {

// Asegúrese de que su cambio 'wpex_main' a su ubicación de Menú !!!!
if ($ args-> theme_location === 'wpex_main') {

$ css_class = 'menu-item menu-item-type-cart menu-item-type-woocommerce-cart';

if (is_cart ()) {
$ css_class. = 'elemento-menú-actual';
}

$ items. = '
  • '; $ items. = wpex_menu_cart_item (); $ items. = '
  • '; } devolver $ artículos; } add_filter ('wp_nav_menu_items', 'wpex_add_menu_cart_item_to_menus', 10, 2); // La función devuelve el enlace del carrito del menú principal función wpex_menu_cart_item () { $ salida = ''; $ cart_count = WC () -> cart-> cart_contents_count; $ css_class = 'wpex-menu-cart-total wpex-cart-total-'. intval ($ cart_count); if ($ cart_count) { $ url = WC () -> carrito-> get_cart_url (); } más { $ url = wc_get_page_permalink ('tienda'); } $ html = $ cart_extra = WC () -> cart-> get_cart_total (); $ html = str_replace ('cantidad', '', $ html); $ salida. = ''; $ salida. = ''; $ salida. = wp_kses_post ($ html); $ salida. = ''; devolver $ salida; } // Actualizar enlace de carrito con AJAX función wpex_main_menu_cart_link_fragments ($ fragmentos) { $ fragments ['. wpex-menu-cart-total'] = wpex_menu_cart_item (); devolver $ fragmentos; } add_filter ('add_to_cart_fragments', 'wpex_main_menu_cart_link_fragments');

    Conclusión

    WooCommerce funcionará con cualquier tema de forma predeterminada, pero es muy fácil agregar algún soporte adicional para el complemento para que se adapte mejor a su tema. De hecho, escribí esta publicación mientras codificaba nuestro tema de blog y tienda de WordPress de Nueva York, por lo que la mayoría de estos ajustes están incluidos en nuestro tema. O, si prefiere, puede comprar el tema para ver cómo se hizo todo (vea los archivos en wpex-new-york / inc / woocommerce): puede ser una forma más fácil de aprender cómo agregar correctamente soporte personalizado para el complemento WooCommerce al mirar un tema ya codificado.

    ¿Hay algún otro fragmento que creas que pertenece a esta lista o te sería útil al desarrollar nuevos temas listos para WooCommerce??

    Jeffrey Wilson Administrator
    Sorry! The Author has not filled his profile.
    follow me
      Like this post? Please share to your friends:
      Adblock
      detector
      map