Ganchos WooCommerce

En este artículo, vamos a enumerar algunos de los ganchos personalizados que se pueden utilizar para sobrescribir algunos de los comportamientos del tema por defecto con el tema Astra. Siempre es recomendable añadir los ganchos personalizados al tema hijo de tu tema. Si no estás seguro de lo que es un tema hijo, por favor lee este artículo. Si no estás seguro de cómo insertar los ganchos personalizados en el archivo function.php del tema hijo, haz clic en aquí.

Ganchos personalizados del tema Astra

Cambiar la etiqueta del widget de la barra lateral de la tienda de WooCommerce

El siguiente hook personalizado cambiará la etiqueta del título del widget de la barra lateral de la tienda a H4. Esta función se utiliza normalmente para cambiar la etiqueta de encabezado del título del widget para evitar encabezados duplicados que a su vez aumenta la puntuación SEO de una página web o blog.Para utilizar este código, simplemente cópielo y péguelo en la parte inferior del archivo function.php de su tema hijo.

add_filter( 'astra_woocommerce_shop_sidebar_init', 'widget_title_tag', 10, 1 );
 
function widget_title_tag( $atts ) {
    $atts['before_title'] = '<h4 class="widget-title">';
    $atts['after_title'] = '</h4>';
 
    return $atts;
}

Cambiar el WooCommerce Único Producto Etiqueta Widget de barra lateral

El siguiente hook personalizado cambiará la etiqueta del título del widget de la barra lateral de un solo producto a H4. Esta función se utiliza normalmente para cambiar la etiqueta de encabezado del título del widget para evitar encabezados duplicados que a su vez aumenta la puntuación SEO de una página web o blog. Para utilizar este código, simplemente cópielo y péguelo en la parte inferior del archivo function.php de su tema hijo.

add_filter( 'astra_woocommerce_single_sidebar_init', 'widget_title_tag', 10, 1 );
 
function widget_title_tag( $atts ) {
    $atts['before_title'] = '<h4 class="widget-title">';
    $atts['after_title'] = '</h4>';
 
    return $atts;
}

Ocultar la cantidad del carrito de la compra cuando el carrito está vacío.

Esta función personalizada ocultará la cantidad de artículos cuando el carrito esté vacío. Idealmente sin el código, el carrito mostrará "0" cuando esté vacío; sin embargo, cuando añada el siguiente código al archivo function.php de su tema hijo, la pantalla estará en blanco. He aquí un ejemplo completo artículo más o menos lo mismo.

add_filter('astra_woo_header_cart_total', 'remove_cart_count');
function remove_cart_count( $default){
    if(0 == WC()->cart->get_cart_contents_count()){
        return false;
    }else{
        return $default;
    }
}

Así es como se mostrará en la parte frontal del sitio web:

Cambiar el texto predeterminado "Cesta de la compra" por un texto personalizado en la vista móvil

Por defecto el WooCommerce ha nombrado el carrito como el carrito de la compra. Para cambiar este texto no hay opciones dentro del tema o el plugin.este gancho personalizado le permitirá cambiar el texto del carrito de compras a cualquier cosa que le gustaría. Sólo tienes que sustituir el texto "Mi tienda Flyout Cart" a cualquier texto que le gustaría establecer.

