¿Cómo vender entradas con Woocommerce?

En este tutorial, le mostraré cómo configurar un sistema de venta de entradas gratuito con Woocommerce. Es bastante fácil y probablemente te llevará de 10 a 15 minutos. Eche un vistazo a la captura de pantalla a continuación para comprender mejor lo que vamos a hacer. Entonces, vamos a sumergirnos.

este es el resultado final

Configure un producto virtual para su visita

Preste atención a que debe configurarse como «producto virtual»; de lo contrario, la página de pago de Woocommerce le pedirá que configure los métodos de envío. Así que asegúrese de seleccionar «Virtual» en las opciones del producto.

A continuación, puede configurar productos individuales o variables. En este ejemplo, estoy configurando un producto variable y lo llamaré «Tour de esquí». Tiene dos atributos:

  • Tengo mis propios esquís (125 €)
  • Alquilaré esquís (155 €)

Activar la gestión de inventario a nivel de producto

Como solo ofrezco 10 lugares para esta visita, tengo que activar la gestión de inventario y como estoy usando productos variables, activo la gestión de inventario a nivel de producto. Esto asegurará que para ambas variantes juntas solo habrá 10 boletos disponibles.

[enlazatom_show_links]

Nada más que descripciones e imágenes de la galería para agregar y guardar y no, básicamente estás listo para comenzar.

Agregue un campo de texto personalizado a los productos Woocommerce

Quiero que mis recorridos muestren la fecha del evento en páginas de archivo y páginas de productos únicos. Por lo tanto, crearé un campo personalizado que puedo completar al configurar un producto. Por lo tanto, agregaré este pequeño fragmento de código usando el complemento Code Snippets o en el archivo functions.php de su tema hijo. Te sugiero que uses el Fragmentos de código plugin aunque.

// Show custom field in single product editing page
add_action( 'woocommerce_product_options_general_product_data', 'woo_add_custom_general_fields' );

// Save custom field values
add_action( 'woocommerce_process_product_meta', 'woo_add_custom_general_fields_save' );

function woo_add_custom_general_fields() {
  global $woocommerce, $post;
  echo '<div class="options_group">';
	
// Add text field inside single product editing tab
woocommerce_wp_text_input(
	array(
		'id'          => '_text_field',
		'label'       => __( 'Tour date', 'woocommerce' ),
		'placeholder' => 'Enter relevant dates',
		'desc_tip'    => 'true',
		'description' => __( 'For example 12.02.2022', 'woocommerce' )
	)
);

  echo '</div>';
}
// Save from admin side
function woo_add_custom_general_fields_save( $post_id ){

// Show it on the single product

	$woocommerce_text_field = $_POST['_text_field'];
	if( !empty($woocommerce_text_field ) ){
		update_post_meta( $post_id, '_text_field', esc_attr( $woocommerce_text_field ) );
	} else {
	  $woocommerce_text_field = null;
		update_post_meta( $post_id, '_text_field', esc_attr( $woocommerce_text_field ) ); 
	}
}
// Show the value in frontend single product page
add_action( 'woocommerce_single_product_summary', 'display_custom_field_value', 1 );
function display_custom_field_value(){
  $textfield=get_post_meta( get_the_ID(), '_text_field', true );
  if(!empty($textfield)){
    echo '<div class="woocommerce-message">'.$textfield.'</div>';
  }
}
// Show the value on archive pages
add_action( 'woocommerce_after_shop_loop_item', 'display_custom_field_value1', 1 );
function display_custom_field_value1(){
  $textfield=get_post_meta( get_the_ID(), '_text_field', true );
  if(!empty($textfield)){
    echo '<div class="customfield">'.$textfield.'</div>';
  }
}

Esto creará un cuadro de texto personalizado en la página de su producto. Vea la captura de pantalla.

Si completa el cuadro de texto, el valor aparecerá en la página de archivo y en la página de un solo producto. Ahora personalizaré el aspecto del cuadro de texto de la página de archivo con este CSS a continuación. Agréguelo al Personalizador >> CSS adicional.

Sin embargo, tenga cuidado de que probablemente necesite personalizar este código CSS para que se adapte a su tema.

.woocommerce ul.products li.product .customfield {
display: inline-flex ;
    align-items: center;
    justify-content: center;
    height: 30px;
    font-size: 13px;
    font-weight: 600;
    line-height: 0;
    text-transform: uppercase;
    color: #000;
    background-color: #ffcc00
}

Cambiar Woocommerce XX en texto de stock

Dado que Woocommerce muestra «10 en stock» en lugar de «Total de entradas disponibles», necesito cambiarlo un poco. Por lo tanto, cree un nuevo fragmento de código y agregue este pequeño fragmento a continuación.

