Curso de Woocommerce - Pablo Monteserín

Contactar con el profesor

Tras descargar, instalar y activar el plugin debemos pulsar en “Install WooCommerce Pages”, para que aparezcan en el menú las páginas del plugin. Estas páginas Pueden seleccionarse desde el menu Pages de WordPress y modificarse, eliminarse, etc.

Woocommerce → Products: Desde este menú podremos añadir tanto productos como categorías.

Instalar productos de ejemplo: Tools → Import → WordPress → Activate plugin and run the importer → browse → wordpressFolder/wp-content/plugins/woocommerce/dummy_data/dummy_data.xml → marco la check Download and import file attachments

Cambio de la moneda y localización de la tienda por defecto: Woocommerce → Settings → general

Establecer una oferta (sale) para un producto: En la pantalla de edición del producto, justo debajo de donde establecemos su precio, podemos establecer su precio en oferta. Habrá que asignarla, además, un periodo.

Crear un link a categorías de productos: Apariencia -> menu → screen options (esquina superior derecha) → marcamos woocommerce categories.

Ir directamente al carrito de la compra sin tener que pulsar en el enlace que aparece al añadir un producto: Woocommerce → Settings → Productos Tab → Presentación →

Marco la check ” Redirigir a la página de la cesta después de la adición exitosa “
Desmarco la check ” Habilitar AJAX añadir al carrito de botones en archivos “;

¿Dónde estan indicadas las páginas de wordpress que serán vinculadas a shop, cart, products, etc.? Woocommerce -> settings -> Products -> Display

Ordenar productos

Para establecer un orden personalizado de los productos, iremos a WooCommerce > Settings -> Pestaña Products -> Display y nos aseguraremos de que está marcada la opción Default Sorting

Luego, para alterar este orden a nivel individual, modificaremos para cada producto Product data -> Advanced -> Menu order, asignando un valor menor (o más negativo) al que queremos que aparezca antes.

Redimensionar imágenes de producto

Apariencia → Personalizar → Woocommerce → Imagenes de producto

Atributos de Woocommerce

Definir atributos sirve para poder establecer filtos en las páginas de tienda y para poder seleccionar una variación de un producto (en varios colores, tamaños, etc) a la hora de comprar un producto

Para definir estos atributos: Menú productos -> atributos

Para definir los posibles valores de estos productos y las posibles variaciones que se podrán seleccionar al comprarlos, iremos directamente al producto deseado.

Variaciones en Woocommerce

Una vez definidos los atributos, podemos hacer que al seleccionar uno de ellos en el frontend cambie la imagen del producto. Es necesario definir el producto como variable (no simple) y asignarle un precio.

Si quiero que estas variaciones sean un pequeño icono visual en lugar de un combo desplegable, puedo usar el plugin Variation Swatches and Photos

Stock en variaciones

No se administra desde el lugar habitual, sino desde Datos del producto -> Variaciones -> selecciono una variación y cambio el stock.

Widgets de Woocommerce

Woocommerce Cart: Te muestra el carrito de la compra de lo que vas comprando.
Woocommerce Product Category: Te muestra los enlaces a las categorías de productos. Tiene varios modos de visualización.
Woocommerce Product Tag: Muestra una nube de etiquetas con las etiquetas de cada producto. El tamaño de las mismas depende del numero de productos etiquetados con esa palabra.
Woocommerce Layered Nav: permite filtrar los productos mostrados de acuerdo a diferentes criterios.
Woocommerce Layered Nav Filters: permite ver los filtros de productos activos y desactivarlos.
Buscador de productos: Este widget sólo ofrece en sus resultados de búsqueda los productos de la tienda, evitando las entradas del blog y mejorando la presentación con imágenes destacadas. Si quremos que funcíone en una página multi idioma, habrá que añadir el campo “idioma” al formulario.

add_filter( 'get_product_search_form' , 'me_custom_product_searchform' );

