ThemeLocal: consejos de blog que funcionan como magiaThemeLocal: consejos de blog que funcionan como magia
  • Blogging
  • WordPress
  • Marketing por correo
  • SEO
  • Redes sociales
  • Más
    • Tutoriales
    • Shopify
    • Críticas
    • Consejo
    • Seguridad
    • Software y servicios
    • Generación de tráfico
    • Guia de principiantes
    • Escaparate
Search
  • Términos de Uso
  • Política de privacidad
  • Política de cookies
  • Contactar
© 2022 Themelocal. Reservados todos los derechos.
Lectura: Cómo hacer que un tema de WordPress esté listo para WooCommerce
Cuota
Notificación Mostrar más
Últimas noticias
MacBook Pro (2023) vs iPad Pro (2022): ¿cuál es la diferencia?
Versus
macOS: cómo usar acciones rápidas en Finder
Cómo
Cómo agregar sugerencias de Siri a la pantalla de inicio en iPhone (2023)
Cómo
iOS 16.4 Beta: Cómo habilitar el aislamiento de voz para llamadas de teléfono celular
Cómo
Revisión: OWC Thunderbay 8 ofrece almacenamiento Mac de alto rendimiento y alto volumen
Reseñas de tecnología
Aa
ThemeLocal: consejos de blog que funcionan como magiaThemeLocal: consejos de blog que funcionan como magia
Aa
  • Blogging
  • WordPress
  • Marketing por correo
  • SEO
  • Redes sociales
  • Más
Search
  • Blogging
  • WordPress
  • Marketing por correo
  • SEO
  • Redes sociales
  • Más
    • Tutoriales
    • Shopify
    • Críticas
    • Consejo
    • Seguridad
    • Software y servicios
    • Generación de tráfico
    • Guia de principiantes
    • Escaparate
Síganos
  • Términos de Uso
  • Política de privacidad
  • Política de cookies
  • Contactar
© 2022 Themelocal. Reservados todos los derechos.
ThemeLocal: consejos de blog que funcionan como magia > Blog > Tutoriales > Cómo hacer que un tema de WordPress esté listo para WooCommerce
Tutoriales

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

Última actualización: noviembre 18, 2021 4:25 pm
ThemeLocal hace 1 año 11 Minutos mínimos para leer
Cuota
11 Minutos mínimos para leer
Cuota

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).

Contents
Compruebe si WooCommerce está habilitadoDeclarar soporte para WooCommerceEliminar WooCommerce CSSHabilite la Galería de productos de WooCommerce, Zoom y Lightbox (v3.0 +)Eliminar el título de la tiendaModificar el título del archivo de la tiendaCambiar la cantidad de productos que se muestran por página en la tiendaCambiar el número de columnas que se muestran en la tienda por filaCambiar las flechas de paginación siguiente y anteriorCambiar el texto de la insignia de OnSaleCambiar las columnas de miniaturas de la Galería de productosModificar el número de productos relacionados mostradosCambiar la cantidad de columnas por fila para las secciones relacionadas y de ventas adicionales en los productosAgregue un enlace de carrito dinámico y un costo de carrito a su menúConclusión

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.

Importante: Muchos de los fragmentos a continuación utilizan funciones disponibles solo en WooCommerce. Así que asegúrese de que estos fragmentos no se descarguen simplemente 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 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?

También podría gustarte

macOS: cómo usar acciones rápidas en Finder

Cómo agregar sugerencias de Siri a la pantalla de inicio en iPhone (2023)

iOS 16.4 Beta: Cómo habilitar el aislamiento de voz para llamadas de teléfono celular

Cómo crear un GIF en Photoshop

Cómo eliminar una lista de reproducción de tu iPhone

ETIQUETADO: Cómo, esté, hacer, listo, para, tema, WooCommerce, WordPress
ThemeLocal noviembre 18, 2021
Comparte este artículo
Facebook Twitter Pinterest Whatsapp Whatsapp
Cuota
¿Qué piensas?
Amor0
Triste0
Contento0
Somnoliento0
Enfadado0
Sin comentarios0
Guiño0
Artículo anterior Utilice notificaciones automáticas para generar tráfico repetido
Artículo siguiente Cómo mantener el jugo de SEO al pasar a un nuevo dominio
Deja un comentario

Deja una respuesta Cancelar la respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Publicación popular

Cómo configurar un diseño de pantalla de inicio de iPhone diferente en el trabajo (2023)
Cómo
La banda ancha Super Fiber de Now es actualmente súper barata
Ofertas
Apple MacBook Pro con M2 Pro obtiene un descuento tentador
Ofertas
Acer Swift 1 Reseña
Reseñas de tecnología
El Apple Watch Series 9 de 2023: qué esperar de Apple este otoño
Guías
Revisión: OWC Thunderbay 8 ofrece almacenamiento Mac de alto rendimiento y alto volumen
Reseñas de tecnología

También podría gustarte

Cómo

macOS: cómo usar acciones rápidas en Finder

hace 2 horas 3 Minutos mínimos para leer
Cómo

Cómo agregar sugerencias de Siri a la pantalla de inicio en iPhone (2023)

hace 2 horas 4 Minutos mínimos para leer
Cómo

iOS 16.4 Beta: Cómo habilitar el aislamiento de voz para llamadas de teléfono celular

hace 6 horas 3 Minutos mínimos para leer
Cómo

Cómo crear un GIF en Photoshop

hace 10 horas 3 Minutos mínimos para leer
Cómo

Cómo eliminar una lista de reproducción de tu iPhone

hace 11 horas 5 Minutos mínimos para leer
Cómo

SharePlay: Cómo hacer ejercicio con amigos usando Apple Fitness Plus

hace 15 horas 3 Minutos mínimos para leer
Cómo

¿El modo de enfoque no funciona? Pruebe estos 8 consejos para solucionar problemas

hace 20 horas 9 Minutos mínimos para leer
Ofertas

¿Alguna vez has usado Wi-Fi público? Esta oferta de NordVPN es para ti

hace 23 horas 3 Minutos mínimos para leer
Mostrar más
ThemeLocal: consejos de blog que funcionan como magiaThemeLocal: consejos de blog que funcionan como magia
Síganos

© 2022 Themelocal. Reservados todos los derechos.

  • Términos de Uso
  • Política de privacidad
  • Política de cookies
  • Contactar

Removed from reading list

Deshacer
Welcome Back!

Sign in to your account

¿Perdiste tu contraseña?