Dynamic Checkout para WooCommerce: Preguntas frecuentes y resolución de errores

Objetivo: Ver las preguntas frecuentes sobre la funcionalidad Checkout para WooCommerce.

Pautas generales para la resolución de problemas

Si tienes dificultades para hacer que el Dynamic Checkout aparezca correctamente, aquí tienes algunos pasos para intentar resolver el problema:

1. Comprueba que tienes instalada la última versión de Dynamic Checkout aquí
2. Desactiva los plugins externos

Ten en cuenta que el complemento Métodos de envío/pago basados en roles de WooCommerce no es compatible con el Dynamic Checkout de Sendcloud y debe desactivarse para que los métodos de pago aparezcan correctamente.  

P: Publiqué mi configuración, pero los métodos de envío no aparecen en el checkout. ¿Qué está mal?

Estas son algunas razones por las que esto podría estar pasando:

1. Si recibes un mensaje de error al intentar publicar tu Checkout, puede que tu configuración no se haya publicado correctamente.
   

   Ve a la Configuracion > Dynamic Checkout en el panel de Sendcloud y asegúrate de que la configuración que acabas de publicar no tenga un estado de error.

   1. Intenta publicar de nuevo la configuración. 
   2. Intenta actualizar tus claves API.
   3. Vuelve a conectar tu tienda a Sendcloud. Ten en cuenta que tendrás que introducir una nueva configuración del Dynamic Checkout si restableces la conexión de esta manera.
   4. Añade a la lista blanca (whitelist) las direcciones IP de esta lista (en caso de que restrinjas el acceso mediante un cortafuegos o Cloudflare, etc.).
      
2. Es probable que tengas que actualizar tu plugin o WooCommerce/WordPress.
   Asegúrate de tener instalada la última versión del plugin de Sendcloud y de tener tu WooCommerce y WordPress actualizados (versión 4.0 y posteriores).
   
   
3. Intentaste crear un método de envío en una fecha determinada en la configuración de WooCommerce en lugar de hacerlo en el panel de Sendcloud.
   Debido a la forma en que funciona WooCommerce, el método "Entrega en fecha determinada" es una opción que se puede seleccionar desde la configuración de la zona de envío de WooCommerce. Intentar crear un método de esta manera no mostrará el método correcto en el Checkout, ya que no hay nada configurado en tu cuenta de comerciante de Sendcloud. El método debe configurarse primero en el panel de Sendcloud y después publicarse en el plugin. Elimina el método manual y configura un método de envío en el panel Checkout de Sendcloud para solucionarlo.
   
   
4. Puede haber zonas de envío duplicadas en WooCommerce.
   Si has creado una zona de entrega en tu configuración del Checkout para una zona que ya estaba presente en WooCommerce, es probable que veas que aparecen zonas duplicadas en tu panel de WooCommerce. La zona de envío anterior puede estar cancelando la zona de entrega que se acaba de crear.
   
   Para resolver este problema, tienes que dar prioridad a la zona que acabas de crear en Sendcloud.
   
   - Ve a tu panel de WooCommerce > Settings > Shipping
   - Asegúrate de que la nueva zona que has creado en Sendcloud aparece arriba de la lista en WooCommerce; para esto, arrastra y suelta la nueva zona sobre la zona preexistente
   
   - Vuelve a crear cualquier método de la zona anterior que haya sido creado por WooCommerce y que quieras seguir utilizando (por ejemplo, recogida local, punto de servicio, etc.)
   - Solo tendrás que completar este paso la primera vez que publiques la configuración del Checkout. Cuando lo tengas, aparecerán métodos adicionales en la zona que se acaba de crear
   
   Sugerencia: Puedes ver fácilmente qué zona de envío es la que se ha creado a través del Checkout de Sendcloud porque, en la columna Método(s) de envío, el nombre que se muestra será el que has introducido durante la configuración del Checkout.
   
   En el ejemplo anterior puedes ver que el nombre que se ha escrito en Detalles del método ("PostNL - Se requiere firma") aparece en las Zonas de envío de WooCommerce. Este es el método de envío al que se debe dar prioridad.
   
   