function me_custom_product_searchform( $form ) {
	$txt="productos";
	if(ICL_LANGUAGE_CODE=="en")$txt="products";
	$form = '<form role="search" method="get" id="searchform" action="' . esc_url( home_url( '/'  ) ) . '">
		<div>
		<label class="screen-reader-text" for="s">' . __( 'Search for:', 'woocommerce' ) . '</label>
		<button type="submit" id="searchsubmit" />
		<span class="icon"><i class="fa fa-search"></i></span>   
	</button>  
	<input type="text" value="' . get_search_query() . '" name="s" id="s" placeholder="' . __( "$txt", 'woocommerce' ) . '" />                           
	<input type="hidden" name="post_type" value="product" />
	<input type="hidden" name="lang" value="'.ICL_LANGUAGE_CODE.'">
	</div>
	</form>';
	return $form;
}

Plugins de Woocommerce

WooCommerce Waitlist : Permite establecer una lista de espera en la que el usuario se inscribe en el caso de que no queden existencias.
WooCommerce Weight Based Shipping : Permite establecer los costes de envío en función del peso del envío. Si lo configuramos, no es necesario configurar los gastos de envío en la sección habitual de woocommerce.
Returns and Warranty Requests : Plugin de pago para gestionar la devolución de las compras. No funciona bien con productos pagados antes de la instalación del plugin.
Category Order and Taxonomy Terms Order : Permite gestionar el orden en que se mostrarán las categorías. Para usarlo, iremos a productos -> Orden de Taxonomía
Variation Swatches and Photos: Permite establecer imágenes para las variaciones de producto, en lugar del combo desplegable que se usa por defect.
Advanced Woo Search — WordPress Plugins: Potencia la búsqueda que nos da el buscador de serie de woocommerce. Permite buscar por categorías, muestra un previo de los resultados, etc. Si queremos el el placeholder del plugin muestre un texto concreto, deberemos usar el siguiente código:

add_filter( 'aws_searchbox_markup', 'add_translated_placeholder_aws' );
function add_translated_placeholder_aws( $markup ) {
    if( ! is_plugin_active( 'advanced-woo-search/advanced-woo-search.php') || ! function_exists( 'AWS' ) ) {
        return;
    }
 
    $placeholder   = AWS()->get_settings( 'search_field_text' );
 
    // register placeholder
    do_action( 'wpml_register_single_string', "Custom Advanced Woo Search", "Custom Advanced Woo Search: search placeholder", $placeholder );
    // $translated = apply_filters( 'wpml_translate_single_string', $placeholder, "Custom Advanced Woo Search", "Custom Advanced Woo Search: search placeholder", ICL_LANGUAGE_CODE );
    $translated = "Productos";
    if(ICL_LANGUAGE_CODE == "en")$translated="Products";
    $markup = str_replace( $placeholder, $translated, $markup );
    return $markup;
}

Produc Add-ons → Permite que el usuario seleccione los atributos del producto mediante checkboxes.

Campos personalizados

Fancy product designer → Permite personalizar el diseño del producto que estamos vendiendo.
Fancy product designer → Permite personalizar el diseño del producto que estamos vendiendo.
WC Fields Factory → Permite añadir nuevos campos para que el cliente pueda personalizar el producto que está comprando.
WooCommerce Checkout Field Editor (Manager) Pro → Permite añadir nuevos campos para que el producto pueda personalizar los valores en la página de checkout.

Pasarelas de pago

Transferencia bancaria

Nombre de la cuenta: Negocio guay S.A.
Número de cuenta: 0081 1111 2222 3333 4444
Nombre del banco: Banc Sabadell
Tipo de cuenta: Expansión Negocios
IBAN: ES23
BIC / Swift: BSAB ESBB

Paypal

Viene integrado de serie en Woocomerce. Se llevan un 3.4% de comisión y 0.35 céntimos de comisión fija, lo cual es bastante elevado comparado con el resto. Además abandonas la página web en el momento del pago. Tiene una opción para pagar con tarjeta utilizando paypal, pero la gente no la suele usar. Si queremos que la gente nos pague con tarjeta, deberíamos emplear alguna de las siguientes opciones.
Para pagar a través de paypal habrá que introducir las credenciales en settings-> paypal.

