¿Cómo crear atributos predeterminados en WooCommerce? (Codificación y complementos)

Hoy te mostramos cómo crear atributos de producto predeterminados en WooCommerce con un complemento, manualmente desde el panel de WooCommerce y programáticamente a través de PHP. Esto generalmente se pasa por alto, pero puede tener un gran impacto en las tasas de conversión de sus productos variables.

¿Qué son los atributos de WooCommerce?

WooCommerce le permite agregar información a sus productos a través de atributos. Puede aplicar estos atributos a cualquier producto nuevo o existente. Por ejemplo, los atributos comunes son las tallas y los colores de las prendas de vestir, el sistema operativo de los teléfonos móviles, etc. Estos atributos son globales, lo que significa que en lugar de establecer un atributo de tamaño y color para cada producto nuevo, por ejemplo, crea atributos de tamaño y color predefinidos y los aplica a los diferentes productos.

En WooCommerce, los atributos son muy importantes para:

  • Filtrar productos: Los usuarios pueden filtrar productos según un atributo específico. Por ejemplo, jeans de tamaño mediano.
  • Crea productos variables: Para crear variaciones de un producto, primero debe definir atributos para él. Una vez que tenga los atributos, puede usarlos para crear las diferentes variaciones del producto. Entonces, si vende jeans, por ejemplo, esto significa que no puede crear variaciones de tamaño de jeans si no ha creado el atributo de tamaño para ellos.

Ahora, comprendamos mejor por qué los atributos predeterminados son tan importantes para todas las tiendas WooCommerce.

¿Por qué crear atributos de producto predeterminados?

Una de las primeras cosas que aprendimos cuando comenzamos nuestra tienda en línea fue la importancia de crear atributos de producto predeterminados. Al principio, nuestras tasas de conversión no eran muy buenas y muchos de nuestros usuarios nos decían que el botón Agregar al carrito estaba deshabilitado. Sin embargo, cada vez que verificamos todo estaba funcionando bien. La peor parte es que estábamos perdiendo muchas ventas porque muchos de esos compradores nunca volverían a nuestra tienda. ¿Por qué iban a hacerlo si no pudieran comprar?

Nos tomó un tiempo darnos cuenta de que el problema era que no habíamos establecido los atributos predeterminados del producto en WooCommerce.

Variaciones del producto y atributos predeterminados

Como probablemente sepa, hay 4 tipos de productos en WooCommerce: simples, variables, agrupados y externos / afiliados. Hoy, nos centraremos en los productos variables y sus atributos predeterminados.

Cuando crea variaciones de productos en WooCommerce, debe crear la combinación predeterminada de esos atributos. De lo contrario, el botón Agregar al carrito en la página de su producto aparecerá deshabilitado hasta que los usuarios seleccionen la combinación de atributos que desean. El problema es que muchos de ellos simplemente ven que el botón está bloqueado, piensan que la página no funciona y se van.

Por eso, si tiene productos variables en su tienda WooCommerce, la creación de atributos de producto predeterminados es imprescindible.

Atributos predeterminados del producto de WooCommerce: botón Agregar al carrito deshabilitado
El color y el tamaño no tienen valores predeterminados, por lo que el botón Agregar al carrito está deshabilitado

¿Cómo crear atributos de producto predeterminados en WooCommerce?

Hay tres formas de crear atributos de producto predeterminados en WooCommerce:

  1. Con un complemento
  2. Manualmente a través del administrador de WooCommerce
  3. Programáticamente a través de PHP

Si no es un desarrollador, la forma más sencilla es utilizar un complemento. Con el script PHP, por otro lado, puede hacer lo mismo con un poco de codificación sin instalar nada. Es importante tener en cuenta que puede obtener el mismo resultado con ambos métodos, así que elija el mejor para usted según sus habilidades.

1) Cree atributos de producto predeterminados de WooCommerce con un complemento

La forma más sencilla es utilizar un complemento para establecer los atributos predeterminados del producto. Para esta guía, usaremos Direct Checkout para WooCommerce. Es un complemento freemium que tiene una versión gratuita con funciones básicas y 3 planes premium. Esta herramienta tiene miles de instalaciones activas y es una de las mejores del mercado.

1. Lo primero que tienes que hacer es instalar y activar el complemento. Entonces, ve a tu Panel de WordPress> Complementos> Agregar nuevo. Luego, busque Pago directo para WooCommerce, hacer clic Instalar ahora, y cuando finalice el proceso de instalación, haga clic en Activar. Alternativamente, puede consultar esta página y elegir la versión gratuita o uno de los planes premium.

2. Luego, vaya a la sección WooCommerce en la barra lateral y haga clic en la opción Pago directo.

3. Vaya al Productos sección y habilite la última opción Agregar atributos predeterminados en productos variables. Recuerde guardar los cambios.

¡Eso es! Tienes creó atributos de producto predeterminados con Direct Checkout para WooCommerce!

Ahora, el primer atributo de cada producto se seleccionará por defecto y esto se aplicará a todos sus productos variables. Por lo tanto, si desea cambiar los atributos predeterminados, primero debe modificar el orden de los atributos y colocar el atributo que desea establecer como predeterminado.

2) Manualmente a través del administrador de WooCommerce