// Change XX in stock text
add_filter( 'woocommerce_get_availability_text', 'quantity_text', 99, 2 );
  
function quantity_text( $availability, $product ) {
   $stock = $product->get_stock_quantity();
   if ( $product->is_in_stock() && $product->managing_stock() ) $availability = '<strong>Total tickets available:</strong> ' . $stock;
   return $availability;
}

Esto reemplazará el texto de Woocommerce «10 en stock» con el texto «Total de entradas disponibles».

Modificar el texto «Agotado» de Woocommerce

Lo siguiente con lo que tengo que lidiar es con el texto agotado de Woocommerce. En su lugar, quiero mostrar el texto «agotado». Entonces, agregaré otro fragmento de código.

// Change out of stock text
add_filter('gettext', 'translate_strings');
add_filter('ngettext', 'translate_strings');
function translate_strings($translated) {
$translated = str_ireplace('Out of stock', 'Sold out', $translated);
return $translated;
}

Agregue el texto «Seleccione el número de boletos» encima del selector de cantidad

Eche un vistazo a la captura de pantalla aquí y vea el texto sobre el campo Cantidad. El siguiente fragmento de código lo hará posible.

add_action( 'woocommerce_before_add_to_cart_quantity', 'toote_teade222' );
function toote_teade222() {
echo 'Select the number of tickets';
}

Agregue el cálculo del precio total a la página de su producto WooCommerce

¿Notó el «Precio total: 125 €» en la captura de pantalla de arriba? Esto calculará el subtotal sobre el aumento en la cantidad y, para agregarlo, agregue este fragmento de código a continuación.

// Add total price under qty selector

add_action( 'woocommerce_after_add_to_cart_button', 'woocommerce_total_product_price', 31 );
function woocommerce_total_product_price() {
    global $woocommerce, $product;
    // let's setup our divs
    echo sprintf('<div id="product_total_price" style="margin-bottom:20px;">%s %s</div>',__('Total price:','woocommerce'),'<span class="price">'.$product->get_price().'</span>');
    ?>
        <script>
            jQuery(function($){
                var price = <?php echo $product->get_price(); ?>,
                    currency = '<?php echo get_woocommerce_currency_symbol(); ?>';
                $('[name=quantity]').change(function(){
                    if (!(this.value < 1)) {
                        var product_total = parseFloat(price * this.value);
                        $('#product_total_price .price').html( currency + product_total.toFixed(2));
                    }
                });
            });
        </script>
    <?php
}

Cambiar la ubicación de las notificaciones de Woocommerce en una sola página de producto

Ahora hay una cosa más que corregir. Si alguien agrega más boletos al carrito de los que hay disponibles, Woocommerce muestra una notificación de error, que desafortunadamente aparece en la parte superior de la página y se puede perder fácilmente. Por lo tanto, voy a cambiar la ubicación de la notificación de Woocommerce a una sola página de producto con este pequeño fragmento de código aquí.

remove_action( 'woocommerce_before_single_product', 'woocommerce_output_all_notices', 10 );
add_action( 'woocommerce_after_add_to_cart_form', 'woocommerce_output_all_notices', 10 );

Esto moverá la notificación de error debajo del botón Agregar al carrito.

Reemplazar la lista desplegable de variaciones con botones de opción

Se ve mucho mejor si, en lugar de las listas desplegables, los atributos se muestran como botones de opción (vea la primera captura de pantalla arriba). Esto lo puedo lograr con la ayuda de free Muestras variantes de productos para WooCommerce complemento por tema Villa. Simplemente instálelo y configure el tipo de pantalla predeterminado en Radio.

Reemplace el selector de cantidad con la lista desplegable

Esto facilita que los clientes elijan la cantidad correcta de boletos sin tener que hacer clic en ellos uno por uno. Así que lo instalaré gratis Cantidad de producto todo en uno para WooCommerce complemento de WPWhale. Luego vaya a Woocommerce >> Configuración >> Cantidad de producto >> general y actívelo.

Ahora vaya a la pestaña Cantidad desplegable y actívela también.

Cambie el diseño único del producto Woocommerce con el tema Blocksy

Hasta ahora todo está bien y básicamente todo está hecho. PERO como estoy usando el increíble tema Blocksy Pro, puedo cambiar la página del producto único para que sea mucho mejor que la página del producto clásico de Woocommerce. Eche un vistazo a la captura de pantalla aquí a la izquierda.

Si ya tiene un tema de Blocksy Pro, vaya a Personalizador >> Woocommerce >> Página de producto único y elija un diseño que se adapte a su sitio. Actualmente tienes cuatro para elegir.

¿Te ha resultado útil??

0 / 0

Deja una respuesta 0

Tu dirección de correo electrónico no será publicado. Required fields are marked *