En este enlace tienes las instrucciones para obtener las credenciales.

Para acceder a nuestra cuenta business (desde la que obtener las claves API y ver nuestras transacciones) pulsa aquí.

Configurar cuentas sandbox para Paypal

Vendedor:

user: monteserin_vendedor@sandbox.com
pass: monteserin
API user: monteserin_vendedor_api1.sandbox.com
API password: HSHXHDF8GKTQVM4B
API signature: AFcWxV21C7fd0v3bYYYRCpSSRl31A6nEm2Td2tR6N5IwUTvSoAtU7Cug

Comprador

user: monteserin_comprador@sandbox.com
monteserin

stripe

Puedes pagar con tu tarjeta bancaria directamente, sin abandonar tu sitio web. Se llevan un 2.9% de comisión. Es muy cómoda, pero tiene el inconveniente de que el cliente debe poner sus datos bancarios en la propia web y tal vez no se fíe. En las siguientes pasarelas, el cliente va a la página del banco.

Plugin para configurar Stripe.

Configuración Pago con Tarjeta (REDSYS)

Es la pasarela de pago que utilizan ciertos bancos españoles (La Caixa, Bankia, Banc Sabadell, etc). Hay que ponerse en contacto con el banco para que nos dé los datos que introduciremos en el plugin. En general, hay que cubrir un mínimo de ventas o pagar una comisión.

Descarga del plugin.

Lo gestionamos desde Woocommerce -> Settings -> Checkout

Este es el mail que nos mandan desde la entidad bancaria para configurar la pasarela:

Estimado cliente,
Le agradecemos habernos elegido como entidad gestora de su TPV VIRTUAL, le acompañaremos en todo momento durante el proceso de alta, integración y mantenimiento de su CYBERPAC.
Le adjuntamos la documentación necesaria para poder realizar la integración de su tienda con nuestra pasarela.
A continuación le mostramos la información necesaria para llevar a cabo la integración:
Credenciales de acceso al Módulo de Administración
Web de acceso: https://burabura
Usuario: [codigo_usuario]
Password: [password]
Datos para operar en el entorno de Test
Número de comercio (FUC) (Ds_Merchant_MerchantCode) [numero_comercio]
Número de terminal (Ds_Merchant_Terminal) [numero_terminal]
Moneda del terminal (Ds_Merchant_Currency) [moneda_terminal]
Clave secreta de encriptación [clave_secreta_de_encriptacion]
Tipo de cifrado SHA256
Prueba operación aceptada
Número de tarjeta [numero_tarjeta]
Caducidad [caducidad]
Código CVV2 [codigo_cvv2]
Código CIP [codigo_cip]
Prueba operación denegada
Número de tarjeta [numero_tarjeta]
Caducidad [caducidad]
Podrá descargar los módulos facilitados por Redsys para las distintas plataformas de tienda online (Prestashop, WordPress, Magento, etc...) en la siguiente dirección: http://www.redsys.es/wps/portal/redsys/publica/areadeserviciosweb/descargaDeDocumentacionYEjecutables/
Para realizar el pase a entorno real conteste a este correo electrónico.
Les recordamos que para poder realizar la verificación de la pasarela en su página web, es necesario que la web esté operativa, las imágenes de los productos estén cargadas y diseñado el carrito de la compra.
Para cualquier duda o consulta puede contactar con nosotros mediante la dirección de correo: caixabank@necomplus.com o en el teléfono: 900.834.172
Nuestro horario de atención es de lunes a viernes 9:00h. a 22:00h.
Cordialmente,
Soporte Cyberpac Caixabank

Y esta es la configuración que habrá que poner en Woocommerce:

FUC Comercio: [numero_comercio]
Clave secreta de encriptacion: [clave_secreta_de_encriptacion]
Terminal: [numero_terminal]

Ceca