También puede crear atributos de producto predeterminados manualmente a través del panel de WooCommerce. Este método es rápido y fácil, pero puede llevar mucho tiempo si tiene muchos productos. Si ese es su caso, le recomendamos que utilice el complemento Direct Checkout o el script PHP descrito en la sección 3.

    1. Para establecer atributos predeterminados manualmente, primero, en el WooCommerce tablero ir a Productos y luego haga clic en su producto variable.
    2. Luego, seleccione Producto variable desde el Datos del producto desplegable.
    3. Después de eso, bajo Variaciones, tienes que seleccionar el Valores de formulario predeterminados. Esos son los atributos que se seleccionarán por defecto para ese producto.

¡Eso es! Tienes creó atributos de producto predeterminados manualmente!

Ahora, cuando un comprador visita la página de producto variable, mostrará los atributos que seleccionó de forma predeterminada y el Añadir al carrito se habilitará el botón.

Atributos predeterminados del producto de WooCommerce: botón Agregar al carrito habilitado
Color y tamaño con valores predeterminados para que el botón Agregar al carrito esté habilitado

Tenga en cuenta que debe establecer los atributos predeterminados para cada producto variable que tenga. Por eso, si tiene muchos productos, le recomendamos que utilice el complemento Direct Checkout o el script PHP que describiremos a continuación.

3) Cree productos predeterminados mediante programación (PHP)

Si no desea instalar ningún complemento en su sitio y tiene algunas habilidades de codificación, puede crear atributos de producto predeterminados de WooCommerce mediante programación con un poco de PHP.

SUGERENCIA: Cree un tema hijo

Antes de comenzar, le recomendamos que cree un tema infantil. Si no tiene uno, simplemente instale cualquier complemento que le guste o codifíquelo usted mismo. Para obtener más información sobre cómo crear un tema hijo, consulte nuestra guía paso a paso.

Esto es importante porque si cambia los archivos del tema principal, la próxima vez que actualice el tema, perderá todas sus personalizaciones. Sin embargo, si modifica el tema hijo, los cambios no serán anulados por la nueva versión del tema.

Ahora que ha instalado el tema hijo, entremos en él.

Script PHP

Para establecer la variación predeterminada mediante programación en WooCommerce, deberá modificar el functions.php expediente. Simplemente ve a wp-content / yourtheme / functions.php sobre el tema de su hijo.

Aquí, le mostraremos el código completo y luego explicaremos sus partes principales. Entonces, el script PHP completo para crear atributos de producto predeterminados de WooCommerce de manera programática es el siguiente:

add_action('woocommerce_before_single_product_summary', 'quadlayers_product_default_attributes');
function quadlayers_product_default_attributes() {
      global $product;
      if (!count($default_attributes = get_post_meta($product->get_id(), '_default_attributes'))) {
        $new_defaults = array();
        $product_attributes = $product->get_attributes();
        if (count($product_attributes)) {
          foreach ($product_attributes as $key => $attributes) {
            $values = explode(',', $product->get_attribute($key));
            if (isset($values[0]) && !isset($default_attributes[$key])) {
              $new_defaults[$key] = sanitize_key($values[0]);
            }
          }
          update_post_meta($product->get_id(), '_default_attributes', $new_defaults);
        }
      }
    }  

Ahora, analicémoslo.

El gancho

Usamos el gancho woocommerce_before_single_product_summary. Este gancho de acción se ejecutará antes de que se cargue la página, por lo que le permite agregar algo de lógica antes de que el usuario la vea.

add_action('woocommerce_before_single_product_summary', 'quadlayers_update_product_default_attributes');

Comprobar atributos predeterminados

Luego, verificamos si existen los meta_default_attributes para no ejecutar el script dos veces.

 if (!count($default_attributes = get_post_meta($product->get_id(), '_default_attributes'))) {
      $new_defaults = array();

Atributos

Después de eso, obtenemos toda la gama de atributos.

   $product_attributes = $product->get_attributes();
        if (count($product_attributes)) {

Y luego iteramos sobre esa matriz de atributos.

          foreach ($product_attributes as $key => $attributes) {
            $values = explode(',', $product->get_attribute($key));

Obtenemos el primer valor de cada atributo.

            if (isset($values[0]) && !isset($default_attributes[$key])) {

Si el atributo no tiene un valor, el script agregará el primer valor de las opciones disponibles en $ new_defaults.

              $new_defaults[$key] = sanitize_key($values[0]);
            }
          }

Luego, guarda $ new_defaults en meta_default_attributes. Esto se comprobará para no ejecutar el script dos veces.

          update_post_meta($product->get_id(), '_default_attributes', $new_defaults);
        }
      }
    }  

Conclusión

Considerándolo todo, no establecer atributos predeterminados para productos variables puede afectar sus tasas de conversión y hacerte perder muchas ventas. El botón Agregar al carrito aparecerá deshabilitado, por lo que los usuarios pueden pensar que no pueden comprar y salir.

La buena noticia es que agregar atributos predeterminados es una tarea fácil. Si no tiene habilidades de codificación, puede usar Direct Checkout para WooCommerce y agregar los atributos de producto predeterminados con un par de clics. Además, si no tiene muchos productos, puede hacerlo manualmente a través del panel de WooCommerce. Por otro lado, si prefiere hacerlo mediante programación, puede establecer los atributos predeterminados con un poco de codificación.

Si desea obtener más información sobre cómo mejorar su sitio WooCommerce mediante programación, puede consultar nuestras guías sobre cómo agregar la función al carrito e implementar AJAX agregar al carrito en su sitio.