tutoriales para woocommerce 2022

Trucos y snippets para Woocommerce

Facebook
LinkedIn
WhatsApp
Twitter

¿Quieres crear una llamada a la acción en forma de popups y no sabes como hacerlo. Hoy te explicamos Cómo hacer popups en WordPress con Elementor.

Índice de contenidos

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>
';
}
				
			

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;
}
				
			

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;
}
				
			

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>
				
			

¿Tienes interés en que creemos un tutorial sobre algún tema específico de Elementor? Dejalo en comentarios, prometemos responderte.

Compártenos en tu red social favorita
Facebook
LinkedIn
WhatsApp
Twitter
Ir arriba