Cómo crear atributos predeterminados en WooCommerce

Publicado: 2020-05-27

Hoy, le mostraremos cómo crear atributos de productos predeterminados en WooCommerce con un complemento, manualmente desde el panel de control de WooCommerce y mediante programación 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 te permite agregar información a tus 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 nuevo producto, 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 en función de un atributo específico. Por ejemplo, jeans de tamaño mediano.
  • Crear 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 revisamos todo funcionaba bien. La peor parte es que estábamos perdiendo muchas ventas porque muchos de esos compradores nunca volverían a nuestra tienda. ¿Por qué lo harían si no podían comprar? Nos tomó un tiempo darnos cuenta de que el problema era que no habíamos establecido atributos de producto predeterminados en WooCommerce.

Variaciones de productos y atributos predeterminados

Como probablemente sepa, hay 4 tipos de productos en WooCommerce: simple, variable, agrupado y externo/afiliado. 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á como 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. Es por eso que si tiene productos variables en su tienda WooCommerce, es imprescindible crear atributos de productos predeterminados .

Atributos de producto predeterminados 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 productos 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 eres desarrollador, la forma más fácil es usar un complemento. Con el script PHP, por otro lado, puedes 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 fácil es usar un complemento para establecer atributos de producto predeterminados. Para esta guía, usaremos Pago directo 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 plugin. Entonces, vaya a su tablero de WordPress> Complementos> Agregar nuevo . Luego, busque Pago directo para WooCommerce , haga clic en 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 a la sección Productos y habilite la última opción Agregar atributos predeterminados en productos variables . Recuerda guardar los cambios.

¡Eso es! ¡Ha creado atributos de producto predeterminados con Direct Checkout para WooCommerce ! Ahora, el primer atributo de cada producto se seleccionará de forma predeterminada y se aplicará a todos sus productos variables. Por lo tanto, si desea cambiar los atributos predeterminados, debe modificar el orden de los atributos y colocar primero el atributo que desea establecer como predeterminado.

2) Manualmente a través del administrador de WooCommerce

También puede crear atributos de productos predeterminados manualmente a través del panel de control 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 configurar los atributos predeterminados manualmente, primero, en el panel de control de WooCommerce , vaya a Productos y luego haga clic en su producto variable.
    2. Luego, seleccione Producto variable en el menú desplegable Datos del producto .
    3. Después de eso, en Variaciones , debe seleccionar Valores de formulario predeterminados . Esos son los atributos que se seleccionarán por defecto para ese producto.

¡Eso es! ¡Ha creado atributos de producto predeterminados manualmente ! Ahora, cuando un comprador visite la página de productos variables, mostrará los atributos que seleccionó de manera predeterminada y se habilitará el botón Agregar al carrito .

Atributos de producto predeterminados 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 tienes muchos productos, te recomendamos usar el complemento Direct Checkout o el script PHP que describiremos a continuación.

3) Crear 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: Crea un tema hijo

Antes de comenzar, le recomendamos que cree un tema secundario . Si no tiene uno, simplemente instale cualquier complemento que desee 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 secundario, la nueva versión del tema no anulará sus cambios.

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

Guión PHP

Para establecer la variación predeterminada mediante programación en WooCommerce, deberá modificar el archivo functions.php . Simplemente vaya a wp-content/yourtheme/functions.php en su tema 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 mediante programación es el siguiente:

 add_action('woocommerce_before_single_product_summary', 'quadlayers_product_default_attributes');
función quadlayers_product_default_attributes() {
      $producto global;
      if (!count($default_attributes = get_post_meta($producto->get_id(), '_default_attributes'))) {
        $nuevos_valores_predeterminados = matriz();
        $producto_atributos = $producto->get_atributos();
        si (cuenta ($producto_atributos)) {
          foreach ($producto_atributos como $clave => $atributos) {
            $valores = explotar(',', $producto->get_attribute($clave));
            if (isset($valores[0]) && !isset($default_attributes[$key])) {
              $nuevos_valores predeterminados[$clave] = sanitize_key($valores[0]);
            }
          }
          update_post_meta($producto->get_id(), '_default_attributes', $nuevos_valores predeterminados);
        }
      }
    }  

Ahora, vamos a desglosarlo.

El gancho

Usamos el gancho woocommerce_before_single_product_summary . Este enlace 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 lo vea.

 add_action('woocommerce_before_single_product_summary', 'quadlayers_update_product_default_attributes');

Comprobar atributos predeterminados

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

 if (!count($default_attributes = get_post_meta($producto->get_id(), '_default_attributes'))) {
      $nuevos_valores_predeterminados = matriz();

Atributos

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

 $producto_atributos = $producto->get_atributos();
        si (cuenta ($producto_atributos)) {

Y luego iteramos sobre esa matriz de atributos.

 foreach ($producto_atributos como $clave => $atributos) {
            $valores = explotar(',', $producto->get_attribute($clave));

Obtenemos el primer valor de cada atributo.

 if (isset($valores[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.

 $nuevos_valores predeterminados[$clave] = sanitize_key($valores[0]);
            }
          }

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

 update_post_meta($producto->get_id(), '_default_attributes', $nuevos_valores predeterminados);
        }
      }
    }  

Conclusión

En general, no establecer atributos predeterminados para productos variables puede afectar sus tasas de conversión y hacer que pierda muchas ventas. El botón Agregar al carrito aparecerá como deshabilitado por lo que los usuarios pueden pensar que no pueden comprar y se van.

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 control 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 de WooCommerce mediante programación, puede consultar nuestras guías sobre cómo agregar la función al carrito e implementar AJAX para agregar al carrito en su sitio.

¿Cuál de estos métodos vas a utilizar? ¡Háganos saber sus pensamientos en la sección de comentarios a continuación!