WooCommerce es el mejor complemento para sitios comerciales electrónicos por una razón. Todos pueden instalar fácilmente el complemento de WooCommerce, crear etiquetas y categorías, agregar productos o incluso mostrar productos agrupados. Antes de comenzar nuestra guía sobre cómo usar ganchos en WoCommerce, le diremos algo sobre los ganchos. Básicamente, los ganchos de WordPress le permiten agregar o cambiar el código sin tener que editar ningún archivo básico. Como tal, son fragmentos de código extremadamente útiles que los desarrolladores pueden usar para manipular el código. Hay dos tipos de ganchos: acciones y filtros. La acción le permite agregar código personalizado en diferentes puntos. El filtro, por otro lado, le permite manipular, reemplazar y devolver un nuevo valor variable al final.
Si desea usar un gancho para cambiar o agregar un código personalizado, puede agregarlo al archivo Functions.php que se puede encontrar en la carpeta de su base o, si desea que sus cambios se guarden con actualización del tema. Puede pegar ese código en la carpeta Function.php del tema infantil. Para hacer esto, es importante saber cómo crear un tema infantil antes de continuar. Para usar Action Hooks, primero debe buscar un gancho en la carpeta/archivo del archivo y encontrar un nombre de gancho único que se usará para manejar el código personalizado. El gancho de acción que usará es do_action (‘action_name’); .
Ahora que ha encontrado un nombre de gancho, puede agregarlo aquí:
if (! function_exists (‘name_functiei_dvs.’)) {
Funcionar your_function_name () {
// Su código personalizado va aquí}
add_action (‘name_acation’, ‘name_function_dvs.’);
}
Los ganchos de filtro se llaman en todo el código utilizando APLICE_FILTER (‘FILTER_NAME’, $ variable); . De la misma manera que ha encontrado un nombre de filtro único para el gancho de acción, puede comenzar a crear la función personalizada para reemplazar la variable respectiva:
if (! function_exists (‘name_functiei_dvs.’)) {
Funcionar your_function_name ($ variable) {
// Su código personalizado va aquí
Devuelve $ variable;
}
add_filter (‘name_filtru’, ‘name_function_dvs.’);
}
Es importante tener en cuenta que debe devolver un valor.
Los ganchos del filtro pueden pasar varias variables. En este caso, debe establecer parámetros adicionales dentro de la función add_filter para acceder a ella. La razón de esto es que los desarrolladores de WordPress han establecido 1 como un número predeterminado de variables aceptadas. Entonces, si desea acceder a otras variables, debe establecer el cuarto parámetro dentro de la función. Un ejemplo sería el gancho de filtro multivariable:
APLICE_FILTER (‘name_filtru’, $ variable1, $ variable2, $ variable3);
Y aquí está la función adecuada para esto:
if (! function_exists (‘name_functiei_dvs.’)) {
Función your_function_name ($ variable1, $ variable2, $ variable3) {
// Ejemplo de código personalizado
$ value_noua = $ variable1 + $ variable2 + $ variable3;
devuelve $ new_value;
}
add_filter (‘name_filtru’, ‘name_function_dvs’, 10, 3);
}
El tercer parámetro dentro de la función add_filter tiene prioridad. Con este parámetro, puede controlar cuándo se realiza su función es un parámetro que es más útil para el gancho de acción, en lugar de para el gancho de filtro, porque puede controlar dónde agregará un nuevo código si hay funciones más personalizadas de que ellos Usado el mismo gancho de acción. Ahora explicamos cómo funcionan los thooks en WordPress, le mostraremos algunos trucos útiles sobre cómo anular las plantillas de WooCommerce. Para este propósito, utilizaremos la última versión de WordPress con veinte diecisiete y la versión actual (3.5.4) del complemento WooCommerce. Comenzaremos desde la página principal de la tienda:
Como puede ver, la página de la tienda predeterminada tiene:
Migas de pan

El título de la página
Contando resultados y pedidos
Lista de productos
paginación
Barra lateral (opcional)
Si desea cambiar o agregar un código aquí, primero debe ingresar la carpeta del complemento. Puede hacerlo accediendo a WooCommerce/Templates/Archive-Product.php. Una vez que esté allí, debe verificar qué ganchos han implementado los autores de complementos aquí.
En la siguiente sección, cubriremos lo siguiente:
Cómo quitar las migas de pan
Cómo ocultar el título de la página
Cómo cambiar la cantidad de productos para la página de la tienda
Cómo empacar la lista de productos con un marcador personalizado
Cómo agregar una insignia vendida al artículo del producto
Cómo cambiar la marca para el título del artículo del producto
Cómo cambiar las posiciones y evaluaciones de precios
Bonificación: tema con todas las características esenciales de la tienda
Obtenga nuestra guía gratuita para crear una tienda en línea con WooCommerce Regístrese en nuestro boletín informativo y le enviaremos una copia gratuita de la guía PDF completa para crear una tienda en línea con WooCommerce (88 páginas) Cómo hacerlo Retire las migas de pan
El código personalizado a continuación elimina la función WooCommerce_BreadCumbic, que agrega marcado para Breadcrumb. Establecí la prioridad en 20, porque es un valor implícito de prioridad en el archivo de plantilla de complemento.
/**

* Hook: wooCommerce_before_main_content.
*
* @Hoced wooCommerce_output_content_wrapper – 10 (salidas de apertura para contenido)
* @Hoced wooCommerce_breadcrumb – 20
* @Hoced wc_structured_data :: generate_website_data () – 30
*/
do_action (‘wooCommerce_before_main_content’);
Y ahora, tenemos que establecer lo mismo para eliminar esa área.
// retira las migas de pan
Remove_action (‘wooCommerce_before_main_content’, ‘wooCommerce_breadcrumb’, 20);
Cómo ocultar el título de la página
Para ocultar el área de título de la página en la página de su tienda, puede usar este código personalizado a continuación.
If (! Function_exists (‘hide_wooCommerce_page_itle’)) {
/**
* Ocultar el título de la página de WooCommerce
*/
Hide_wooCommerce_page_itle ($ visibilidad) {
// El valor predeterminado de $ visibilidad es verdadero
$ visibilidad = falso;
Devuelve $ Visibilidad;
}
add_filter (‘wooCommerce_show_page_itle’, ‘hide_wooCommerce_page_itle’);
}
O puede simplificarlo:
If (! Function_exists (‘hide_wooCommerce_page_itle’)) {
/**
* Ocultar el título de la página de WooCommerce
*/
Hide_wooCommerce_page_itle () función {
devuelve falso;
}
add_filter (‘wooCommerce_show_page_itle’, ‘hide_wooCommerce_page_itle’);}
Debemos enfatizar que ambos códigos son correctos, la única diferencia es la forma en que los escribe. El primero reemplaza el valor variable transmitido con el nuevo y lo envía nuevamente a gancho, mientras que el segundo código solo devuelve el nuevo valor.
Cómo cambiar la cantidad de productos para la página de la tienda
Para cambiar la cantidad de productos en la página para la página de la tienda, puede usar este código personalizado a continuación. En nuestro ejemplo, establecemos el número máximo de productos por página en 8. Si desea un número diferente, solo necesita cambiar este valor.
If (! Function_exists (‘change_wooCommerce_products_per_page’)) {
/**
* Cambiar el número de productos en la página principal de la tienda
*/
Cambie_wooCommerce_products_per_page () function {
regresar 8;
}
add_filter (‘loop_shop_per_page’, ‘Change_wooCommerce_products_per_page’, 20);
}
Cómo empacar la lista de productos con marcado personalizado
Para agregar una marca adicional alrededor de los elementos en la lista de productos, debe usar dos funciones. El primero agregará el código antes de la lista, y el segundo lo agregará después de la lista si abre una etiqueta HTML (DIV por ejemplo) antes de la lista.
If (! Function
/**
* Adición de marcado adicional antes de la lista de productos
*/
Adicional_markup_before_products () función {
Echo ‘

‘ .essc_html __ (‘Título personalizado antes de los productos’). “

“;
}
add_action (‘wooCommerce_before_shop_loop’, ‘adición_markup_before_products’, 40);}
Como puede ver en el código anterior, hemos establecido la prioridad en 40, porque los autores del complemento WooCommerce ya han usado este gancho de acción para agregar algunos marcados con prioridades predefinidas:
@Hoced wooCommerce_output_all_nototes – 10
@Hoced WooCommerce_Result_Count – 20
@Hoced wooCommerce_catalog_ording – 30
Por esta razón, verificaremos qué función tiene la última prioridad (para agregar nuestro código solo alrededor de la lista). En este caso, es la función WooCommerce_Catalog_ording. Luego estableceremos solo un valor más alto.
If (! Function_exists (‘adicional_markup_after_products’)) {
/**
* Adición de un marcado adicional después de la lista de productos
*/
Función adicional_markup_after_products () {
Echou ‘
‘;
}
add_action (‘wooCommerce_after_shop_loop’, ‘adición_markup_after_products’, 5);
}
Haremos lo mismo para prioridad después de la marca. Por defecto, hay una función que se agrega a esta acción.
@Hoced wooCommerce_pagination – 10
Por esta razón, solo estableceremos un valor más bajo para cerrar el marcado antes de la parte de la paginación.
Ahora recargaremos la página principal de la tienda y aquí está el resultado:
Ahora que ha aprendido cómo usar ganchos para la página principal de la tienda, le mostraremos cómo reemplazar el contenido del elemento del producto. Pero antes de comenzar, debemos tener en cuenta que las cosas más importantes para el uso de ganchos son la inspección/solución de problemas de los temas/complementos y encontrar el lugar correcto donde se reproduce el marcado para que pueda inspeccionar ese código y verificar si es posible. para salir con ganchos. El complemento de WooCommerce tiene una buena organización de carpetas y puede encontrar todas las plantillas en la carpeta del complemento/plantillas de WooCommerce. El archivo principal del elemento del producto que ahora queremos reemplazar es content-production.php. Dentro de ese archivo, verá todos los ganchos con la función Hoced que los autores de complementos han implementado para sus propósitos.
Las mejores soluciones de CRM WooCommerce
Cómo agregar productos a WooCommerce
Cómo se instala el complemento de WooCommerce

Cómo agregar una insignia vendida en el artículo del producto

Para agregar una nueva característica para el artículo del producto, en este caso la marca Insignia vendida, debemos enseñarle lo que es un producto Global $ y cómo puede usarlo primero. Como puede ver en el código a continuación, por primera vez utilicé un producto $ Producto Global Variable y el if (! $ Product-> IS_IN_STOCK ()) {. Una variable global $ producto es una variable implícita dentro del complemento y puede usarlo para acceder a características adicionales para manejar el código. El tipo de producto variable $ es el objeto y ese objeto se extiende con muchos métodos (funciones). Lo usé para acceder a IS_IN_STOCK () el método de acceso a IS_IN_STOCK () donde este método devuelve un valor booleano si el producto está en stock. Por esta razón, en el siguiente código hemos agregado un acondicionamiento bajo el cual verificamos si el producto está en stock. Si no está en stock, jugaremos la marca para la insignia vendida. De lo contrario, lo omitiremos. Finalmente, el código personalizado que puede usar para agregar esa insignia en sus artículos es: if (! Function_exists (‘add_sold_badge_mark)) {
/**

* Agregar insignias vendidas para el artículo del producto

*/

Add_sold_badge_mark () función {
Producto Global $;
If (! $ Producto-> is_in_stoc ()) {
eco ”. es_html __ (‘vendido’). ”;
}
}
add_action (‘wooCommerce_before_shop_loop_item_itle’, ‘add_sold_badge_mark’);
}
Cómo cambiar la marca para el título del artículo del producto
Como puede ver dentro del archivo content-prop. Php, el título del elemento del producto se agrega en el gancho de acción wooCommerce_shop_loop_item_title con la función wooCommerce_template_loop_product_title ./**
* Hook: wooCommerce_shop_loop_item_title.
*
* @Hoced wooCommerce_template_loop_product_title – 10
*/
do_action (‘wooCommerce_shop_loop_item_itle’);
Si marca esta función, verá que los autores de arado han renderizado directamente la etiqueta HTML y no hay un filtro para reemplazarlo. Por esta razón, le mostraremos dos soluciones para cambiar esta marca. La primera solución es anular toda la función en el archivo /function.php de su base para hacer esto, solo tiene que copiar /pegar la función completa de la carpeta del complemento en /functions.php de su tema, por ejemplo:
WooCommerce_template_loop_product_title () {
echo ‘

. get_the_title (). “

“;
}
Luego sobrescribe el título predeterminado con su título, como sigue:
WooCommerce_template_loop_product_title () {
echo ‘

. get_the_title (). “

“;
}
La segunda solución es eliminar el gancho de acción del complemento y agregar su función personalizada a ese gancho. Preferimos esta solución para mantener el código único, flexible y para evitar posibles problemas para las actualizaciones de complementos. La razón es que si el autor del complemento cambia esta función en el futuro, agrega el código adicional aquí o lo usa en otro lugar, entonces puede ocurrir un problema o un error. Así es como el código debe buscar esta solución:
Remove_action (‘wooCommerce_shop_loop_item_itle’, ‘wooCommerce_template_loop_product_title’); if (!
/**
* Agregar marcado para el título del artículo del producto
*/
la función add_product_item_itle () {
echo ‘

. get_the_title (). “

“;
}
add_action (‘wooCommerce_shop_loop_item_itle’, ‘add_product_item_title’);
}
Cómo cambiar las posiciones de precio y evaluaciones
Para cambiar las posiciones de los elementos dentro de una marca particular (en este caso, un elemento de producto), puede usar la función Remove_Action y Add_action con prioridades. Si los elementos se agregan con el gancho, las prioridades definen el lugar donde el elemento estará dentro de la marca. La prioridad más baja jugará ese elemento como el primero. El complemento de WooCommerce tiene muchos ganchos y, en la mayoría de los casos, los elementos se agregan con los ganchos. Por lo tanto, este artículo es una oportunidad ideal para mostrarle cómo puede hacerlo. Aquí le mostraremos cómo cambiar la posición del precio y los elementos de calificación. El código para eso será:
// Eliminar las funciones del wooCommerce_after_shop_loop_item_ititle con prioridad inicial
Remove_action (‘wooCommerce_after_shop_loop_item_itle’, ‘wooCommerce_template_loop_rating’, 5);
Remove_action (‘wooCommerce_after_shop_loop_item_itle’, ‘wooCommerce_template_loop_price’, 10);
// Se han agregado funciones a Hook wooCommerce_after_shop_loop_item_title con una nueva prioridad
add_action (‘wooCommerce_after_shop_loop_item_itle’, ‘wooCommerce_template_loop_rating’, 10);
add_action (‘wooCommerce_after_shop_loop_item_itle’, ‘wooCommerce_template_loop_price’, 5); Primero, eliminaremos ambos elementos del artículo del producto con las funciones y prioridades originales.Puede encontrar ambos elementos en el archivo content-prop. Php.
/**
* Hook: wooCommerce_after_shop_loop_item_title.
*
* @Hoced wooCommerce_template_loop_rating – 5
* @Hoced wooCommerce_template_loop_price – 10
*/
do_action (‘wooCommerce_after_shop_loop_item_itle’);
Luego agregaremos las mismas funciones en el mismo gancho con nuevas prioridades, y el resultado se verá así:
Tema con todas las características esenciales de la tienda
Aunque puede administrar fácilmente los ganchos de WooCommerce para proporcionar más opciones, a veces es más fácil obtener un conjunto de herramientas de tiendas preparadas, que no requieren ajustes adicionales. Recomendamos verificar a ONA, un tema de WooCommerce completamente suministrado con aspectos de tiendas fáciles de usar y opciones de tiendas. Debido a las funcionalidades cuidadosamente diseñadas de este tema, no tendrá que cambiar ningún código. Por el contrario, Onea no requiere habilidades de codificación. Lo que más nos gusta de este tema es su colección de plantillas de tienda que incluye tanto las listas de productos como los modelos únicos. Además, integra muchas otras características prácticas, como la lista de usuarios, descripción del producto, filtración de precios, vista rápida y más. Este tema es totalmente personalizable, por lo que puede adaptar cualquier elemento a sus preferencias. También está preparado para SEO y Retina, lo que garantizará que el contenido de su tienda se vea genial en cualquier dispositivo. Esperamos que este elemento haya sido útil. Si le gustó, ¡no dude en consultar algunos de estos artículos!
Uso de un elemento del botón HTML5 como Formulario de contacto 7 Enviar
El tema del niño – una explicación simple
Personalizar la opción en WordPress