Los productos de WooCommerce son «entradas» personalizadas de WordPress con campos personalizados. Se organizan utilizando las taxonomías personalizadas de «categorías de productos» y «etiquetas de productos». Aquí le mostraremos cómo funcionan los sitios multilingües de WooCommerce y qué necesitan sus temas de WooCommerce para ser Multilingual Ready (preparados para sitios multilingües).
Cómo funcionan los sitios multilingües de WooCommerce
Cuando un sitio usa WPML, se asigna un idioma a cada elemento de contenido. Esto significa que cada producto, categoría y etiqueta tendrá un atributo de idioma. Las traducciones se guardan en la base de datos como productos separados, vinculados entre sí mediante la tabla de idiomas de WPML. Los productos traducidos comparten las mismas imágenes y tienen sus campos separados con textos en el idioma correcto.
Los administradores del sitio pueden traducir cómodamente utilizando la tabla de traducción de productos de WPML. De esta manera, pueden concentrarse en traducir los textos requeridos, sin tener que preocuparse de cómo se almacenan las traducciones en la base de datos.
Dado que las traducciones están separadas en la base de datos, también es fácil mostrar sitios multilingües de WooCommerce. De hecho, si utiliza las API de WordPress y WooCommerce, es posible que su tema ya sea Multilingual Ready. Con un poco de pruebas y posiblemente pequeñas ediciones, puede lograr una compatibilidad multilingüe completa y disfrutar de nuevos mercados.
Plugins necesarios para sitios multilingües de WooCommerce
Para ejecutar sitios multilingües de WooCommerce, se necesitan los siguientes plugins:
- WooCommerce
- El plugin del núcleo de WPML y los complementos WPML Traducción de cadenas y WPML Traducción de medios
- WPML Multilingual & Multicurrency for WooCommerce
WPML y todos los plugins relacionados, incluido WPML Multilingual & Multicurrency for WooCommerce, vienen con el tipo de cuenta Multilingual CMS.
Textos codificados en las plantillas
Los archivos de sus plantillas muestran una mezcla de información del producto y textos codificados. Por ejemplo, la mayoría de las plantillas incluirán el nombre del producto y un enlace de «Comprar». El nombre del producto proviene de la base de datos, por lo que no necesita preocuparse por traducirlo.
Debe asegurarse de que todos los textos codificados sean traducibles mediante GetText.
Bien
<p><?php _e('Similar products:', 'my-textdomain') ?></p><input type="button" name="buy-button" value="<?php esc_attr_e('Buy now!', 'my-textdomain') ?>" />En el ejemplo a continuación, “Similar products” y “Buy now!” no están envueltos en llamadas GetText.
Mal
<p><?php echo 'Similar products:'; ?></p>
<input type="button" name="buy-button" value="Buy now!" />Bien
<p><?php _e('Similar products:', 'my-textdomain') ?></p><input type="button" name="buy-button" value="<?php esc_attr_e('Buy now!', 'my-textdomain') ?>" />Mal
<p><?php echo 'Similar products:'; ?></p><input type="button" name="buy-button" value="Buy now!" />“Similar products” y “Buy now!” no están envueltos en llamadas GetText.
| Bien | Mal |
|---|---|
<p><?php _e('Similar products:', 'my-textdomain') ?></p><input type="button" name="buy-button" value="<?php esc_attr_e('Buy now!', 'my-textdomain') ?>" /> | <p><?php echo 'Similar products:'; ?></p><input type="button" name="buy-button" value="Buy now!" />“Similar products” y “Buy now!” no están envueltos en llamadas GetText. |
Asegúrese de usar el dominio de texto (textdomain) de su tema para todas las llamadas GetText.
Páginas de WooCommerce codificadas
Muchos temas de comercio electrónico incluyen páginas especiales, como las páginas de Carrito o Cuenta. A menudo, el tema incluye enlaces a estas páginas, que aparecen en todas las páginas del sitio.
Si utiliza un menú de WordPress para estos enlaces, ya debería estar todo listo. WPML muestra un menú de WordPress diferente para cada idioma, por lo que los enlaces a estas «páginas especiales» serán diferentes según el idioma. Sin embargo, si codifica estos enlaces en los archivos de la plantilla, debe permitir que WPML reemplace los enlaces por los de estas páginas en el idioma correcto.
La forma correcta de enlazar a las páginas especiales de WooCommerce es utilizando las funciones de la API de WordPress y los ID de las páginas de WooCommerce. WPML Multilingual & Multicurrency for WooCommerce filtra las llamadas a get_option() con los ID de las páginas de WooCommerce. Devolverá el ID de la página en el idioma actual.
Bien
<a href="<?php echo get_permalink(get_option('woocommerce_shop_page_id')) ?>"><?php _e('Shop page', 'my-textdomain') ?></a><a href="<?php echo get_permalink(wc_get_page_id('shop')) ?>"><?php _e('Shop page', 'my-textdomain') ?></a>“shop” es el slug de la página en el idioma predeterminado.
Mal
<a href="<?php echo get_permalink(5) ?>"><?php _e('Shop page', 'my-textdomain') ?></a>El ID de “shop page” está codificado. Será diferente para distintos sitios y distintos idiomas.
<a href="/shop"><?php _e('Shop page', 'my-textdomain') ?></a>La URL de “shop page” está codificada. Será diferente para distintos idiomas.
| Bien | Mal |
|---|---|
<a href="<?php echo get_permalink(get_option('woocommerce_shop_page_id')) ?>"><?php _e('Shop page', 'my-textdomain') ?></a><a href="<?php echo get_permalink(wc_get_page_id('shop')) ?>"><?php _e('Shop page', 'my-textdomain') ?></a>“shop” es el slug de la página en el idioma predeterminado. | <a href="<?php echo get_permalink(5) ?>"><?php _e('Shop page', 'my-textdomain') ?></a>El ID de “shop page” está codificado. Será diferente para distintos sitios y distintos idiomas. <a href="/shop"><?php _e('Shop page', 'my-textdomain') ?></a>La URL de “shop page” está codificada. Será diferente para distintos idiomas. |
Listados de productos Multilingual Ready
Si utiliza los shortcodes de WooCommerce para mostrar el listado de productos, ya tiene todo listo. WooCommerce cargará los productos en el idioma correcto y los mostrará.
Si prefiere cargar los productos manualmente, utilizando su propio código, asegúrese de usar la API de WordPress o las llamadas a la API de WooCommerce. Si accede a la base de datos directamente, WPML no filtrará su llamada y obtendrá una mezcla de todos los productos en todos los idiomas.
Bien
<?php $products = get_posts(array('post_type' => 'product', 'suppress_filters' => 0)); ?><?php
$args = array(
'post_type' => 'product',
'posts_per_page' => 10,
);
$products = new WP_Query( $args );
?>Mal
<?php $products = get_posts(array('post_type' => 'product')); ?>suppress_filters se establecerá en true de forma predeterminada, lo que impedirá el filtrado de idiomas.
$products = $wpdb->get_results($wpdb->prepare(“SELECT * FROM {$wpdb->posts} WHERE post_type='product' ORDER BY ID DESC LIMIT %d", 10));WPML no filtra las consultas SQL de bajo nivel. Se devolverán todos los productos en todos los idiomas.
| Bien | Mal |
|---|---|
<?php $products = get_posts(array('post_type' => 'product', 'suppress_filters' => 0)); ?><?php | <?php $products = get_posts(array('post_type' => 'product')); ?>suppress_filters se establecerá en true de forma predeterminada, lo que impedirá el filtrado de idiomas. $products = $wpdb->get_results($wpdb->prepare(“SELECT * FROM {$wpdb->posts} WHERE post_type='product' ORDER BY ID DESC LIMIT %d", 10));WPML no filtra las consultas SQL de bajo nivel. Se devolverán todos los productos en todos los idiomas. |
Una vez que haya cargado los productos correctos, no necesita preocuparse por los idiomas al mostrarlos. Cada producto vendrá con sus propios campos personalizados, con información en el idioma correcto.
Plantillas de productos Multilingual Ready
Dado que las traducciones se almacenan en productos separados, mostrar un solo producto en un sitio multilingüe de WooCommerce no debería requerir un esfuerzo especial.
Opciones de pago multimoneda
Su sitio multilingüe de WooCommerce también puede incluir múltiples monedas. Para muchos sitios no estadounidenses, admitir múltiples monedas es una característica muy importante. Por ejemplo, muchos sitios europeos necesitarán cobrar en euros, libras esterlinas y dólares estadounidenses. Los sitios de Europa del Este a menudo requieren el rublo ruso, mientras que los sitios asiáticos necesitan una variedad de otras monedas diferentes.
La compatibilidad multimoneda está incluida en WPML Multilingual & Multicurrency for WooCommerce. Para permitir a los visitantes cambiar entre monedas, su tema debe incluir un selector de moneda opcional.
Puede mostrar un selector de moneda ya sea mediante una llamada PHP o insertando un shortcode.
<?php do_action('currency_switcher', array('format' => '%name (%symbol)')); ?>[currency_switcher]Para obtener más información, consulte el tutorial sobre multimoneda para WooCommerce. Tenga en cuenta que solo verá el selector de moneda en el front-end si el sitio utiliza múltiples monedas.
Hacer que su sitio de WooCommerce sea compatible con RTL
Los temas de WooCommerce deben seguir las mismas pautas de compatibilidad con temas RTL que cualquier otro tema de WordPress. Debe crear un archivo rtl.css, con las reglas CSS para la visualización RTL.
Manejar diferentes longitudes de texto en distintos idiomas mediante el diseño fluido
Cuando cree su tema de WooCommerce Multilingual Ready, recuerde que algunos textos serán más largos en ciertos idiomas y más cortos en otros. A veces, ni siquiera podrá realizar pruebas, porque sus usuarios finales serán quienes traduzcan.
Por ejemplo, observe estos dos bloques de productos.
CSS optimizado para texto corto en inglés
Los textos más largos en español no caben en el espacio
Como regla general, pruebe su tema con textos que sean el doble de largos y la mitad de cortos. Esto le cubrirá en la mayoría de los casos. La mejor manera de manejar textos de diferentes tamaños es permitiendo diseños fluidos. Los diseños fluidos permitirán que los elementos cambien de tamaño y ocupen el área que necesiten. Crear una plantilla elegante con tamaños fluidos no es trivial, pero hacerlo ayuda a evitar fallos visuales.
¿Listo para empezar?
Si es desarrollador y crea temas o extensiones para WooCommerce, sin duda debería unirse a nuestro programa Go Global. Recibirá una cuenta de desarrollador de WPML gratuita y obtendrá soporte prioritario de nuestro equipo de compatibilidad. La tienda de WooCommerce es solo una (gran) sección de su tema. Le recomendamos que lea nuestra guía sobre cómo lograr la compatibilidad con WPML para sus temas.
¿Crea sitios para clientes? Compre WPML y comience a crear sitios multilingües para WooCommerce y más allá.