En este artículo encontraras una serie de códigos, trucos y snippets para agregar funcionalidades a tu Woocommerce sin necesidad de ningún plugin.
Convierte tu woocommerce en un catálogo
Para empezar borra las páginas de Tu cuenta, carrito y finalizar compra, ya que al pasar a catálogo no las vas a necesitar ya que no se realizan compras online. Lo siguente, pega el código CSS en apariencia/personalizar/ CSS adicional.
.add_to_cart_button{
display:none!important;
}
.cart{
display:none!important;
}
.woocommerce-tabs{
display:none!important;
}
Mostrar las unidades vendidas en la página del producto
Crea un child theme y plega el siguiente código PHP en el archivo functions. Si tienes conocimientos de CSS puedes personalizar el texto definidiendo los atributos a la clase unidades.Luego sigue los pasos que encontrarás en el video.
add_action( 'woocommerce_single_product_summary', 'unidades_vendidas_woocommerce', 20 );
function unidades_vendidas_woocommerce() {
global $product;
$units_sold = get_post_meta( $product->id, 'total_sales', true );
echo '
<p class="unidades">' . '<i class="fa fa-cart-plus" aria-hidden="true"></i>' . sprintf( __( 'Unidades Vendidas: %s', 'woocommerce' ), $units_sold ) . '</p>
';
}
Cómo mostrar tus productos más vendidos en Woocommerce
Instala code snippets y añade el siguiente código en un nuevo snippets. Después ves a apariencia/personalizar/css adiccional y añade el CSS para que el diseño sea responsive y se adapte a todos los dispositivos.
add_action('woocommerce_after_cart_table', 'mostrar_productos_mas_vendidos');
function mostrar_productos_mas_vendidos() {
$args = array(
'post_type' => 'product',
'posts_per_page' => 4,
'meta_key' => 'total_sales',
'orderby' => 'meta_value_num',
'order' => 'DESC',
);
$productos_mas_vendidos = new WP_Query($args);
if ($productos_mas_vendidos->have_posts()) {
echo '<div class="masvendidos"><h2>Productos más vendidos</h2></div>';
echo '<div class="productos-mas-vendidos">';
while ($productos_mas_vendidos->have_posts()) {
$productos_mas_vendidos->the_post();
global $product;
$image = $product->get_image();
$title = $product->get_title();
$price = $product->get_price_html();
$total_sales = $product->get_total_sales();
?>
<div class="producto-mas-vendido">
<?php echo $image; ?>
<h3><?php echo $title; ?></h3>
<span><?php echo $price; ?></span>
<p><?php echo sprintf(__('Unidades vendidas: %s', 'woocommerce'), $total_sales); ?></p>
<?php woocommerce_template_loop_add_to_cart(); ?>
</div>
<?php
}
echo '</div>';
}
wp_reset_postdata();
}
.productos-mas-vendidos {
display: flex;
flex-wrap: wrap;
}
.producto-mas-vendido {
width: 25%;
padding: 10px;
box-sizing: border-box;
}
@media only screen and (max-width: 768px) {
.producto-mas-vendido {
width: 50%;
}
}
@media only screen and (max-width: 480px) {
.producto-mas-vendido {
width: 100%;
}
}
Botón para repetir pedido en woocommerce
Instala code snippets y añade el siguiente código en un nuevo snippets. Después ves a apariencia/personalizar/css adiccional y añade el CSS para separar los botones.
// Agregar botón "Repetir Pedido" en la tabla de pedidos en Mi Cuenta
add_action( 'woocommerce_my_account_my_orders_actions', 'repetir_pedido_button', 10, 2 );
function repetir_pedido_button( $actions, $order ) {
$actions['repetir_pedido'] = array(
'url' => wp_nonce_url( add_query_arg( 'order_id', $order->get_id(), site_url( '/repetir-pedido' ) ), 'repetir_pedido_action', 'repetir_pedido_nonce' ),
'name' => __('Repetir Pedido', 'woocommerce')
);
return $actions;
}
// Procesar la repetición del pedido cuando se hace clic en el botón
add_action( 'init', 'process_repetir_pedido' );
function process_repetir_pedido() {
if( isset( $_GET['repetir_pedido_nonce'] ) && wp_verify_nonce( $_GET['repetir_pedido_nonce'], 'repetir_pedido_action' ) ) {
$order_id = isset( $_GET['order_id'] ) ? absint( $_GET['order_id'] ) : 0;
if( $order_id > 0 ) {
$order = wc_get_order( $order_id );
if( $order ) {
// Vaciar el carrito actual
WC()->cart->empty_cart();
// Repetir el pedido
foreach( $order->get_items() as $item ) {
$product_id = $item->get_product_id();
$quantity = $item->get_quantity();
WC()->cart->add_to_cart( $product_id, $quantity );
}
// Redirigir al carrito
wp_redirect( wc_get_cart_url() );
exit;
}
}
}
}
.woocommerce-button{
margin-right:3px;
}
Redirigir a la página de pago después de agregar al carrito
Crea un child theme y plega el siguiente código PHP en el archivo functions. Luego sigue los pasos que encontrarás en el video.
// redirigir al pago despues de agregar al carrito en las paginas de productos
add_filter('add_to_cart_redirect', 'lw_add_to_cart_redirect');
function lw_add_to_cart_redirect() {
global $woocommerce;
$lw_redirect_checkout = $woocommerce->cart->get_checkout_url();
return $lw_redirect_checkout;
}
Añadir monedas personalizadas a woocommerce
Pega el siguiente código en el functions.php de tu child theme o utiliza algún plugin como code snippets o wp code. Después modifica la línea 3 para poner el nombre de tu moneda y la línea 9 para poner el símbolo de tu moneda. Guarda los cambios y ya tienes añadida tu moneda personalizada en tu Woocommerce.
add_filter( 'woocommerce_currencies', 'add_custom_currency' );
function add_custom_currency( $wc_currency ) {
$wc_currency['WCBLOGS'] = __( 'Nombre de mi moneda personalizada', 'woocommerce' );
return $wc_currency;
}
add_filter('woocommerce_currency_symbol', 'add_custom_currency_symbol', 10, 2);
function add_custom_currency_symbol( $custom_currency_symbol, $custom_currency ) {
switch( $custom_currency ) {
case 'WCBLOGS': $custom_currency_symbol = 'Simbolo de mi moneda personalizada'; break;
}
return $custom_currency_symbol;
}
Añadir la fecha de recibo de un pedido
Prímero crearemos el diseño de la plantilla del producto de Woocommerce con el maquetador que utilicemos habitualmente y dentro del diseño añadiremos el siguiente shortcodes :[estimated_delivery_date]
Después utilizando un child theme o el plugin code snippets insertaremos el siguiente código personalizado teniendo en cuenta que modificaremos el día de la entrega en la linea 3 y el texto anterior a la entrega en linea 8.
// Función para calcular la fecha de entrega estimada (3 días después) y formatearla
function get_estimated_delivery_date() {
$delivery_date = date('Y-m-d', strtotime('+5 days'));
return date_i18n('j F Y', strtotime($delivery_date));
}
// Shortcode para mostrar la fecha de entrega estimada
function display_estimated_delivery_date_shortcode() {
return "Compralo hoy y recíbelo el " . get_estimated_delivery_date();
}
// Registra el shortcode
add_shortcode('estimated_delivery_date', 'display_estimated_delivery_date_shortcode');
Insertar producto individual de Woocommerce en página
Utiliza el shortcodes en la página donde quieras insertar el producto y modifica la ID. Si quieres ocultar las valoraciones y los artículos relacionados pega los CSS en apariencia/personalizar/ CSS adicional.
[product_page_id="id de pagina"]
.page_id_2 .wc-tabs-wrapper{
display:none!important
}
.page_id_2 .related{
display:none!important
}
Información personalizada para el correo de pedido completado
Para añadir información personalizada para el correo de pedido completado en tu Woocommerce, crea un child theme, si no sabes cómo crearlo haz click aquí.
Activa el child theme y pega el siguiente código en el archivo functions.php.
add_action( 'woocommerce_email_order_details', 'wc_add_additional_content_before_order_details', 5, 4 );
function wc_add_additional_content_before_order_details( $order, $sent_to_admin, $plain_text, $email ) {
if ( 'customer_completed_order' === $email->id ) {
echo '<h2>'. __( '¡Gracias por apuntarte al taller!', 'codewp' ) .'</h2>';
echo '<p>'. __( 'Te recuerdo que el taller tendrá lugar el sábado 16 de diciembre a las 11 h de la mañana (hora española) y que el lunes siguiente, enviaremos la grabación y un dosier con ejercicios prácticos.', 'codewp' ) .'</p>';
}
}
Imágenes de los productos en la página del checkout
Para mostrar las imágenes de los productos en la página del checkout de tu Woocommerce, crea un child theme, si no sabes cómo crearlo haz click aquí.
Activa el child theme y pega el siguiente código en el archivo functions.php.
add_filter( 'woocommerce_cart_item_name', 'byteweb_product_image_review_order_checkout', 9999, 3 );
function byteweb_product_image_review_order_checkout( $name, $cart_item, $cart_item_key ) {
if ( ! is_checkout() ) return $name;
$product = $cart_item['data'];
$thumbnail = $product->get_image( array( '50', '50' ), array( 'class' => 'alignleft' ) );
return $thumbnail . $name;
}
mostrar el número de unidades vendidas de un producto
Cómo siempre, insertaremos esta función de PHP el el functions.php de nuestro child theme. Después modifica el texto de la etiqueta p que tienes en la fila 20.
Si tienes conocimientos de CSS y quieres personalizarlo tienes definida la clase unidadesvendidas.
function mostrar_numero_total_unidades_vendidas() {
global $product;
if ($product) {
$product_id = $product->get_id();
$unidades_vendidas = 0;
$orders = wc_get_orders(array(
'status' => array('completed'),
'limit' => -1,
));
foreach ($orders as $order) {
$order_items = $order->get_items();
foreach ($order_items as $item) {
if ($item->get_product_id() === $product_id) {
$unidades_vendidas += $item->get_quantity();
}
}
}
if ($unidades_vendidas > 0) {
echo '<p class="unidadesvendidas">Este producto se ha vendido ' . $unidades_vendidas . ' veces</p>';
}
}
}
add_action('woocommerce_before_add_to_cart_quantity', 'mostrar_numero_total_unidades_vendidas', 25);
Mostrar el ahorro de un producto rebajado
Cómo siempre, insertaremos esta función de PHP el el functions.php de nuestro child theme. Revisa el video si lo vas ha hacer con Elementor ya que no todo el código es necesario.
function mostrar_ahorro_producto_shortcode() {
$product = wc_get_product( get_the_ID() );
$regular_price = $product->get_regular_price();
$sale_price = $product->get_sale_price();
if ( $sale_price && $regular_price > $sale_price ) {
$discount = $regular_price - $sale_price;
return '<p><strong>Ahorro: ' . wc_price( $discount ) . ' Euros</strong></p>';
}
}
add_shortcode( 'mostrar_ahorro_producto', 'mostrar_ahorro_producto_shortcode' );
function pintar_shortcodes(){
echo do_shortcode('[mostrar_ahorro_producto]');
}
add_action ('woocommerce_before_add_to_cart_form','pintar_shortcodes');
Mensaje de comprar ahora y recibelo mañana en los productos
Igual que hemos explicado en el anterior truco necesitaremos de un child theme para no perder la personalización al actualizar Woocommerce.
Repetiremos la operación y pegaremos el siguiente código en el archivo functions.php. Lo siguiente será personalizar el texto de nuestro mensaje
add_action( 'woocommerce_single_product_summary', 'byteweb_display_pressure_badge', 6 );
function byteweb_display_pressure_badge() {
echo '<div class="woocommerce-message">Compralo antes de las 18.00 y recibelo mañana!</div>';
}
Estrellas duplicadas en la valoraciones de producto
Simplemente pega este código css en apariencia/personalizar/css adicional. Revisa el video.
/* borrar la segunda fila de estrellas de la valoracion de los productos
*/
p.stars:nth-child(2) {
display: none;
}
Vende contenido de tu web con woocommerce
Crea un child theme y plega el siguiente código PHP en el archivo functions. Luego sigue los pasos que encontrarás en el video.
function sww_add_note_woocommerce_emails( $output, $order ) {
// set a flag so we don't recursively call this filter
static $run = 0;
// if we've already run this filter, bail out
if ( $run ) {
return $output;
}
$args = array(
'show_purchase_note' => true,
);
// increment our flag so we don't run again
$run++;
// if first run, give WooComm our updated table
return wc_get_email_order_items( $order, $args );
}
add_filter( 'wc_get_email_order_items', 'sww_add_note_woocommerce_emails', 10, 2 );
Insertar videos en los productos de woocommerce
Para insertar en los productos de woocommerce un video de Youtube crearemos un child theme y pegaremos el siguiente código en el archivo fuctions.php. Dentro del código modificaremos el shortcodes por el que hemos creado y modificaremos el hook donde queramos que aparezca. Para ver una lista de los hooks de woocommerce clica aquí.
function insertar_videos()
{echo do_shortcode( '' );}
add_action ('woocommerce_before_add_to_cart_form','insertar_videos');
Si lo que queremos es insertar un video que tenemos en nuestro servidor modificaremos el iframe por las siguiente líneas de código insertando en la etiqueta source la url de nuestro video cerrando y abriendo PHP.
<video width="320" height="240" controls>
<source src="url del video" type="video/mp4">
</video>