Es la pasarela de pago que utilizan ciertos bancos españoles (Caja badajoz, Caja Círculo, Caja de Burgos, CajaSur, Caja Granada, Caja de guadalajara, Caja Rioja, Caixa Laietana, Caja Murcia, CajAstur, Sanostra, La Caja de Canarias, CAN ( Caja navarra), Caja Canarias, Caja Cantabria, Caja Segovia, CaixaNova, IberCaja, CAM, Caixa Galicia, Caja de Ávila, BBK, KutxaBank, Caja Vital Kutxa, Caja de Extremadura, Kutxa, Caja duero, y tantas otras). Hay que ponerse en contacto con el banco para que nos dé los datos que introduciremos en el plugin. En general, hay que cubrir un mínimo de ventas o pagar una comisión.

Transferencias

No implican ninguna comisión, pero son incómodas para el cliente final. Para el vendedor es lo más cómodo.

Contrarreenvolso

Es caro y tosco.

La idea no es tener muchas pasarelas de pago, sino tener las necesarias. Tener muchas pasarelas, ensucia el proceso de compra, complica el seguimiento de los pagos y es más pago.

Shortcodes y API

Shortcodes

Mostrar 4 productos ordenados for fecha

[products orderby="date" limit="4"]

Mostrar productos marcados como destacados

[featured_products limit="4" orderby="date" order="DESC"]

Mostrar 4 productos ordenados por precio

[products orderby="price" order="asc" limit="4"]

Mostrar productos que tienen un atributo con cierto valor

[products attribute="esfera-color" terms="azul" limit="4"]

Algunos Snippets

Quitar opciones de filtrado

functions.php// Options: menu_order, popularity, rating, date, price, price-desc
 
function my_woocommerce_catalog_orderby( $orderby ) {
    unset($orderby["rating"]);
    return $orderby;
}
add_filter( "woocommerce_catalog_orderby", "my_woocommerce_catalog_orderby", 20 );

Borrar elementos de la página de checkout

add_filter( 'woocommerce_checkout_fields' , 'custom_override_checkout_fields' );
 
function custom_override_checkout_fields( $fields ) {
    unset($fields['billing']['billing_first_name']);
    unset($fields['billing']['billing_last_name']);
    unset($fields['billing']['billing_company']);
    unset($fields['billing']['billing_address_1']);
    unset($fields['billing']['billing_address_2']);
    unset($fields['billing']['billing_city']);
    unset($fields['billing']['billing_postcode']);
    unset($fields['billing']['billing_country']);
    unset($fields['billing']['billing_state']);
    unset($fields['billing']['billing_phone']);
    unset($fields['order']['order_comments']);
    unset($fields['billing']['billing_postcode']);
    unset($fields['billing']['billing_company']);
    unset($fields['billing']['billing_last_name']);
    unset($fields['billing']['billing_email']);
    unset($fields['billing']['billing_city']);
    return $fields;
}

Quitar featured image de un producto simple

functions.phpfunction remove_gallery_and_product_images() {
if ( is_product() ) {
    remove_action( 'woocommerce_before_single_product_summary', 'woocommerce_show_product_images', 20 );
    }
}
add_action('template_redirect', 'remove_gallery_and_product_images');

Poner título de producto sobre el thumbnail

remove_action( 'woocommerce_before_shop_loop_item_title', 'woocommerce_template_loop_product_thumbnail', 10 );
add_action( 'woocommerce_after_shop_loop_item_title', 'woocommerce_template_loop_product_thumbnail', 10 );

Cambiar el orden de las cosas en la página de Single Product

remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_meta', 40 );
// Add product meta in new position
add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_meta', 5 );

// Remove product title from its original position
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_title', 5 );
// Add product title in new position
add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_title', 10 );

// Remove product price from its original position
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_price', 10 );
// Add product price in new position
add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_price', 15 );

// Remove product tabs (description, additional information, reviews)
remove_action( 'woocommerce_after_single_product_summary', 'woocommerce_output_product_data_tabs', 10 );