5. Falta la tarifa del método de envío seleccionado.
   Tienes que añadir las tarifas a un método de envío en WooCommerce antes de que sea visible en el Checkout para tu cliente. A continuación te explicamos cómo agregar tarifas.

P: Aparece un mensaje de error cuando intento publicar mi configuración del Dynamic Checkout. ¿Cómo puedo solucionarlo? 

Si, por alguna razón, tu configuración de Pago Dinámico no puede publicarse, aparecerá uno de los siguientes mensajes de error que también indican cómo resolver el problema:

1. No coincide la divisa
   Solución: cambia la moneda para que coincida con la moneda de tu tienda WooCommerce a través del menú desplegable junto a Nueva zona de entrega
   
   
   
   
2. Firma no válida
   Solución: actualiza tus claves API
   
   
   
   
3. Faltan campos
   Solución: comprueba que has incluido un método de entrega en la página del Dynamic Checkout
   

P: Agregué las tarifas, pero sigue sin aparecer el método de envío. ¿Qué es lo que podría estar saliendo mal?

R: El cliente debe seleccionar un país antes de que pueda ver un método de envío en el Checkout.

Debido a que los métodos de envío en el Checkout están configurados para un país específico, el cliente primero debe seleccionar su país de envío en el Checkout antes de que el método sea visible para ellos.

Algunos temas mostrarán un mensaje como "Escribe tu dirección para ver las opciones de envío". Verifica dos veces si este mensaje de error se muestra en los ajustes de tu tema/configuración. Además, asegúrate de que las instrucciones para ingresar los datos de la dirección en el Checkout son claras para tus clientes, así podrán ver los métodos de envío disponibles.

P: Agregué tarifas para una clase de envío personalizada de WooCommerce, pero el método de Sendcloud no está visible en el Checkout. ¿Por qué?

R: Esto podría deberse a la forma en que has configurado las tarifas para el método de entrega en WooCommerce. Los métodos de envío de Sendcloud se pueden configurar de la misma forma que la tarifa plana de envío de WooCommerce.

Por ejemplo, si:

Has establecido el coste como 0, agrega solo tarifas de clase personalizada:

• El método de entrega es visible en el Checkout ya que el coste principal tiene un valor
• Si los artículos en el carrito no tienen un precio definido de clase de envío personalizada, el precio del método es 0
• Si los artículos tienen una clase de envío personalizada, se utiliza el precio de esa clase personalizada

No has establecido el coste (el apartado está vacío), agrega solo precios de clase personalizada:

• Si ningún artículo en el carrito tiene esa clase de envío personalizada, el método de envío está oculto
• Si un artículo del carrito tiene esa clase de envío personalizada, el método de envío está disponible

Ten en cuenta que en el futuro tendremos disponible la posibilidad de deshabilitar los métodos de entrega basados ​​en clases de peso.

P: ¿Por qué el widget no aparece correctamente?

El tema de la tienda puede estar interfiriendo con el estilo del widget, haciendo que los selectores de fecha aparezcan más pequeños, como en el siguiente ejemplo:

Para asegurarte de que los selectores de fecha aparecen según lo previsto, sigue estos pasos:

1. Ve a Apariencia en el panel de WordPress/WooCommerce
2. Haz clic en Personalizar
3. Haz clic en CSS addicional en el menú de personalización del tema
4. Pega la siguiente línea en el apartado de texto:

 .sc-delivery-date-wrapper { display: block !important; }

Ahora el widget debería aparecer correctamente:

Recuerda hacer clic en Publicar para guardar tus cambios.

P: ¿Por qué el selector/widget de puntos de servicio no se visualiza correctamente en la vista móvil o en pantallas pequeñas?

Para tamaños de móvil estándar, el selector de puntos de servicio debería aparecer correctamente dentro del espacio de pantalla disponible. Sin embargo, en algunos temas de WooCommerce, el selector puede aparecer distorsionado como en el ejemplo siguiente:

Esto se debe al tema utilizado y no al diseño del selector de puntos de servicio de Sendcloud. Una solución consiste en incluir el siguiente CSS personalizado para garantizar que el widget existe en su propia fila:

.woocommerce-shipping-totals {
display: flex;
flex-direction: column;
}

.woocommerce-shipping-methods li {
flex-direction: column;
}

Ahora el widget debería aparecer correctamente:

