Curso de Woocommerce

Por 9.99€ al mes tendrás acceso completo a todos los cursos. Sin matrícula ni permanencia.

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 están 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 → Imágenes de producto

Atributos de Woocommerce

Definir atributos sirve para poder establecer filtros 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 comprarlo.

Para definir estos atributos tenemos dos opciones:

• Definirlos de manera global, para todos los productos de la tienda: Menú productos → atributos
• Definirlos de manera particular, únicamente para el producto con el que estamos trabajando: En el área de administración del producto con el que estamos trabajando → Datos del producto → Atributos → Atributo de producto personalizado → Añadir.

Variaciones en Woocommerce

Nos permitirán definir diferentes precios, imágenes de producto etc para un mismo producto.

Para activar las variaciones, será necesario definir el producto como variable ( Dentro del área de administración del producto → Datos del producto → Producto variable).

Debemos marcar la check que indica que cierto atributo será usado para variaciones. A partir de ahí, en el menú Variaciones, podremos cambiar estos valores.

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

Ver los plugins.

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

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

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

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

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

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

• Hooks
• API

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.

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