Um tema WooCommerce com blocos para cada tela da loja
Crie a página de produto, a grade da loja, o carrinho e o checkout com blocos no editor que o WordPress oferece, e depois comece a partir de um demo que chega como uma loja funcional. O WooCommerce cuida dos pedidos, e o Canvas cuida do design.
Atualizado em
24 blocos para as quatro telas que vendem
Cada parte de uma loja WooCommerce que o comprador vê é um bloco com painel de configurações, então você pode movê-la, mudar o estilo ou deixá-la de fora sem tocar em nenhum arquivo de modelo.
A página de produto: 11 blocos
Monte o layout de um único produto bloco por bloco, ou comece com um dos modelos incluídos e mova as peças.
Product Images Incluído em qualquer plano
Exibe a imagem em destaque do produto do WooCommerce e miniaturas opcionais da galeria.
Product Gallery Linker Incluído em qualquer plano
Uma faixa de miniaturas que move o carrossel da galeria de produtos para a imagem em que você clicar.
Product Price Incluído em qualquer plano
Exibe o preço do produto WooCommerce, incluindo o preço promocional e a formatação de moeda.
Product Rating Incluído em qualquer plano
Exibe a classificação em estrelas e, opcionalmente, o número de avaliações do produto WooCommerce atual.
Product Meta Incluído em qualquer plano
Exibe o cartão de metadados do produto: SKU, categorias e tags.
Product Short Description Incluído em qualquer plano
Exibe a descrição curta do produto com a marcação de parágrafos preservada.
Variation Swatches Incluído em qualquer plano
Bolinhas de cor ou botões em formato de pílula que escolhem a variação de um produto variável.
Add to Cart Incluído em qualquer plano
Exibe o formulário de adicionar ao carrinho do WooCommerce para o produto atual, com campo de quantidade opcional.
Product Tabs Incluído em qualquer plano
Exibe as abas de dados do produto do WooCommerce: Descrição, Informações adicionais e Avaliações.
Product Share Incluído em qualquer plano
Exibe o cartão “Compartilhar:” com links de compartilhamento em redes sociais para o produto WooCommerce atual.
Related Products Incluído em qualquer plano
Exibe uma grade de produtos WooCommerce relacionados ao produto atual. Só aparece em modelos de produto individual.
A loja e seu catálogo 5 blocos
Grades, carrosséis, cartões de categoria e um filtro de preço, cada um podendo buscar itens de uma categoria, de uma tag, de uma pesquisa ou de uma lista selecionada manualmente.
Produtos Incluído em qualquer plano
Exiba produtos do WooCommerce em layout de grade ou lista. Filtre por origem, categoria, tag e ordenação.
Product Categories Incluído em qualquer plano
Exibe as categorias de produtos do WooCommerce como uma grade responsiva de cards com miniaturas, nomes e contagem de produtos.
Product Carousel Incluído em qualquer plano
Exibe produtos do WooCommerce em um carrossel owl-carousel rolável. Oferece suporte a reprodução automática, setas de navegação, pontos e pontos de quebra responsivos.
Store Price Filter Incluído em qualquer plano
Um controle de faixa de preço com duas alças que filtra diretamente a grade de produtos.
Conference Tickets Incluído em qualquer plano
Caixas de preços para uma categoria de produtos de ingresso, cada uma com um seletor de quantidade e um link dinâmico para adicionar ao carrinho.
O carrinho 3 blocos
Uma página de carrinho que você desenha, com o upsell que os compradores realmente veem.
Cart Table Incluído em qualquer plano
Exibe a tabela de carrinho do WooCommerce com itens, quantidades e totais.
Totais do carrinho Incluído em qualquer plano
Exibe o painel de totais do carrinho WooCommerce, incluindo subtotal, frete e botão de finalizar compra.
Cross-Sells Incluído em qualquer plano
Exibe produtos de venda cruzada do carrinho atual do WooCommerce. Só é renderizado quando o carrinho está ativo e contém produtos de venda cruzada.
O checkout 3 blocos
O formulário de cobrança, a revisão do pedido e os avisos que informam o comprador sobre o que acabou de acontecer.
Checkout Billing Incluído em qualquer plano
Exibe o formulário de endereço de cobrança do checkout do WooCommerce.
Checkout Order Review Incluído em qualquer plano
Exibe o resumo de revisão do pedido do checkout do WooCommerce, com os itens e os totais.
WooCommerce Notices Incluído em qualquer plano
Exibe avisos do WooCommerce: erros, mensagens de sucesso ou avisos informativos.
Em outras partes da loja 2 blocos
Blocos de loja que ficam fora das quatro telas acima.
Lista de desejos Incluída em qualquer plano
Os produtos salvos pelo cliente, com preço, estoque e um botão de adicionar ao carrinho. Coloque-o na página escolhida em Opções do tema, em Wishlist.
Botão da lista de desejos Incluído em qualquer plano
Salva o produto atual na lista de desejos do comprador. Use-o em modelos de produto e cards de produto.
Loja de roupas
Um catálogo de moda com páginas de coleções, produtos variáveis e um carrinho no cabeçalho que mostra a quantidade de itens.
Temas de e-commerce
Móveis
Vendas e aluguel em um só catálogo, com a grade de produtos e a página de produto individual, ambos montados como blocos.
Temas de design de interiores
Vinho
Uma loja de vinhos em que o design valoriza as fotos dos produtos e as páginas da loja ficam em segundo plano.
Temas para restauranteTrês das 21 lojas demo. Cada parte que um comprador vê nestas páginas é um bloco com um painel de configurações por trás dele.
O que os compradores fazem, sem recarregar a página
Três comportamentos de loja que normalmente exigem um plugin cada fazem parte da integração.
Amostras de cores dos atributos
Atribua uma cor a um termo de atributo de produto no painel, e produtos variáveis mostram bolinhas de cor ou botões no lugar de um menu suspenso, para que o cliente escolha a variação pelo visual.
Adicionar ao carrinho com AJAX
Ao adicionar um produto por meio de uma grade, de um carrossel ou de uma sobreposição em card, o carrinho é atualizado na própria página. O cliente continua na página que estava navegando, e o mini carrinho do cabeçalho mantém a contagem.
Estilos de cartão de produto
Padronize todas as imagens do catálogo em um mesmo formato para que os cards fiquem alinhados, escolha se as imagens extras da galeria aparecem ao passar o mouse ou se rodam como apresentação de slides, e defina o que a sobreposição ao passar o mouse oferece: comprar, visualização rápida ou ambos.
18 modelos de loja no Editor do site
Cada tela da loja é um modelo de bloco que você abre, edita e restaura no Editor do site, da mesma forma que edita qualquer outro modelo de bloco.
Layouts de produto individual
Organize a página de produto no layout padrão, com um resumo fixo que acompanha a galeria, em lista, com um design de cores em destaque, com um design de loja, em um dos dois layouts de galeria com vínculos personalizados, ou com uma variação com barra lateral à esquerda, à direita ou em duas barras laterais.
Layouts de páginas de loja
Defina o layout da própria loja em largura total, com barra lateral à esquerda, com barra lateral à direita ou com barras laterais dos dois lados, para que filtros e categorias fiquem onde o seu catálogo precisa.
Arquivos, carrinho e finalização de compra
O arquivo da loja, os arquivos de categorias de produtos, o carrinho e a finalização da compra vêm cada um como modelo, junto com as substituições de modelo do WooCommerce que o tema oferece.
Os modelos de loja aparecem na lista woocommerce do painel Modelos do próprio Editor do site, junto com os modelos do Canvas, e são redefinidos na mesma tela.
Atribua um layout a cada produto pelo editor ou defina o padrão de toda a loja em Opções do tema. Um modelo que você personaliza no Editor do site continua personalizado nas atualizações, e o Canvas informa quais foram alterados após uma atualização.
39 opções de loja, 5 abas
Padrões para toda a loja, do catálogo, da página de produto, do carrinho e do checkout, e do mini carrinho do cabeçalho, além de um modo catálogo para lojas que aceitam consultas. Produtos por página, paginação, formato da imagem do produto, imagens extras da galeria e a sobreposição do cartão ficam todos aqui, e um bloco que define uma dessas opções por conta própria continua tendo prioridade na página em que for inserido.
- Catálogo: produtos por linha em cada tamanho de tela, formato da imagem, comportamento ao passar o mouse, o selo de promoção
- Página de produto: o que a tela de produto individual exibe e uma barra fixa de adicionar ao carrinho
- Carrinho e checkout: uma barra de progresso do frete grátis e um checkout sem distrações
- Mini carrinho: o que o carrinho do cabeçalho faz quando o comprador adiciona algo
- Modo catálogo: ocultar preços e o botão de compra, exibir um botão de consulta
Opções de loja que ajudam você a vender Modo catálogo A lista de desejos
Cinco interruptores do WooCommerce
O WooCommerce carrega scripts e folhas de estilo em todas as páginas de um site, inclusive nas que não vendem nada. Estes cinco interruptores desfazem isso, e cada um pode ser revertido.
- Remove o JavaScript do WooCommerce em páginas que não exibem conteúdo da loja
- Desative o rastreamento de atribuição de pedidos caso não leia esses relatórios
- Impede o polling do script de fragmentos do carrinho a cada carregamento de página
- Remova a biblioteca de força de senha fora das páginas de conta e de finalização da compra
- Não carregar a biblioteca Select2 incluída fora das páginas de finalização de compra e da conta
21 demos são lojas WooCommerce funcionando
Produtos, categorias, atributos, um carrinho e uma finalização de compra, importados e prontos para receber um pedido de teste. Visualize qualquer um deles ao vivo antes de decidir.
Demo Bag Store, prévia ao vivo (abre em uma nova aba)
Loja e e-commerce · 9 páginas · O que ele instala: os blocos e tipos de conteúdo do demo Bag Store
Demo CanvasRoam, prévia ao vivo (abre em uma nova aba)
Portfólio e pessoal · 10 páginas · O que é instalado: os blocos e tipos de conteúdo do demo CanvasRoam
Demo Christmas Store, prévia ao vivo (abre em uma nova aba)
Loja e e-commerce · 6 páginas
Demo Clothing Store, prévia ao vivo (abre em uma nova aba)
Loja e e-commerce · 19 páginas · O que ele instala: os blocos e tipos de conteúdo do demo Clothing Store
Demo Conference, prévia ao vivo (abre em uma nova aba)
Eventos e casamentos · 25 páginas · O que será instalado: os blocos e tipos de conteúdo do demo Conference
Demo Drone, prévia ao vivo (abre em uma nova aba)
Loja e e-commerce · 12 páginas
Demo eBook, prévia ao vivo (abre em uma nova aba)
Loja e e-commerce · 9 páginas
Demo Fashion Shop, prévia ao vivo (abre em uma nova aba)
Loja e e-commerce · 25 páginas
Demo Fashion Store, prévia ao vivo (abre em uma nova aba)
Loja e e-commerce · 16 páginas
Demo FORM 2026, prévia ao vivo (abre em uma nova aba)
Eventos e casamentos · 14 páginas · O que será instalado: os blocos e tipos de conteúdo do demo FORM 2026
Demo Furniture, prévia ao vivo (abre em uma nova aba)
Loja e e-commerce · 12 páginas
Demo Game of Canvas, prévia ao vivo (abre em uma nova aba)
Entretenimento e comunidade · 12 páginas · O que ele instala: os blocos e tipos de conteúdo do demo Game of Canvas
Demo Illustrator, prévia ao vivo (abre em uma nova aba)
Portfólio e pessoal · 7 páginas · O que é instalado: os blocos e tipos de conteúdo do demo Illustrator
Demo Jewelry Boutique, prévia ao vivo (abre em uma nova aba)
Loja e e-commerce · 17 páginas
Demo Podcasts, prévia ao vivo (abre em uma nova aba)
Blog e revista · 13 páginas · O que ele instala: os blocos e tipos de conteúdo do demo Podcasts
Demo Pottery Shop, prévia ao vivo (abre em uma nova aba)
Loja e e-commerce · 12 páginas
Demo Speaker Store, prévia ao vivo (abre em uma nova aba)
Loja e e-commerce · 11 páginas
Demo Supplement Store, prévia ao vivo (abre em uma nova aba)
Loja e e-commerce · 13 páginas
Demo Wildroot Gear, prévia ao vivo (abre em uma nova aba)
Loja e e-commerce · 14 páginas · O que ele instala: os blocos e tipos de conteúdo do demo Wildroot Gear
Demo Wine Estate, prévia ao vivo (abre em uma nova aba)
Comida e bebida · 10 páginas · O que ela instala: os blocos e tipos de conteúdo do demo Wine EstateSuas páginas de loja são reaproveitadas, não duplicadas
O medo comum ao importar o design de uma loja é acordar com dois checkouts. O Canvas mapeia as páginas do WooCommerce do demo para as que seu site já tem.
A tela de importação por onde passa todo demo de loja, com a reversão que desfaz a importação.
Uma loja, um carrinho, um checkout
O importador encontra suas páginas existentes do WooCommerce e aponta os menus e links da demo diretamente para elas.
Reversível
Tudo o que a importação criou é registrado, então uma única tela remove o conteúdo do demo e restaura as opções e os menus que existiam antes.
Produtos incluídos
Produtos, categorias, atributos e cores de amostra de demonstração chegam com o design, para que o catálogo fique correto enquanto você substitui pelos seus próprios.
Ou apenas as páginas
Ao escolher a importação somente das páginas, você leva as páginas do demo sem as Opções do tema, sem os menus e sem a página inicial.
Vendendo com o Canvas
O que os donos de loja perguntam primeiro. A documentação detalha cada bloco e opção.
Ainda preciso do plugin WooCommerce?
Sim, o Canvas adiciona blocos, modelos e opções sobre o WooCommerce, sem substituir nada dele. Pedidos, produtos, impostos, frete e pagamentos continuam no WooCommerce, onde suas outras extensões esperam encontrá-los. Se você começar com um demo de loja, o Assistente de configuração instala e ativa o WooCommerce para você antes de a importação ser executada.
Importar um demo de loja vai substituir minhas páginas de loja e de finalização de compra?
Não. O importador do Canvas reaproveita as páginas do WooCommerce que o seu site já tem, então não aparece uma segunda página de loja, carrinho, finalização de compra ou conta. Seus produtos e pedidos existentes permanecem intactos.
Posso combinar estes com os blocos próprios do WooCommerce?
Sim, os blocos de loja do Canvas são blocos registrados comuns, então eles convivem com os blocos do WooCommerce e os blocos nativos no mesmo modelo e na mesma página, e você substitui um por vez sem precisar se comprometer com um layout inteiro.
Como funcionam as amostras de cor?
Dê uma cor a um termo de atributo de produto na área administrativa do WordPress e o bloco Canvas Variation Swatches exibe esse atributo como bolinhas coloridas ou botões em formato de pílula, no lugar de um menu suspenso, na página do produto e nos modelos que o usam.
Os blocos de loja estão incluídos no meu plano?
Sim: todos os 24 blocos de loja do Canvas são blocos premium, e todos os planos incluem todos os blocos premium. Não há complemento de loja nem plano de e-commerce à parte. Outros temas costumam separar isso: a visualização rápida é um recurso do Astra Pro, e o OceanWP vende seu plugin eCommerce Pro como um produto separado.
Foque na loja, não na parte técnica
Todos os planos incluem todos os 24 blocos de loja, todos os 18 modelos de loja e todos os 21 demos de loja. Não há um nível de e-commerce para o qual você precise fazer upgrade.