// Add product description tab content in new position
function woocommerce_template_product_description() {
    woocommerce_get_template( 'single-product/tabs/description.php' );
}
add_action( 'woocommerce_single_product_summary', 'woocommerce_template_product_description', 20 );

// Add product additional information tab content in new position
function woocommerce_template_product_additional() {
    woocommerce_get_template( 'single-product/tabs/additional-information.php' );
}
add_action( 'woocommerce_single_product_summary', 'woocommerce_template_product_additional', 30 );

// Remove product add-to-cart from it original position
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 30 );
// Add product add-to-cart in new position
add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 40 );

// Remove product 'Related Products'
remove_action( 'woocommerce_after_single_product_summary', 'woocommerce_output_related_products', 20 );

// Remove shop breadcrumb
remove_action( 'woocommerce_before_main_content', 'woocommerce_breadcrumb', 20, 0 );

// Remove main shop page "Showing X results" text
remove_action( 'woocommerce_before_shop_loop', 'woocommerce_result_count', 20 );

// Remove main shop page product filter
remove_action( 'woocommerce_before_shop_loop', 'woocommerce_catalog_ordering', 30 );

Modificaciones en plantilla hija

Copiaremos los siguiente ficheros de la carpeta del plugin y los pegaremos en la ruta indicada:

themeFolder/woocommerce/cart/cart-totals.php
themeFolder/woocommerce/cart/cart.php
themeFolder/woocommerce/cart/content-single-product.php
themeFolder/woocommerce/cart/woocommerce_configuration.php

Gestión de impuestos en Woocommerce

1) Woocomerce -> general -> marco la check -> Activa los impuestos y los cálculos de impuestos

2) Woocommerce -> Impuesto -> voy a introducir los precios con impuestos incluidos

Métodos de envío

1) Woocomerce -> general -> marco la check -> Activa los impuestos y los cálculos de impuestos

2) Woocommerce -> Impuesto -> voy a introducir los precios con impuestos incluidos

Consideraciones

1. Para poder ver correctamente los costes de envío antes de introducir los datos del comprador, este debe introducir una dirección:

2. Si queremos definir varios métodos de envío para una misma zona, no definiremos varias zonas asignando a cada una un método de envío, sino que definiremos una zona con varios métodos de envío.

Si hemos definido la zona de envío Barcelona y la zona de envío España, y el usuario introduce que la dirección de entrega está en Barcelona, no se mostrarán los métodos de envío de España.

Plugin para establecer los costes del envío en función del peso

WooCommerce Weight Based Shipping Nos permite definir costes en función del peso del envío. Podrémos definir estos costes…

De manera individual para una zona de envío dentro del menú de métodos de envío.

De manera global para todas las zonas de envío en el menú de envíos.

este plugin no será necesario configurar los gastos de envío en la sección habitual de woocommerce.

Accede a tu cuenta

Suscripción (10€/mes)

Ordenar productos

Redimensionar imágenes de producto

Atributos de Woocommerce

Variaciones en Woocommerce

Stock en variaciones

Widgets de Woocommerce

Plugins de Woocommerce

Campos personalizados

Pasarelas de pago

Transferencia bancaria

Paypal

Configurar cuentas sandbox para Paypal

Vendedor:

Comprador

stripe

Configuración Pago con Tarjeta (REDSYS)

Este es el mail que nos mandan desde la entidad bancaria para configurar la pasarela:

Ceca

Transferencias

Contrarreenvolso

Shortcodes y API

Mostrar 4 productos ordenados for fecha

Mostrar productos marcados como destacados

Mostrar 4 productos ordenados por precio

Mostrar productos que tienen un atributo con cierto valor

Algunos Snippets

Quitar opciones de filtrado

Borrar elementos de la página de checkout

Quitar featured image de un producto simple

Poner título de producto sobre el thumbnail

Cambiar el orden de las cosas en la página de Single Product

Modificaciones en plantilla hija

Gestión de impuestos en Woocommerce

Métodos de envío

Consideraciones

Plugin para establecer los costes del envío en función del peso