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

Entonces, desea agregar una tienda a su tema, ¡increíble! WooCommerce es una gran opción. Tecnicamente hablando TODOS 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).

Sin embargo, como desarrollador de temas, es posible que desee modificar la salida de WooCommerce para que se adapte 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 utilizar para proporcionar un soporte «mejor» para WooCommerce en su tema y / o para modificar cosas para su diseño específico.

Compruebe si WooCommerce está habilitado

En mis temas, me gusta definir una constante personalizada que se puede 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 arriba si aún no lo ha hecho).

// Add new constant that returns true if WooCommerce is active
define( 'WPEX_WOOCOMMERCE_ACTIVE', class_exists( 'WooCommerce' ) );

// Checking if WooCommerce is active
if ( WPEX_WOOCOMMERCE_ACTIVE ) {
    // Do something...
    // Such as including a new file with all your Woo edits.
}

Declarar soporte para 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 WooCommerce CSS

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:

// Remove all Woo Styles
add_filter( 'woocommerce_enqueue_styles', '__return_empty_array' );

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

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

add_filter( 'woocommerce_show_page_title', '__return_false' );

Modificar el título del archivo de la tienda

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

function wpex_woo_archive_title( $title ) {
	if ( is_shop() && $shop_id = wc_get_page_id( 'shop' ) ) {
		$title = get_the_title( $shop_id );
	}
	return $title;
}
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).

// Alter WooCommerce shop posts per page
function wpex_woo_posts_per_page( $cols ) {
    return 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 simplemente 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, las páginas de la tienda no lo tienen, por eso necesitamos dos funciones.

// Alter shop columns
function wpex_woo_shop_columns( $columns ) {
	return 4;
}
add_filter( 'loop_shop_columns', 'wpex_woo_shop_columns' );

// Add correct body class for shop columns
function wpex_woo_shop_columns_body_class( $classes ) {
	if ( is_shop() || is_product_category() || is_product_tag() ) {
		$classes[] = 'columns-4';
	}
	return $classes;
}
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.

function wpex_woo_pagination_args( $args ) {
	$args['prev_text'] = '<i class="fa fa-angle-left"></i>';
	$args['next_text'] = '<i class="fa fa-angle-right"></i>';
	return $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 admirador.

function wpex_woo_sale_flash() {
	return '<span class="onsale">' . esc_html__( 'Sale', 'woocommerce' ) . '</span>';
}
add_filter( 'woocommerce_sale_flash', 'wpex_woo_sale_flash' );

Cambiar las 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 un solo producto según su diseño y esta función hará precisamente eso.

function wpex_woo_product_thumbnails_columns() {
	return 4;
}
add_action( 'woocommerce_product_thumbnails_columns', 'wpex_woo_product_thumbnails_columns' );

Modificar el número de productos relacionados mostrados

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

// Set related products to display 4 products
function wpex_woo_related_posts_per_page( $args ) {
	$args['posts_per_page'] = 4;
	return $args;
}
add_filter( 'woocommerce_output_related_products_args', 'wpex_woo_related_posts_per_page' );

Cambiar la cantidad de columnas por fila para las secciones relacionadas y de ventas adicionales en los productos

Al igual que la tienda, si desea modificar correctamente el número de columnas para productos relacionados y de venta superior en las páginas de un solo producto, debe filtrar las columnas y también modificar las clases de cuerpo en consecuencia.

// Filter up-sells columns
function wpex_woo_single_loops_columns( $columns ) {
	return 4;
}
add_filter( 'woocommerce_up_sells_columns', 'wpex_woo_single_loops_columns' );

// Filter related args
function wpex_woo_related_columns( $args ) {
	$args['columns'] = 4;
	return $args;
}
add_filter( 'woocommerce_output_related_products_args', 'wpex_woo_related_columns', 10 );

// Filter body classes to add column class
function wpex_woo_single_loops_columns_body_class( $classes ) {
	if ( is_singular( 'product' ) ) {
		$classes[] = 'columns-4';
	}
	return $classes;
}
add_filter( 'body_class', 'wpex_woo_single_loops_columns_body_class' );

Agregue un enlace de carrito dinámico y un 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 Font-Awesome habilitado, mostrará un pequeño ícono 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 () devuelva verdadero y falso.

// Add the cart link to menu
function wpex_add_menu_cart_item_to_menus( $items, $args ) {

	// Make sure your change 'wpex_main' to your Menu location !!!!
	if ( $args->theme_location === 'wpex_main' ) {

		$css_class = 'menu-item menu-item-type-cart menu-item-type-woocommerce-cart';
		
		if ( is_cart() ) {
			$css_class .= ' current-menu-item';
		}

		$items .= '<li class="' . esc_attr( $css_class ) . '">';

			$items .= wpex_menu_cart_item();

		$items .= '</li>';

	}

	return $items;

}
add_filter( 'wp_nav_menu_items', 'wpex_add_menu_cart_item_to_menus', 10, 2 );

// Function returns the main menu cart link
function wpex_menu_cart_item() {

	$output = '';

	$cart_count = WC()->cart->cart_contents_count;

	$css_class = 'wpex-menu-cart-total wpex-cart-total-'. intval( $cart_count );

	if ( $cart_count ) {
		$url  = WC()->cart->get_cart_url();
	} else {
		$url  = wc_get_page_permalink( 'shop' );
	}

	$html = $cart_extra = WC()->cart->get_cart_total();
	$html = str_replace( 'amount', '', $html );

	$output .= '<a href="'. esc_url( $url ) .'" class="' . esc_attr( $css_class ) . '">';

		$output .= '<span class="fa fa-shopping-bag"></span>';

		$output .= wp_kses_post( $html );

	$output .= '</a>';

	return $output;
}


// Update cart link with AJAX
function wpex_main_menu_cart_link_fragments( $fragments ) {
	$fragments['.wpex-menu-cart-total'] = wpex_menu_cart_item();
	return $fragments;
}
add_filter( 'add_to_cart_fragments', 'wpex_main_menu_cart_link_fragments' );

Conclusión

WooCommerce funcionará con cualquier tema de forma predeterminada, pero agregar un poco de soporte adicional para el complemento para que se adapte mejor a su tema es muy fácil de hacer. 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 a agregar correctamente soporte personalizado para el complemento WooCommerce al observar un tema ya codificado.

¿Hay algún otro fragmento que crea que pertenece a esta lista o le resultaría útil al desarrollar nuevos temas listos para WooCommerce?