add_filter( 'astra_header_cart_flyout_shopping_cart_text', function() {

    return 'My Shop Flyout Cart';

}

Para más información, visite artículo. He aquí un ejemplo de los efectos antes y después de utilizar este código:

Desactivar la visualización del recuento de carros

Esta función personalizada desactivará la visualización del recuento de carritos en su sitio web WooCommerce.

add_filter( 'astra_header_cart_count', '__return_false' );

Cambiar el título de la cabecera del carro

Esta función personalizada le permitirá cambiar el título del carrito en la cabecera por cualquier texto que desee. Sustituye el texto "Mi carrito" por el texto que desees.

dd_filter( 'astra_header_cart_title', function() {

    return 'My Shop Cart';

} );

He aquí una comparación de las imágenes del antes y el después.        

Adición de clases personalizadas para la sección Header Cart Menu

Esta función personalizada añadirá una clase personalizada a la sección del menú del carrito dentro de la cabecera.

add_filter( 'astra_cart_in_menu_class', function( $args ){

    $args = array_merge($args, array('custom-class-name-1', 'custom-class-name-2'));

    return $args;

} );

Desactivar el icono del carrito de la cabecera por defecto de WooCommerce

Esta función personalizada ocultará el icono del carrito de la cabecera de su sitio web de comercio electrónico en el tema Astra.

add_filter( 'astra_woo_default_header_cart_icon', '__return_false' );

Desactivar la integración de WooCommerce

El Tema Astra viene con opciones de personalización listas para usar para el plugin WooCommerce. Puede utilizarlas para personalizar las páginas de la tienda, el carrito y la caja, así como los productos individuales. Por el contrario, para usar las páginas y opciones predeterminadas de WooCommerce para tu sitio web, necesitas usar código personalizado. Por lo tanto, usted puede aprender cómo hacerlo con este documento. Para saber más sobre cómo cambia el sitio, haga clic en aquí.

add_filter( 'astra_enable_woocommerce_integration', '__return_false' );

Desactivar la Categoría Padre de la Tienda WooCommerce en la Página de la Tienda

Esta función personalizada ocultará la categoría principal de la página de la tienda de su sitio de comercio electrónico.

add_filter( 'astra_woo_shop_parent_category', '__return_false' );

He aquí un ejemplo de cómo funciona.

Cambiar el título "Agotado

Esta función personalizada le permitirá cambiar el texto de "agotado" de cualquier artículo por cualquier texto personalizado de su elección. Para saber más sobre este filtro, visite este enlace artículo.

add_filter( 'astra_woo_shop_out_of_stock_string', function() {

    return 'My Out of stock label';

} );

Ganchos del complemento Astra Add on

Cambiar el texto "No hay más productos que mostrar"

Este hook personalizado le permitirá cambiar el texto del mensaje predeterminado "No hay más productos que mostrar" por cualquier texto personalizado de su elección cuando sus visitantes lleguen al final de una búsqueda de productos. Esta es una característica premium y sólo funciona cuando el plugin Astra Addon está instalado. Todo lo que necesitas hacer es cambiar la etiqueta "My No more products to show" en el código de abajo por cualquier texto de tu elección y añadir el código al archivo function.php de tu tema hijo astra.

add_filter( 'astra_shop_no_more_product_text', function() {

    return 'My No more products to show label';

} );

Cambiar la redirección de la URL del carrito de WooCommerce

Este filtro personalizado te permitirá cambiar la redirección de la url del carrito por defecto de WooCommerce a cualquier página de tu elección. Si usted ha construido una página de carrito personalizado y desea que sus visitantes sean redirigidos a esta página en lugar de la página del carrito por defecto del woocommerce, este es el filtro para usted.

Todo lo que tienes que hacer es sustituir la url "https://my_add_to_cart_redirect_url" por tu url personalizada en el código que se menciona a continuación y añadirlo al archivo function.php de tu tema hijo Astra.

add_filter( 'astra_woocommerce_add_to_cart_redirect', function() {

    return 'https://my_add_to_cart_redirect_url'; // e.g: http://<yoursite_url>/cart/

} );

Filtro para cambiar la etiqueta "Cargar más

Este filtro personalizado le permitirá cambiar las etiquetas "Load More" en su sitio web de comercio electrónico. Todo lo que tienes que hacer es reemplazar el texto "Mi etiqueta Load More" en el código mencionado a continuación y añadirlo al archivo function.php del tema Astra Child.

add_filter( 'astra_load_more_text', function() {

    return 'My Load More label';

} );

Acciones personalizadas

Estos códigos de acción personalizados le permitirán tener un mayor control sobre el aspecto de su página de comercio electrónico en el frontend.

Abrir una página de producto en una ventana nueva

El siguiente código personalizado le permitirá abrir siempre la página del producto en una ventana nueva.

remove_action( 'woocommerce_before_shop_loop_item','woocommerce_template_loop_product_link_open', 10 );

add_action( 'woocommerce_before_shop_loop_item', 'ami_function_open_new_tab', 10 );

function ami_function_open_new_tab() {

    echo '<a target="_blank" href="' . get_the_permalink() . '" class="woocommerce-LoopProduct-link">';

}

Véalo en acción a continuación

Mostrar el valor en stock justo antes del botón Añadir al carrito

El siguiente código personalizado mostrará el valor de los artículos en stock justo antes del botón de añadir al carrito en la página de la tienda de su comercio electrónico.

add_action( 'astra_woo_shop_add_to_cart_before', 'astra_custom_code', 10 );

function astra_custom_code() {

   global $product;

   echo wc_get_stock_html( $product );

}

Así es como se ve en el front-end

Añadir fragmento personalizado antes del resumen del producto en la página Tienda

Este filtro personalizado le permite añadir un fragmento de texto personalizado antes del resumen del producto en la página de la tienda.

add_action( 'astra_woo_shop_before_summary_wrap', 'astra_custom_code', 10 );

function astra_custom_code() {

   echo '<div>

    Add here your custom snippet that needs to be added before the product summary on the Shop page.

   </div>';

}

Así es como se ve en la parte delantera

Añadir fragmento personalizado después del resumen del producto en la página Tienda

Este filtro personalizado le permite añadir un fragmento de texto personalizado después del resumen del producto en la página de la tienda.

add_action( 'astra_woo_shop_after_summary_wrap', 'astra_custom_code', 10 );

function astra_custom_code() {

   echo '<div>

    Add here your custom snippet that needs to be added After the product summary on Shop page.

   </div>';

}

Este es el aspecto de la parte delantera:

Añadir el botón de continuar comprando en las páginas de carrito y pago

Este código personalizado le permite añadir un botón de continuar comprando en su carrito y página de pago para que el cliente pueda seguir navegando por más productos y añadirlos al carrito.

/**

* Add Continue Shopping Button on Cart (& checkout) Page

*/

 

add_action( 'woocommerce_after_cart_table', 'woo_add_continue_shopping_button_to_cart' );

 

function woo_add_continue_shopping_button_to_cart() {

 $shop_page_url = get_permalink( woocommerce_get_page_id( 'shop' ) );

 

 echo '<div class="">';

 echo ' <a href="'.$shop_page_url.'" class="button">Continue Shopping</a>';

 echo '</div>';

}

 

add_action( 'woocommerce_before_checkout_form', 'woo_add_continue_shopping_button_to_checkout' );

 

function woo_add_continue_shopping_button_to_checkout() {

 $shop_page_url = get_permalink( wc_get_page_id( 'shop' ) );

 

 echo '<div class="woocommerce-message">';

 echo ' <a href="'.$shop_page_url.'" class="button">Continue Shopping</a> Not finished shopping ?';

 echo '</div>';

}

Aquí está cómo se ve en la parte delantera:

Mostrar el campo SKU en el bucle del producto

Este código personalizado muestra el SKU en el bucle del producto.

add_action( 'woocommerce_after_shop_loop_item_title', 'woocommerce_after_shop_loop_item_sku_in_cart', 20, 1);

function woocommerce_after_shop_loop_item_sku_in_cart( $template ) {

    global $product;

    $sku = $product->get_sku();

    echo "<p style='color: #444;'>" ."SKU Number:&nbsp; " . $sku . "</p>";

}

Añadir campos personalizados después del título en el archivo de la página Tienda

Este código personalizado le permitirá añadir los campos personalizados después del título del producto en la página de la tienda, es decir, el resumen del producto en la página de la tienda.

add_action( 'astra_woo_shop_title_after

', 'astra_custom_code', 10 );

function astra_custom_code() {

   echo '<div>

    Add custom fields after the title on the Shop page archive i.e. the product summary on Shop page.

   </div>';

}

Añadir campos personalizados antes del título en el archivo de la página Tienda

Este código personalizado le permitirá añadir los campos personalizados antes del título del producto en la página de la tienda, es decir, el resumen del producto en la página de la tienda.

add_action( 'astra_woo_shop_title_before', 'astra_custom_code', 10 );

function astra_custom_code() {

   echo '<div>

    Add custom fields before the title on the Shop page archive i.e. the product summary on Shop page.

   </div>';

}

Añadir campos personalizados después del título en la página de producto único

Este código personalizado le permitirá añadir un texto personalizado después del título del producto en la página de producto único.

add_action( 'astra_woo_single_title_after', 'astra_custom_code', 10 );

function astra_custom_code() {

   echo '<div>

    Add custom fields/snippet after the title on the Single Product page.

   </div>';

}

Añadir campos personalizados antes del título en la página de producto único

Este código personalizado le permitirá añadir un texto personalizado antes del título del producto en la página de producto único.

add_action( 'astra_woo_single_title_before', 'astra_custom_code', 10 );

function astra_custom_code() {

   echo '<div>

    Add custom fields/snippets before the title on the Single Product page.

   </div>';

}