WooCommerce - excelling eCommerce

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

Usuarios

Durante el proceso de compra, el usuario puede marcar una check para decidir si quiere crear una cuenta en la página. Para que esta check esté marcada por defecto, podemos usar el siguiente código:

add_filter('woocommerce_create_account_default_checked' , function ($checked){
    return true;
});

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.

Atributos

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

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

Algunos plugins interesantes 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 woocomerce.
• 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 woocomerce. 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

1. Fancy product designer → Permite personalizar el diseño del producto que estamos vendiendo.
2. Fancy product designer → Permite personalizar el diseño del producto que estamos vendiendo.
3. WC Fields Factory → Permite añadir nuevos campos para que el cliente pueda personalizar el producto que está comprando.
4. 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.

Configuración Pago con Tarjeta (REDSYS)

Lo gestionamos desde Woocommerce -> Settings -> Checkout

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

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

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.

Servired/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.

Transferencias

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

Contrarreenvolso

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.

WooCommerce Stripe Gateway Permite hacer cobros con tarjeta a través de Stripe y cancelar los cobros en caso deseado (por ejemplo si para formar un grupo de alumnos no se llega al mínimo de ellos).Las API key de stripe están en este enlace: API Stripe

Shortcodes

Hooks

API

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

Impuestos

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. Woocommerce -> ajustes -> zonas de envío -> Añado una zona
2. Cada zona de envío podrá tener varios métodos de envío. Por ejemplo, el envío a Barcelona podría tener las siguientes opciones simultaneamente:
   1. Envío local (recogida en tienda y coste 0)
   2. Envío gratuito (para compras superiores a cierta cantidad)
   3. Precio fijo (por defecto)

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.
3. 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.