Los 16 fragmentos de WooCommerce más útiles y funcionales
En mi artículo sobre los fragmentos de WordPress más útiles, ya anuncié que pronto se publicaría un informe sobre los mejores fragmentos de WooCommerce. Et voilà, aquí están mis mejores fragmentos de WooCommerce.
Ya conocerá algunos de estos fragmentos, pero estoy seguro de que también podré mostrarles algo nuevo. Por eso, he resumido las mejores piezas en un solo post.
Compatibilidad:
- WordPress desde la versión 4.6
- WooCommerce desde la versión 3.xx
- PHP-Versión 7.xx
Puede copiar los fragmentos en la carpeta de su tema activo. functions.phpo configura un complemento específico de la página para la tarea.
Por favor, hazlo no copia la apertura <?php.
[blue-box text=” Please keep in mind: Create a file backup before each change made to the functions.php. Don’t use the WordPress editor to alter the file. If something goes wrong, you’ll lose access to your website. Make your changes directly on your web hosting, via an FTP access.”]
1 – Proporcionar soporte de WooCommerce para su tema
Si su tema activo no está preparado para usarlo con WooCommerce, debe comenzar por ahí y brindar soporte. Esa es la única forma de asegurarse de que su nueva tienda se muestre de manera óptima. Este proceso consta de tres partes.
Parte uno: Primero, declare el soporte para su tema y agregue una caja de luz de producto si lo desea.
<?php
/**
* Theme Support for WooCommerce
*/
add_theme_support( 'woocommerce' );
/**
* Add Theme Support for WooCommerce Gallery Lightbox
*/
add_theme_support( 'wc-product-gallery-lightbox' );La segunda parte: Elimine los DIV de contenedor de apertura y cierre de WooCommerce de las plantillas del complemento.
<?php
//remove function attached to woocommerce_before_main_content hook
remove_action( 'woocommerce_before_main_content', 'woocommerce_output_content_wrapper', 10 );
//remove function attached to woocommerce_after_main_content hook
remove_action( 'woocommerce_after_main_content', 'woocommerce_output_content_wrapper_end', 10 );Parte tres: Reemplace los DIV con los que usa su tema. Para hacerlo, debe averiguar los nombres de los DIV contenedores de su tema. Un clic derecho en su sitio web y «Inspeccionar» puede ayudarlo con eso.
Encuentre sus contenedores de contenido. Aquí están resaltados.
Luego, agregue estos contenedores al siguiente código:
<?php
if ( ! function_exists( 'evolution_wrapper_start' ) ) :
/**
* Adding theme's starter container for WooCommerce support
*/
function evolution_wrapper_start() {
echo '<div id="primary" class="content-area"><main id="main" class="site-main" role="main">';
}
add_action( 'woocommerce_before_main_content', 'evolution_wrapper_start', 10 );
endif;
if ( ! function_exists( 'evolution_wrapper_end' ) ) :
/**
* Adding theme's ending container for WooCommerce support
*/
function evolution_wrapper_end() {
echo '</div></main>';
}
add_action( 'woocommerce_after_main_content', 'evolution_wrapper_end', 10 );
endif;Ahora, su tienda debería mostrarse tan bien como el resto de su tema.
2 – Reemplazo de las migas de pan de WooCommerce por las de Yoast SEO
Una tonelada de fanáticos de WordPress usa la navegación de ruta de navegación del popular complemento Yoast SEO. También puede usarlo en las páginas de WooCommerce. Este fragmento hace el truco:
<?php
if ( ! function_exists( 'evolution_replace_breadcrumbs' ) ) :
/**
* Replace WooCommerce Breadcrumbs with Yoast breadcrumbs
*/
function evolution_replace_breadcrumbs() {
remove_action( 'woocommerce_before_main_content', 'woocommerce_breadcrumb', 20, 0);
function evolution_yoast_breadcrumb() {
if ( function_exists('yoast_breadcrumb') ) {
yoast_breadcrumb('<nav class="woocommerce-breadcrumb">','</nav>');
}
}
}
add_action( 'init', 'evolution_replace_breadcrumbs' );
endif;3 – Cambiar la cantidad de productos mostrados seguidos
De forma predeterminada, WooCommerce muestra cuatro productos seguidos. Cambiar esto es muy simple.
<?php
/**
* Change number of products per row to 3
*/
if (!function_exists('evolution_loop_columns') ) {
function evolution_loop_columns() {
return 3; // 3 Products in a row
}
}
add_filter('loop_shop_columns', 'evolution_loop_columns');4 – Cambiar el número de productos relacionados
Puedes elegir cuántos productos relacionados muestra tu tema. A veces, esto puede resultar útil.
<?php
/**
* WooCommerce Extra Feature
* --------------------------
*
* Change number of related products on product page
* Set your own value for 'posts_per_page'
*
*/
if (!function_exists('evolution_related_products_args') ) {
function evolution_related_products_args( $args ) {
$args['posts_per_page'] = 4; // 4 related products
$args['columns'] = 4; // All four in a row
return $args;
}
}
add_filter( 'woocommerce_output_related_products_args', 'evolution_related_products_args' );5 – Definir cuántos productos se muestran en una página
Si tiene muchos o muy pocos productos en su tienda, podría tener sentido editar la cantidad de productos por página.
<?php
/**
* Custom Product Cols
* @return 12 Products per Page
*/
if (!function_exists('evolution_loop_shop_per_page') ) {
function evolution_loop_shop_per_page( $cols ) {
$cols = 12;
return $cols;
}
}
add_filter( 'loop_shop_per_page', 'evolution_loop_shop_per_page', 20 );6 – Ocultar otras tarifas de envío cuando el envío está etiquetado como gratuito
¿Ofrecen envío gratuito de productos? Entonces debe usar este código, ya que WooCommerce generalmente muestra todas las opciones de envío en el área de pago.
<?php
/**
* Hide shipping rates when free shipping is available.
* Updated to support WooCommerce 2.6 Shipping Zones.
*
* @param array $rates Array of rates found for the package.
* @return array
*/
if (!function_exists('evolution_hide_shipping_when_free_is_available') ) {
function evolution_hide_shipping_when_free_is_available( $rates ) {
$free = array();
foreach ( $rates as $rate_id => $rate ) {
if ( 'free_shipping' === $rate->method_id ) {
$free[ $rate_id ] = $rate;
break;
}
}
return ! empty( $free ) ? $free : $rates;
}
}
add_filter( 'woocommerce_package_rates', 'evolution_hide_shipping_when_free_is_available', 100 );7 – Carga de archivos CSS y JavaScript de WooCommerce solo en las páginas de la tienda
WooCommerce carga sus archivos en cada página de su sitio web, incluida la página de inicio y los artículos. En primer lugar, esto no tiene sentido y, en segundo lugar, ralentiza su sitio. Por lo tanto, debe utilizar este fragmento. Con este, los archivos de WooCommerce solo se cargan donde se necesitan.
<?php
if (!function_exists( 'evolution_manage_woocommerce_styles' ) ) :
/**
* Optimize WooCommerce Scripts
* Removes WooCommerce styles and scripts from non WooCommerce pages.
*/
function evolution_manage_woocommerce_styles() {
//first check that woo exists to prevent fatal errors
if ( function_exists( 'is_woocommerce' ) ) {
//dequeue scripts and styles
if ( ! is_woocommerce() && ! is_cart() && ! is_checkout() && ! is_account_page() ) {
wp_dequeue_style( 'woocommerce-layout' );
wp_dequeue_style( 'woocommerce-smallscreen' );
wp_dequeue_style( 'woocommerce-general' );
wp_dequeue_style( 'evolution-woostyles' );
wp_dequeue_script( 'wc_price_slider' );
wp_dequeue_script( 'wc-single-product' );
wp_dequeue_script( 'wc-add-to-cart' );
wp_dequeue_script( 'wc-cart-fragments' );
wp_dequeue_script( 'wc-checkout' );
wp_dequeue_script( 'wc-add-to-cart-variation' );
wp_dequeue_script( 'wc-single-product' );
wp_dequeue_script( 'wc-cart' );
wp_dequeue_script( 'wc-chosen' );
wp_dequeue_script( 'woocommerce' );
wp_dequeue_script( 'prettyPhoto' );
wp_dequeue_script( 'prettyPhoto-init' );
wp_dequeue_script( 'jquery-blockui' );
wp_dequeue_script( 'jquery-placeholder' );
wp_dequeue_script( 'fancybox' );
wp_dequeue_script( 'jqueryui' );
}
}
}
add_action( 'wp_enqueue_scripts', 'evolution_manage_woocommerce_styles', 99 );
endif;8 – Use una barra lateral única en las páginas de la tienda
Aproximadamente el 95% de todos los desarrolladores no saben cómo resolver esto sin sobrescribir las plantillas de WooCommerce. En Internet, tampoco encontrará una solución, ya que la mayoría de los resultados también sugerirán sobrescribir las plantillas.
Así que hoy aprenderás un secreto de mí 🙂 A partir de ahora, resolverás el problema como un Jedi y no como un Padawan.
Primera parte: cree una nueva barra lateral para las páginas de WooCommerce
<?php
if (!function_exists( 'evolution_woo_sidebar_init' ) ) :
/**
* Registering a new sidebar exclusively for the shop pages
*/
function evolution_woo_sidebar_init() {
register_sidebar( array(
'name' => esc_html__( 'WooCommerce Sidebar', 'evolution' ),
'id' => 'woocommerce',
'description' => esc_html__( 'This is the sidebar for your WooCommerce Shop.', 'evolution' ),
'before_widget' => '<aside id="%1$s" class="widget %2$s">',
'after_widget' => '</aside>',
'before_title' => '<h4 class="widget-title">',
'after_title' => '</h4>',
) );
}
add_action( 'widgets_init', 'evolution_woo_sidebar_init' );
endif;Segunda parte: cree un archivo de barra lateral de WooCommerce
Para que la nueva barra lateral sea utilizable, necesitamos un nuevo archivo de tema. Crea un archivo vacío llamado sidebar-woocommerce.php. Para hacerlo, utilice un editor de HTML.
Tome los contenedores HTML de su sidebar.php. Ahora, agregue el siguiente código al archivo y cárguelo en su tema o carpeta de tema secundario a través de (S) FTP.
<?php
/**
* The sidebar containing the woocommerce widget area.
*
* @package Evolution Framework
*/
if ( ! is_active_sidebar( 'woocommerce' ) ) {
return;
}
?>
<?php // Important: Copy the HTML containers from your sidebar.php ?>
<div id="secondary" class="sidebar-area" role="complementary">
<div class="normal-sidebar widget-area">
<?php if ( is_active_sidebar( 'woocommerce' ) ) : ?>
<?php dynamic_sidebar( 'woocommerce' ); ?>
<?php endif; ?>
</div><!-- .normal-sidebar -->
</div><!-- #secondary -->Parte 3: intercambiar las barras laterales en las páginas de la tienda
La función original del marco WooCommerce permite el intercambio de las dos barras laterales. Todas estas funciones son «conectables». Esto significa que son fácil de sobrescribir.
Una función regrabable se ve así:
<?php
if (!function_exists( 'a_great_function' ) ) :
/**
* Making a function rewritable
*/
function a_great_function() {
}
add_action( 'great_function', 'a_great_function' );
endif;El if (!function_exists( 'a_great_function' ) ) : significa que la función solo se ejecuta si no hay otra función con dicho nombre. Sin embargo, si hay una función con este nombre, la función es no ejecutado. Es por eso que estas funciones son tan fáciles de reescribir. Y haremos precisamente eso.
Intercambio de la barra lateral: el fragmento
Los siguientes fragmentos hacen que la barra lateral de WooCommerce se muestre en las páginas de su tienda, en lugar de la barra lateral normal.
<?php
/**
* Get the spezial sidebar for the WooCommerce Templates
* DO NOT CHANGE THIS FUNCTION, or the WooCommerce Sidebar will not work.
*
* @overrides the woocommerce function
*
* @hooked woocommerce_sidebar()
*/
function woocommerce_get_sidebar() {
get_template_part( 'sidebar-woocommerce' );
}Ahora, en todas las páginas de la tienda, en lugar de en tu sidebar.php, el archivo sidebar-woocommerce.php se accede, y puede llenar ambas barras laterales con contenido diferente.
9 – Pago de WooCommerce: convierta el número de teléfono en información voluntaria
Es obligatorio ingresar su número de teléfono al finalizar la compra. Estoy seguro de que a varios clientes potenciales no les gusta eso. El siguiente fragmento hace que sea una opción voluntaria ingresar el número.
<?php
if (!function_exists( 'evolution_phone_no_pflicht' ) ) :
/**
* Make the phone number an optional entry
*
* @hooked woocommerce_billing_fields()
*
* @return filter
*/
function evolution_phone_no_pflicht( $address_fields ) {
$address_fields['billing_phone']['required'] = false;
return $address_fields;
}
add_filter( 'woocommerce_billing_fields', 'evolution_phone_no_pflicht', 10, 1 );
endif;10 – Visualización de ahorros porcentuales para ofertas
Aumente los incentivos psicológicos de compra mostrando los ahorros potenciales de sus ofertas en porcentaje.
<?php
if ( !function_exists( 'evolution_custom_sales_price' ) ) :
/**
* Show percent savings on sale - Only for WooCommerce version 3.0+
*
* @add filter to products
*
* @return filter
*/
function evolution_custom_sales_price( $price, $regular_price, $sale_price ) {
$percentage = round( ( $regular_price - $sale_price ) / $regular_price * 100 ).'%';
$percentage_txt = __(' Spare ', 'evolution' ).$percentage;
$price="<del>" . ( is_numeric( $regular_price ) ? wc_price( $regular_price ) : $regular_price ) . '</del> <ins>' . ( is_numeric( $sale_price ) ? wc_price( $sale_price ) . $percentage_txt : $sale_price . $percentage_txt ) . '</ins>';
return $price;
}
add_filter( 'woocommerce_format_sale_price', 'evolution_custom_sales_price', 10, 3 );
endif;11 – Agregue sus botones para compartir a la página del producto
Para aumentar el alcance de su tienda, los usuarios deben poder compartir cada producto en las redes sociales. Por lo tanto, tiene mucho sentido mostrar sus botones para compartir en las páginas de productos. Para hacerlo, se requiere el código abreviado para la integración manual en un tema.
Se puede encontrar en la documentación de su tema de WordPress. Estoy usando el Botones de compartir de Shariff para mi integración.
<?php
if (!function_exists( 'evolution_share_for_woocommerce' ) ) :
/**
* Implementing share buttons on the page of an individual product
*
* @hooked woocommerce_share()
*/
function evolution_share_for_woocommerce() {
echo do_shortcode( '[[shariff]]' );
}
add_action( 'woocommerce_share', 'evolution_share_for_woocommerce', 5 );
endif;El resultado:
12 – Eliminación de pestañas de productos de la vista de productos
Las pestañas se pueden quitar una por una o todas a la vez, lo que a veces puede ser ventajoso.
<?php
if (!function_exists( 'evolution_remove_product_tabs' ) ) :
/**
* Removing the product tabs of the description
*
* @hooked woocommerce_product_tabs()
*/
function evolution_remove_product_tabs( $tabs ) {
unset( $tabs['description'] ); // Remove the description tab
unset( $tabs['reviews'] ); // Remove the reviews tab
unset( $tabs['additional_information'] ); // Remove the additional information tab
return $tabs;
}
add_filter( 'woocommerce_product_tabs', 'evolution_remove_product_tabs', 98 );
endif;13 – Actualización del carrito en vivo a través de Ajax
No es necesario que actualice el carrito de compras para mantenerlo actualizado. Ajax «Live» es una forma mucho mejor de hacerlo.
<?php
if (!function_exists( 'evolution_header_add_to_cart_fragment' ) ) :
/**
* Ensure cart contents update when products are added to the cart via AJAX
*
* @add_filter woocommerce_add_to_cart_fragments
*/
function evolution_header_add_to_cart_fragment( $fragments ) {
ob_start();
?>
<a class="cart-contents" href="https://www.noupe.com/wordpress/<?php echo WC()->cart->get_cart_url(); ?>" title="<?php _e( 'View your shopping cart' ); ?>"><?php echo sprintf (_n( '%d item', '%d items', WC()->cart->get_cart_contents_count() ), WC()->cart->get_cart_contents_count() ); ?> - <?php echo WC()->cart->get_cart_total(); ?></a>
<?php
$fragments['a.cart-contents'] = ob_get_clean();
return $fragments;
}
add_filter( 'woocommerce_add_to_cart_fragments', 'evolution_header_add_to_cart_fragment' );
endif;14 – Visualización de un enlace a la cuenta de usuario en el tema
Si el usuario no ha iniciado sesión, el enlace muestra «Iniciar sesión / Registrarse» y utiliza la página de inicio de sesión. Si el usuario ha iniciado sesión, el enlace dice «Mi cuenta» y lo lleva directamente a su cuenta de usuario.
<?php if ( is_user_logged_in() ) { ?>
<a href="https://www.noupe.com/wordpress/<?php echo get_permalink( get_option("woocommerce_myaccount_page_id') ); ?>" title="<?php _e('Mein Account','evolution'); ?>"><?php _e('My Account','woothemes'); ?></a>
<?php }
else { ?>
<a href="https://www.noupe.com/wordpress/<?php echo get_permalink( get_option("woocommerce_myaccount_page_id') ); ?>" title="<?php _e('Login / Register','evolution'); ?>"><?php _e('Login / Register','woothemes'); ?></a>
<?php } ?>15 – Agregar el método de pago del cliente al correo electrónico del administrador
Después de cada pedido, recibe un correo electrónico de WooCommerce. Con este fragmento, puede agregar el método de pago que elija el cliente al correo electrónico.
if (!function_exists( 'evolution_add_payment_method_to_admin_new_order' ) ) :
/**
* Adding the customer's payment method to the admin email
*
* @hooked woocommerce_email_after_order_table()
*/
function evolution_add_payment_method_to_admin_new_order( $order, $is_admin_email ) {
if ( $is_admin_email ) {
echo '<p><strong>Zahlungsart:</strong> ' . $order->payment_method_title . '</p>';
}
}
add_action( 'woocommerce_email_after_order_table', 'evolution_add_payment_method_to_admin_new_order', 15, 2 );
endif;16 – Cambiar el orden de los campos en el área de pago
Con este fragmento, puede ajustar el área de pago de WooCommerce. Puede editar el orden de los campos en el área de pago o incluso eliminarlos.
<?php
if (!function_exists( 'evolution_reorder_woo_fields' ) ) :
/**
* Alter the order of fields in the checkout area, or remove them completely.
*
* @add_filter woocommerce_checkout_fields
*/
function evolution_reorder_woo_fields( $fields ) {
//move these around in the order you'd like
$fields2['billing']['billing_first_name'] = $fields['billing']['billing_first_name'];
$fields2['billing']['billing_last_name'] = $fields['billing']['billing_last_name'];
$fields2['billing']['billing_company'] = $fields['billing']['billing_company'];
$fields2['billing']['billing_address_1'] = $fields['billing']['billing_address_1'];
$fields2['billing']['billing_address_2'] = $fields['billing']['billing_address_2'];
$fields2['billing']['billing_city'] = $fields['billing']['billing_city'];
$fields2['billing']['billing_postcode'] = $fields['billing']['billing_postcode'];
$fields2['billing']['billing_state'] = $fields['billing']['billing_state'];
$fields2['billing']['billing_country'] = $fields['billing']['billing_country'];
$fields2['billing']['billing_email'] = $fields['billing']['billing_email'];
$fields2['billing']['billing_phone'] = $fields['billing']['billing_phone'];
//just copying these (keeps the standard order)
$fields2['shipping'] = $fields['shipping'];
$fields2['account'] = $fields['account'];
$fields2['order'] = $fields['order'];
return $fields2;
}
add_filter( 'woocommerce_checkout_fields', 'evolution_reorder_woo_fields' );
endif;#Los #fragmentos #WooCommerce #más #útiles #funcionales