Nota: Esto puede funcionar para algunos temas personalizados de WooCommerce, pero no para todos. Si un tema utiliza un diseño basado en filas para ofrecer una visión general de los métodos de envío en la página de pago, puede aparecer este tipo de problema de diseño. 

P: ¿Cómo puedo diseñar el widget Checkout para que concuerde con mi marca?

El widget Checkout ha sido diseñado para cumplir con los estándares de accesibilidad. Sin embargo, entendemos que quieras cambiarle el estilo para que concuerde con el diseño de tu marca. Sigue estos pasos para anular el estilo estándar:

1. Ve a Apariencia en el panel de WordPress/WooCommerce
2. Haz clic en Personalizar
3. Haz clic en CSS addicional en el menú de personalización del tema
4. Pega este bloque de código en el apartado de texto:

.sc-shipping-option.sc-shipping-option {
/* typography */
--sc-font-size: 15px;
--sc-font-weight: inherit;
--sc-font-family: Georgia, serif;
​
/* colors */
--sc-accent-color: #d71c00;
--sc-accent-color-dark: #a30916;
--sc-focus-color: #e58722;
--sc-text-color: #fff;
--sc-dimmed-text-color: #d4d4d4;
--sc-background-color: #fff;
--sc-delivery-date-background-color: #323232;
--sc-border-color: #e7e7e7;
--sc-box-shadow-color: #1128570d;
--sc-sendcloud-logo-color: #c4c4c4;
​
/* miscellaneous */
--sc-spacing: 4px;
--sc-border-width: 2px;
--sc-selected-border-width: 2px;
--sc-border-radius: 12px;
​
/* private */
--sc-item-width: 120px;
--sc-item-gap-width: 8px;
}

Verás que el estilo del widget ha cambiado:

Ahora puedes modificar los colores, el estilo de fuente y el tamaño para que se adapten al estilo de tu marca.

Cuando el diseño de tu widget esté listo, haz clic en Publicar.

P: ¿Cómo puedo ocultar el logo del transportista o la mención "entregado por" del widget de entrega en fecha determinada?

Para ocultar el logo del transportista (.sc-carrier_logo) o la mención "entregado por" (.sc-carrier_by-line), debes añadir los siguientes elementos:

}

/* hide carrier logo */
.sc-carrier .sc-carrier__logo {
	display: none;
}

/* hide delivered by carrier line */
.sc-carrier .sc-carrier__by-line {
	display: none;
}

Una vez que definas display como "none" (ninguno), ya no se mostrará en tu Checkout.

P: ¿Puedo modificar el aspecto del título público y de la descripción pública de mi método de envío?

Ahora puedes modificar el aspecto del título público y de la descripción pública de tu método de envío mediante CSS personalizado. 

1. Ve a Apariencia en el panel de WordPress/WooCommerce
2. Haz clic en Personalizar
3. Haz clic en CSS addicionalen el menú de personalización del tema
4. Añade las propiedades personalizables

Propiedades personalizables

sc-delivery-method-title

sc-delivery-method-description

P: ¿Puedo cambiar la apariencia de mi seleccionador de puntos de servicio?

Si has creado un método de entregas en punto de servicio para el Dynamic Checkout, puedes customizar la apariencia del seleccionador de puntos de servicio usando CSS. 

1. Ve a Apariencia en el dashboard de Wordpress/WooCommerce
2. Haz clic en Customizar
3. Haz clic en CSS adicional en el menú customizable
4. Proporciona las características customizadas de CSS en el elemento .sc-shipping-option

.sc-shipping-option {
--sc-font-size: 1em;
--sc-font-family: Georgia, Times, serif;
--sc-border-radius: 0;

--sc-accent-color: #e24c00;
--sc-text-color: #ffffff;
--sc-dimmed-text-color: #afa6a6;
--sc-background-color: #111111;
--sc-panel-background-color: #232323;
--sc-border-color: #8a2b03;
}

También puedes cambiar la apariencia del seleccionador de puntos de servicio anulando el tema por defecto de tu tienda mediante CSS. Nota: asegúrate de añadir estos estilos después del elemento de linkque hace referencia al archivo principal checkout-plugin-ui.css; de lo contrario, la hoja de estilos anulará tus estilos.