Os produtos do WooCommerce são “posts” personalizados do WordPress com campos personalizados. Eles são organizados usando as taxonomias personalizadas “categorias de produto” e “tags de produto”. Aqui, mostraremos a você como funcionam os sites multilíngues do WooCommerce e do que os seus temas do WooCommerce precisam para torná-los Multilingual Ready (prontos para multilíngue).
Como os sites multilíngues do WooCommerce funcionam
Quando um site usa o WPML, um idioma é atribuído a cada elemento de conteúdo. Isso significa que cada produto, categoria e tag terá um atributo de idioma. As traduções são salvas no banco de dados como produtos separados, vinculados entre si usando a tabela de idiomas do WPML. Os produtos traduzidos compartilham as mesmas imagens e têm seus campos separados com textos no idioma correto.
Os administradores do site podem traduzir de forma conveniente usando a tabela de tradução de produtos do WPML. Dessa forma, eles podem se concentrar em traduzir os textos necessários, sem precisarem se preocupar em como as traduções são armazenadas no banco de dados.
Como as traduções são separadas no banco de dados, também é fácil exibir sites multilíngues do WooCommerce. Na verdade, se você usar as APIs do WordPress e do WooCommerce, seu tema já pode ser Multilingual Ready. Com um pouco de teste e possivelmente pequenas edições, você pode alcançar total compatibilidade multilíngue e aproveitar novos mercados.
Plugins obrigatórios para sites multilíngues do WooCommerce
Para executar sites multilíngues do WooCommerce, os seguintes plugins são necessários:
- WooCommerce
- Plugin de núcleo do WPML e os add-ons WPML Tradução de Strings e Tradução de mídia do WPML
- WPML Multilingual & Multicurrency for WooCommerce
O WPML e todos os plugins relacionados, incluindo o WPML Multilingual & Multicurrency for WooCommerce, vêm com o tipo de conta Multilingual CMS.
Textos codificados diretamente nos templates
Os arquivos do seu template exibem uma mistura de informações do produto e textos codificados diretamente. Por exemplo, a maioria dos templates incluirá o nome do produto e um link “Comprar”. O nome do produto vem do banco de dados, então você não precisa se preocupar em traduzi-lo.
Você deve se certificar de que todos os textos codificados diretamente sejam traduzíveis, usando GetText.
Bom
<p><?php _e('Similar products:', 'my-textdomain') ?></p><input type="button" name="buy-button" value="<?php esc_attr_e('Buy now!', 'my-textdomain') ?>" />No exemplo abaixo, “Similar products” e “Buy now!” não estão envolvidos em chamadas GetText.
Ruim
<p><?php echo 'Similar products:'; ?></p>
<input type="button" name="buy-button" value="Buy now!" />Bom
<p><?php _e('Similar products:', 'my-textdomain') ?></p><input type="button" name="buy-button" value="<?php esc_attr_e('Buy now!', 'my-textdomain') ?>" />Ruim
<p><?php echo 'Similar products:'; ?></p><input type="button" name="buy-button" value="Buy now!" />“Similar products” e “Buy now!” não estão envolvidos em chamadas GetText.
| Bom | Ruim |
|---|---|
<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” e “Buy now!” não estão envolvidos em chamadas GetText. |
Certifique-se de usar o textdomain do seu tema para todas as chamadas GetText.
Páginas do WooCommerce codificadas diretamente
Muitos temas de e-commerce incluem páginas especiais, como as páginas Carrinho ou Conta. O tema muitas vezes inclui links para essas páginas, aparecendo em todas as páginas do site.
Se você usar um menu do WordPress para esses links, estará tudo pronto. O WPML exibe um menu do WordPress diferente para cada idioma, de modo que os links para essas ‘páginas especiais’ serão diferentes, por idioma. No entanto, se você codificar esses links diretamente nos arquivos de template, precisará permitir que o WPML substitua os links por links para essas páginas no idioma correto.
A maneira certa de criar links para as páginas especiais do WooCommerce é usando as funções da API do WordPress e os IDs de página do WooCommerce. O WPML Multilingual & Multicurrency for WooCommerce filtra a chamada para get_option() com os IDs de página do WooCommerce. Ele retornará o ID da página no idioma atual.
Bom
<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>O “shop” é o slug da página no idioma padrão.
Ruim
<a href="<?php echo get_permalink(5) ?>"><?php _e('Shop page', 'my-textdomain') ?></a>O ID da “shop page” está codificado diretamente. Ele será diferente para sites diferentes e para idiomas diferentes.
<a href="/shop"><?php _e('Shop page', 'my-textdomain') ?></a>O URL da “shop page” está codificado diretamente. Ele será diferente para idiomas diferentes.
| Bom | Ruim |
|---|---|
<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>O “shop” é o slug da página no idioma padrão. | <a href="<?php echo get_permalink(5) ?>"><?php _e('Shop page', 'my-textdomain') ?></a>O ID da “shop page” está codificado diretamente. Ele será diferente para sites diferentes e para idiomas diferentes. <a href="/shop"><?php _e('Shop page', 'my-textdomain') ?></a>O URL da “shop page” está codificado diretamente. Ele será diferente para idiomas diferentes. |
Listagens de produtos Multilingual Ready
Se você usar os shortcodes do WooCommerce para exibir a listagem de produtos, estará tudo pronto. O WooCommerce carregará os produtos no idioma correto e os exibirá.
Se você preferir carregar os produtos manualmente, usando seu próprio código, certifique-se de estar usando a API do WordPress ou as chamadas da API do WooCommerce. Se você acessar o banco de dados diretamente, o WPML não filtrará a sua chamada e você receberá uma mistura de todos os produtos em todos os idiomas.
Bom
<?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 );
?>Ruim
<?php $products = get_posts(array('post_type' => 'product')); ?>O suppress_filters será definido como true (verdadeiro) por padrão, impedindo a filtragem de idiomas.
$products = $wpdb->get_results($wpdb->prepare(“SELECT * FROM {$wpdb->posts} WHERE post_type='product' ORDER BY ID DESC LIMIT %d", 10));O WPML não filtra consultas SQL de baixo nível. Todos os produtos em todos os idiomas serão retornados.
| Bom | Ruim |
|---|---|
<?php $products = get_posts(array('post_type' => 'product', 'suppress_filters' => 0)); ?><?php | <?php $products = get_posts(array('post_type' => 'product')); ?>O suppress_filters será definido como true (verdadeiro) por padrão, impedindo a filtragem de idiomas. $products = $wpdb->get_results($wpdb->prepare(“SELECT * FROM {$wpdb->posts} WHERE post_type='product' ORDER BY ID DESC LIMIT %d", 10));O WPML não filtra consultas SQL de baixo nível. Todos os produtos em todos os idiomas serão retornados. |
Depois de carregar os produtos certos, você não precisa se preocupar com os idiomas ao exibi-los. Cada produto virá com seus próprios campos personalizados, com informações no idioma correto.
Templates de produto Multilingual Ready
Como as traduções são armazenadas em produtos separados, exibir um único produto em um site multilíngue do WooCommerce não deve exigir esforço especial.
Opções de pagamento multimoeda
O seu site multilíngue do WooCommerce também pode incluir várias moedas. Para muitos sites não americanos, o suporte a várias moedas é um recurso muito importante. Por exemplo, muitos sites europeus precisarão cobrar em euros, libras esterlinas e dólares americanos. Os sites do Leste Europeu frequentemente exigem o rublo russo, enquanto os sites asiáticos precisam de uma variedade de outras moedas diferentes.
O suporte a multimoeda está incluído no WPML Multilingual & Multicurrency for WooCommerce. Para permitir que os visitantes alternem entre as moedas, o seu tema deve incluir um seletor de moedas opcional.
Você pode exibir um seletor de moedas usando uma chamada PHP ou inserindo um shortcode.
<?php do_action('currency_switcher', array('format' => '%name (%symbol)')); ?>[currency_switcher]Para mais informações, consulte o tutorial sobre multimoeda para o WooCommerce. Observe que você só verá o seletor de moedas no front-end se o site usar várias moedas.
Como tornar o seu site WooCommerce compatível com RTL
Os temas do WooCommerce precisam seguir as mesmas diretrizes de suporte a temas RTL que qualquer outro tema do WordPress. Você deve criar um arquivo rtl.css, com as regras CSS para exibição RTL.
Como lidar com diferentes comprimentos de texto em diferentes idiomas usando design fluido
Quando você criar o seu tema do WooCommerce Multilingual Ready, lembre-se de que alguns textos serão mais longos em determinados idiomas e mais curtos em outros. Às vezes, você nem conseguirá testar, porque os seus usuários finais é que farão a tradução.
Por exemplo, observe estes dois blocos de produtos.
CSS otimizado para texto curto em inglês
Textos mais longos em espanhol não cabem no espaço
Como regra geral, teste o seu tema com textos que sejam 2x mais longos e ½ mais curtos. Isso cobrirá a maioria dos casos. A melhor maneira de lidar com textos de tamanhos diferentes é permitindo layouts fluidos. Os layouts fluidos permitirão que os elementos sejam redimensionados e capturem a área de que precisam. Criar um template elegante com tamanhos fluidos não é trivial, mas fazer isso ajuda a evitar falhas visuais.
Pronto para começar?
Se você é um desenvolvedor que cria temas ou extensões para o WooCommerce, definitivamente deve participar do nosso programa Go Global. Você receberá uma conta de desenvolvedor do WPML complementar e obterá suporte prioritário da nossa equipe de compatibilidade. A loja do WooCommerce é apenas uma (grande) seção do seu tema. Você definitivamente deve ler o nosso guia sobre como alcançar a compatibilidade com o WPML para os seus temas.
Criando sites para clientes? Compre o WPML e comece a criar sites multilíngues para o WooCommerce e muito mais.