{"id":55065,"date":"2022-11-03T07:00:36","date_gmt":"2022-11-03T14:00:36","guid":{"rendered":"https:\/\/dhblog.dream.press\/blog\/?p=55065"},"modified":"2025-05-26T12:59:06","modified_gmt":"2025-05-26T19:59:06","slug":"criacao-de-tema-filho-do-woocommerce","status":"publish","type":"post","link":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/criacao-de-tema-filho-do-woocommerce\/","title":{"rendered":"Como Criar um Tema Filho WooCommerce"},"content":{"rendered":"\n<p>Vamos supor que voc\u00ea tem uma <a href=\"https:\/\/wordpress.org\/plugins\/woocommerce\/\" target=\"_blank\" rel=\"noopener\">loja WooCommerce<\/a> funcionando.<\/p>\n\n\n\n<p>Se voc\u00ea est\u00e1 usando o tema oficial <a href=\"https:\/\/woocommerce.com\/storefront\/\" target=\"_blank\" rel=\"noopener\">Storefront<\/a>, ele pode at\u00e9 parecer bastante profissional. No entanto, voc\u00ea ainda pode querer personalizar a apar\u00eancia da sua loja WooCommerce para corresponder \u00e0 sua vis\u00e3o.<\/p>\n\n\n\n<p>A melhor solu\u00e7\u00e3o \u00e9 frequentemente criar um <a href=\"https:\/\/www.dreamhost.com\/blog\/pt\/por-que-voce-precisa-de-um-tema-filho\/\" target=\"_blank\" rel=\"noopener\">tema filho<\/a> WooCommerce. Isso porque um tema filho permite que voc\u00ea fa\u00e7a altera\u00e7\u00f5es no seu tema original sem edit\u00e1-lo diretamente. Ele simplifica o processo de personaliza\u00e7\u00e3o da apar\u00eancia da sua loja e elimina riscos potenciais ao seu tema e loja.<\/p>\n\n\n\n<p>Neste artigo, vamos ver como voc\u00ea pode estilizar sua loja WooCommerce usando temas. Em seguida, mostraremos como criar seu pr\u00f3prio tema filho em apenas cinco passos. Vamos come\u00e7ar!<\/p>\n\n\n\n<h2 id=\"h-a-quick-look-at-woocommerce-themes\" class=\"wp-block-heading\"><b>Uma Vis\u00e3o R\u00e1pida dos Temas WooCommerce<\/b><\/h2>\n\n\n\n<p>Com o lan\u00e7amento do <a href=\"https:\/\/wordpress.org\/plugins\/woocommerce\/\" target=\"_blank\" rel=\"noopener\">plugin WooCommerce<\/a> em 2011, o WordPress tornou-se a plataforma de e-commerce mais popular. Atualmente, o WooCommerce \u00e9 usado para alimentar <a href=\"https:\/\/trends.builtwith.com\/shop\" target=\"_blank\" rel=\"noopener\">25% de todas as lojas online<\/a>, tornando-o 6% mais popular que seu concorrente mais pr\u00f3ximo.<\/p>\n\n\n\n<p><style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }<\/style><\/p>\n\n\n\n<div class=\"embed-container\"><iframe data-src=\"https:\/\/www.youtube.com\/embed\/2TVJi7IpwxA\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" data-load-mode=\"1\"><\/iframe><\/div>\n\n\n\n<p>Um dos elementos que tornou o WooCommerce t\u00e3o bem-sucedido \u00e9 a facilidade de criar uma loja \u00fanica com o m\u00ednimo de esfor\u00e7o. No entanto, isso por si s\u00f3 n\u00e3o explica a popularidade da plataforma.<\/p>\n\n\n\n<p>Outro fator enorme no sucesso do WooCommerce \u00e9 as possibilidades de personaliza\u00e7\u00e3o quase infinitas que ele oferece. Quando combinado com o tema certo, voc\u00ea tem acesso a muita flexibilidade de design.<\/p>\n\n\n\n<p>WooCommerce \u00e9 compat\u00edvel com quase todos os <a href=\"https:\/\/www.dreamhost.com\/blog\/pt\/como-encontrar-temas-wp\/\" target=\"_blank\" rel=\"noopener\">temas WordPress<\/a>. No entanto, a maioria deles n\u00e3o ser\u00e1 otimizada para lidar com as caracter\u00edsticas \u00fanicas do plugin.<\/p>\n\n\n\n<p>Felizmente, <a href=\"https:\/\/woocommerce.com\/storefront\/\" target=\"_blank\" rel=\"noopener\">o tema Storefront<\/a> \u00e9 uma excelente op\u00e7\u00e3o. Este \u00e9 o tema oficial do WooCommerce, desenvolvido especificamente para integrar com o plugin. Ele tem uma apar\u00eancia atraente logo de in\u00edcio, com um design simples e limpo que coloca o foco nos seus produtos:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"1200\" height=\"765\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/woocommerce-storefront-theme.jpg\" alt=\"o tema WooCommerce Storefront\" class=\"wp-image-37882 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/11\/woocommerce-storefront-theme.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/woocommerce-storefront-theme-300x191.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/woocommerce-storefront-theme-1024x653.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/woocommerce-storefront-theme-768x490.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/11\/woocommerce-storefront-theme-600x383.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/11\/woocommerce-storefront-theme-750x478.jpg.webp 750w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/woocommerce-storefront-theme-100x64.jpg 100w\" data-sizes=\"(max-width: 1200px) 100vw, 1200px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1200px; --smush-placeholder-aspect-ratio: 1200\/765;\" \/><\/figure><\/div>\n\n\n<p>Este design b\u00e1sico tamb\u00e9m faz do Storefront uma base ideal para personaliza\u00e7\u00e3o. \u00c9 aqui que os temas filhos se tornam \u00fateis, o que veremos a seguir.<\/p>\n\n\n\n<h2 id=\"h-why-you-might-want-to-create-a-woocommerce-child-theme\" class=\"wp-block-heading\"><b>Por Que Voc\u00ea Pode Querer Criar um Tema Filho WooCommerce<\/b><\/h2>\n\n\n\n<p>Se voc\u00ea dedicou algum tempo para ler sobre o WordPress, provavelmente j\u00e1 se deparou com temas filhos antes.<\/p>\n\n\n\n<p>Em resumo, um tema filho come\u00e7a como uma c\u00f3pia de outro tema, que \u00e9 conhecido como \u2018tema principal\u2019. Voc\u00ea pode ent\u00e3o fazer altera\u00e7\u00f5es no tema filho e test\u00e1-las sem editar o tema principal diretamente. Isso \u00e9 importante porque alterar o tema original pode resultar em erros irrevers\u00edveis e at\u00e9 danos ao seu site.<\/p>\n\n\n\n<p>Voc\u00ea pode criar um tema filho porque deseja usar outro tema como base, em vez de ter que construir um novo tema inteiramente do zero. Alternativamente, voc\u00ea pode querer fazer apenas algumas altera\u00e7\u00f5es menores na marca ou na est\u00e9tica geral de um tema. O c\u00e9u realmente \u00e9 o limite, dependendo de quanto tempo voc\u00ea est\u00e1 disposto a dedicar ao projeto.<\/p>\n\n\n\n<p>Quando se trata de WooCommerce, a maioria dos temas filhos s\u00e3o baseados em Storefront:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"1999\" height=\"1286\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/woocommerce-theme-store.jpg\" alt=\"Op\u00e7\u00f5es de temas filhos Storefront na loja oficial WooCommerce\" class=\"wp-image-37883 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/11\/woocommerce-theme-store.jpg.webp 1999w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/woocommerce-theme-store-300x193.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/woocommerce-theme-store-1024x659.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/woocommerce-theme-store-768x494.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/woocommerce-theme-store-1536x988.jpg 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/11\/woocommerce-theme-store-600x386.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/11\/woocommerce-theme-store-750x482.jpg.webp 750w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/woocommerce-theme-store-100x64.jpg 100w\" data-sizes=\"(max-width: 1999px) 100vw, 1999px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1999px; --smush-placeholder-aspect-ratio: 1999\/1286;\" \/><\/figure><\/div>\n\n\n<p>Voc\u00ea pode baixar v\u00e1rias op\u00e7\u00f5es de temas filhos do <a href=\"https:\/\/woocommerce.com\/product-category\/themes\/storefront-child-theme-themes\/\" target=\"_blank\" rel=\"noopener\">loja oficial WooCommerce<\/a> ou de outros <a href=\"https:\/\/themeforest.net\/category\/wordpress\/ecommerce\/woocommerce\" target=\"_blank\" rel=\"noopener\">sites como ThemeForest<\/a>. No entanto, \u00e9 poss\u00edvel que nenhum dos temas filhos existentes atenda \u00e0s suas necessidades, ou voc\u00ea pode simplesmente querer criar uma apar\u00eancia \u00fanica. Al\u00e9m disso, voc\u00ea pode n\u00e3o querer gastar dinheiro em um tema premium se sentir que poderia fazer melhor por conta pr\u00f3pria.<\/p>\n\n\n\n<p>Em <a href=\"https:\/\/woocommerce.com\/2015\/07\/why-child-themes-matter\/\" target=\"_blank\" rel=\"noopener\">um post no blog oficial do WooCommerce<\/a>, os desenvolvedores do plugin discutem a principal motiva\u00e7\u00e3o por tr\u00e1s do uso de um tema filho para sua loja online:<\/p>\n\n\n\n<p>\u201cO objetivo com nossos pr\u00f3prios temas secund\u00e1rios de Storefront \u00e9 entregar uma experi\u00eancia de loja perfeita para o seu nicho espec\u00edfico. Ap\u00f3s instalar o <a href=\"https:\/\/woocommerce.com\/products\/galleria\/\" target=\"_blank\" rel=\"noopener\">Galleria<\/a>, e sem alterar nenhuma configura\u00e7\u00e3o, voc\u00ea instantaneamente tem uma loja adequada para vender itens de moda de alta qualidade. Com o <a href=\"https:\/\/woocommerce.com\/products\/proshop\/\" target=\"_blank\" rel=\"noopener\">ProShop<\/a>, voc\u00ea pode rapidamente montar uma loja de esportes estilosa.\u201d<\/p>\n\n\n\n<p>O processo real de <a href=\"https:\/\/www.dreamhost.com\/blog\/install-wordpress-child-theme\/\" target=\"_blank\" rel=\"noopener\">criar um tema filho<\/a> \u00e9 o mesmo, quer voc\u00ea esteja fazendo um especificamente para WooCommerce ou para um site WordPress mais geral. No entanto, voc\u00ea precisar\u00e1 manter o prop\u00f3sito da sua loja em mente enquanto personaliza seu tema filho. Um site de e-commerce requer uma filosofia de design diferente de um blog, afinal. Vamos ver como esse processo se parece na pr\u00e1tica!<\/p>\n\n\n\n<h2 id=\"h-how-to-create-a-woocommerce-child-theme-in-5-steps\" class=\"wp-block-heading\"><b>Como Criar um Tema Filho WooCommerce (Em 5 Passos)<\/b><\/h2>\n\n\n\n<p>Agora, vamos gui\u00e1-lo sobre como criar um tema filho WooCommerce. Neste exemplo, vamos criar um tema b\u00e1sico que usa Storefront como seu tema principal, embora voc\u00ea possa usar qualquer tema como base.<\/p>\n\n\n\n<p>Vamos mostrar como o processo funciona come\u00e7ando do zero. No entanto, se voc\u00ea quiser pular algumas dessas etapas e ir direto para a personaliza\u00e7\u00e3o do seu site, voc\u00ea tamb\u00e9m pode baixar e instalar um <a href=\"https:\/\/github.com\/stuartduff\/storefront-child-theme\" target=\"_blank\" rel=\"noopener\">tema filho Storefront de exemplo<\/a>.<\/p>\n\n\n\n<p>Finalmente, recomendamos fortemente <a href=\"https:\/\/www.dreamhost.com\/blog\/back-up-wordpress-website\/\" target=\"_blank\" rel=\"noopener\">criar um backup do seu site<\/a> antes de prosseguir. Isso manter\u00e1 sua loja segura caso algo quebre durante o processo de desenvolvimento.<\/p>\n\n\n\n<p>Tamb\u00e9m \u00e9 inteligente <a href=\"https:\/\/www.dreamhost.com\/blog\/pt\/guia-do-iniciante-para-staging-de-websites\/\" target=\"_blank\" rel=\"noopener\">usar um ambiente de staging<\/a> para criar e ajustar seu tema secund\u00e1rio. Depois de tomar essas precau\u00e7\u00f5es de seguran\u00e7a, voc\u00ea pode prosseguir para o primeiro passo!<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-step-1-make-a-folder-for-your-woocommerce-child-theme\"><b>Passo 1: Crie uma Pasta para o Seu Tema Filho WooCommerce<\/b><\/h3>\n\n\n\n<p>A primeira coisa que voc\u00ea precisa fazer \u00e9 criar a pasta que conter\u00e1 seu tema. Se voc\u00ea est\u00e1 adicionando o tema filho diretamente em um site existente, a melhor maneira de fazer isso \u00e9 <a href=\"https:\/\/help.dreamhost.com\/hc\/en-us\/articles\/115000675027\" target=\"_blank\" rel=\"noopener\">via SFTP<\/a>. Voc\u00ea pode fazer isso usando um aplicativo gratuito como <a href=\"https:\/\/filezilla-project.org\/\" target=\"_blank\" rel=\"noopener\">FileZilla<\/a>.<\/p>\n\n\n\n<p>Uma vez que voc\u00ea tenha o programa funcionando, fa\u00e7a login no seu site com suas credenciais de hospedagem. Em seguida, voc\u00ea precisar\u00e1 navegar at\u00e9 a pasta <i>wp-content\/themes\/<\/i>. \u00c9 aqui que os temas do seu site est\u00e3o instalados.<\/p>\n\n\n\n<p>Tudo o que voc\u00ea precisa fazer \u00e9 criar uma nova pasta dentro desta:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"1086\" height=\"488\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/wordpress-themes-folder-via-ftp.png\" alt=\"a pasta de temas do WordPress no cliente FTP\" class=\"wp-image-37886 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/11\/wordpress-themes-folder-via-ftp.png.webp 1086w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/wordpress-themes-folder-via-ftp-300x135.png 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/wordpress-themes-folder-via-ftp-1024x460.png 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/wordpress-themes-folder-via-ftp-768x345.png 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/11\/wordpress-themes-folder-via-ftp-600x270.png.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/11\/wordpress-themes-folder-via-ftp-750x337.png.webp 750w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/wordpress-themes-folder-via-ftp-100x45.png 100w\" data-sizes=\"(max-width: 1086px) 100vw, 1086px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1086px; --smush-placeholder-aspect-ratio: 1086\/488;\" \/><\/figure><\/div>\n\n\n<p>Ao criar um tema filho, \u00e9 melhor dar um nome que reflita o tema principal. Por exemplo, estamos criando um tema filho para o Storefront, ent\u00e3o nomearemos nossa pasta como \u201cstorefront-child\u201d.<\/p>\n\n\n\n<p>A primeira coisa que voc\u00ea precisar\u00e1 criar e colocar nesta pasta \u00e9 um arquivo de texto simples chamado <a href=\"https:\/\/www.dreamhost.com\/blog\/pt\/guia-para-funcoes-do-wordpress\/\" target=\"_blank\" rel=\"noopener\"><i>functions.php<\/i><\/a>. Este \u00e9 um arquivo principal importante que ajuda a ditar como seu site parece e se comporta. No entanto, a maioria dos <a href=\"https:\/\/developer.wordpress.org\/themes\/advanced-topics\/child-themes\/\" target=\"_blank\" rel=\"noopener\">temas secund\u00e1rios<\/a> pode usar as fun\u00e7\u00f5es contidas no arquivo do tema principal e n\u00e3o precisam de um pr\u00f3prio.<\/p>\n\n\n\n<p>Por esse motivo, este arquivo pode ser deixado em branco por enquanto. Simplesmente crie um arquivo de texto com o nome <i>functions.php<\/i>, e salve-o na pasta do seu tema filho:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"1108\" height=\"564\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/wordpress-child-theme-location-via-ftp-client.png\" alt=\"Localiza\u00e7\u00e3o de tema filho do WordPress no cliente FTP\" class=\"wp-image-37884 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/11\/wordpress-child-theme-location-via-ftp-client.png.webp 1108w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/wordpress-child-theme-location-via-ftp-client-300x153.png 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/wordpress-child-theme-location-via-ftp-client-1024x521.png 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/wordpress-child-theme-location-via-ftp-client-768x391.png 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/11\/wordpress-child-theme-location-via-ftp-client-600x305.png.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/11\/wordpress-child-theme-location-via-ftp-client-750x382.png.webp 750w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/wordpress-child-theme-location-via-ftp-client-100x51.png 100w\" data-sizes=\"(max-width: 1108px) 100vw, 1108px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1108px; --smush-placeholder-aspect-ratio: 1108\/564;\" \/><\/figure><\/div>\n\n\n<p>Seu tema agora est\u00e1 quase pronto para ser ativado e usado. Primeiro, no entanto, ele precisar\u00e1 de uma folha de estilo.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-step-2-create-your-child-theme-s-stylesheet\"><b>Passo 2: Crie a Folha de Estilos do Seu Tema Filho<\/b><\/h3>\n\n\n\n<p>O pr\u00f3ximo arquivo que voc\u00ea precisa criar \u00e9 a <a href=\"https:\/\/wordpress.org\/support\/article\/css\/\" target=\"_blank\" rel=\"noopener\">Folha de Estilos em Cascata (CSS)<\/a> do seu tema. Esse arquivo define os estilos que ser\u00e3o aplicados \u00e0s p\u00e1ginas e ao conte\u00fado do seu site. Em outras palavras, ele permite que voc\u00ea especifique a apar\u00eancia de elementos individuais no seu site. Quando as pessoas falam em atualizar estilos, geralmente est\u00e3o se referindo a atualizar o arquivo CSS do site.<\/p>\n\n\n\n<p>Seu tema principal j\u00e1 conter\u00e1 uma folha de estilos, mas o CSS do tema filho pode ser usado para substituir esses estilos. Vamos ver mais tarde como isso funciona exatamente.<\/p>\n\n\n\n<p>Por enquanto, voc\u00ea s\u00f3 precisa criar o arquivo CSS. Para fazer isso, adicione novamente um arquivo de texto \u00e0 sua pasta <i>wp-content\/themes\/storefront-child<\/i> (ou qualquer nome que tenha usado para o seu pr\u00f3prio tema filho). Este deve ser chamado de <i>style.css<\/i>:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"864\" height=\"450\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/wordpress-child-theme.png\" alt=\"Localiza\u00e7\u00e3o do tema filho do WordPress no cliente FTP\" class=\"wp-image-37885 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/11\/wordpress-child-theme.png.webp 864w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/wordpress-child-theme-300x156.png 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/wordpress-child-theme-768x400.png 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/11\/wordpress-child-theme-600x313.png.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/11\/wordpress-child-theme-750x391.png.webp 750w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/wordpress-child-theme-100x52.png 100w\" data-sizes=\"(max-width: 864px) 100vw, 864px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 864px; --smush-placeholder-aspect-ratio: 864\/450;\" \/><\/figure><\/div>\n\n\n<p>Voc\u00ea tamb\u00e9m precisar\u00e1 adicionar algumas informa\u00e7\u00f5es b\u00e1sicas. Copie e cole o seguinte trecho no seu novo arquivo <i>style.css<\/i>:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">\/*\nTheme Name: Storefront Child\nTheme URI: http:\/\/example.com\/storefront-child\/\nDescription: Meu primeiro tema filho WooCommerce\nAuthor: Seu Nome\nAuthor URI: http:\/\/example.com\nVersion: 1.0.0\nLicense: GNU General Public License v2 ou posterior\nLicense URI: http:\/\/www.gnu.org\/licenses\/gpl-2.0.html\n*\/<\/pre>\n\n\n\n<p>Estes s\u00e3o os detalhes sobre o seu tema que voc\u00ea ver\u00e1 ao visualiz\u00e1-lo em um diret\u00f3rio de temas ou no seu painel do WordPress. Sinta-se \u00e0 vontade para substituir os dados do espa\u00e7o reservado por informa\u00e7\u00f5es mais espec\u00edficas para voc\u00ea e seu tema.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-step-3-configure-the-child-theme-to-inherit-the-parent-theme-s-styles\"><b>Etapa 3: Configurar o Tema Filho para Herdar os Estilos do Tema Principal<\/b><\/h3>\n\n\n\n<p>Como j\u00e1 mencionamos, voc\u00ea vai querer que seu tema filho use os estilos padr\u00e3o do tema principal. No entanto, voc\u00ea tamb\u00e9m precisar\u00e1 substituir os estilos que deseja alterar. Isso pode parecer complexo \u2014 e <a href=\"https:\/\/www.dreamhost.com\/blog\/why-you-should-still-learn-css\/\" target=\"_blank\" rel=\"noopener\">CSS pode realmente ser complicado<\/a> \u2014 mas, em sua ess\u00eancia, o tema filho sempre usar\u00e1 os estilos do tema principal, a menos que contenha especificamente uma substitui\u00e7\u00e3o.<\/p>\n\n\n\n<p>Por exemplo, vamos supor que o seu tema principal define o estilo para os elementos de cabe\u00e7alho h1 como 20px e vermelho. Se o arquivo <i>style.css<\/i> do tema filho n\u00e3o contiver uma entrada para cabe\u00e7alhos H1, ent\u00e3o o estilo do tema principal ser\u00e1 aplicado a todo o conte\u00fado H1. No entanto, se adicionarmos um estilo H1 \u00e0 folha de estilo do tema filho que defina esses cabe\u00e7alhos como 18px e azul, ele substituir\u00e1 as dire\u00e7\u00f5es do tema principal.<\/p>\n\n\n\n<p>Adicionar essa funcionalidade ao seu tema filho \u00e9 realmente muito simples. Tudo o que voc\u00ea precisa fazer \u00e9 referenciar o seu tema principal na folha de estilo do seu tema filho.<\/p>\n\n\n\n<p>Adicione simplesmente o seguinte trecho ap\u00f3s a informa\u00e7\u00e3o que voc\u00ea colou anteriormente no arquivo <i>style.css<\/i>:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">Template: storefront<\/pre>\n\n\n\n<p>Este c\u00f3digo define o tema principal e garantir\u00e1 que o seu tema filho use os estilos do Storefront onde voc\u00ea n\u00e3o especificou uma substitui\u00e7\u00e3o. Se voc\u00ea est\u00e1 criando um filho para um tema diferente, pode simplesmente usar o nome da pasta dele.<\/p>\n\n\n\n<div class=\"article-newsletter article-newsletter--gradient\">\n\n\n<h2>Get Content Delivered Straight to Your Inbox<\/h2><p>Subscribe now to receive all the latest updates, delivered directly to your inbox.<\/p><form class=\"nwsl-form\" id=\"newsletter_block_\" novalidate><div class=\"messages\"><\/div><div class=\"form-group\"><label for=\"input_newsletter_block_\"><input type=\"email\"name=\"email\"id=\"input_newsletter_block_\"placeholder=\"Enter your email address\"novalidatedisabled=\"disabled\"\/><\/label><button type=\"submit\"class=\"btn btn--brand\"disabled=\"disabled\"><span>Sign Me Up!<\/span><svg width=\"21\" height=\"14\" viewBox=\"0 0 21 14\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n<path d=\"M13.8523 0.42524L12.9323 1.34521C12.7095 1.56801 12.7132 1.9304 12.9404 2.14865L16.7241 5.7823H0.5625C0.251859 5.7823 0 6.03416 0 6.3448V7.6573C0 7.96794 0.251859 8.2198 0.5625 8.2198H16.7241L12.9405 11.8535C12.7132 12.0717 12.7095 12.4341 12.9323 12.6569L13.8523 13.5769C14.072 13.7965 14.4281 13.7965 14.6478 13.5769L20.8259 7.39879C21.0456 7.17913 21.0456 6.82298 20.8259 6.60327L14.6477 0.42524C14.4281 0.205584 14.0719 0.205584 13.8523 0.42524Z\" fill=\"white\"\/>\n<\/svg>\n<\/button><\/div><\/form><\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-step-4-activate-the-child-theme\"><b>Passo 4: Ativar o Tema Filho<\/b><\/h3>\n\n\n\n<p>Neste ponto, seu tema filho est\u00e1 tecnicamente pronto. Ele est\u00e1 configurado para funcionar no seu site, ent\u00e3o vamos ativ\u00e1-lo e ver como fica.<\/p>\n\n\n\n<p>V\u00e1 at\u00e9 <i>Apar\u00eancia &gt; Temas<\/i> no seu painel do WordPress, e voc\u00ea ver\u00e1 seu tema filho j\u00e1 instalado:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"1200\" height=\"408\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/woocommerce-child-theme.jpg\" alt=\"ativando seu tema filho WooCommerce no WordPress\" class=\"wp-image-37881 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/11\/woocommerce-child-theme.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/woocommerce-child-theme-300x102.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/woocommerce-child-theme-1024x348.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/woocommerce-child-theme-768x261.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/11\/woocommerce-child-theme-600x204.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/11\/woocommerce-child-theme-750x255.jpg.webp 750w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/woocommerce-child-theme-100x34.jpg 100w\" data-sizes=\"(max-width: 1200px) 100vw, 1200px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1200px; --smush-placeholder-aspect-ratio: 1200\/408;\" \/><\/figure><\/div>\n\n\n<p>Selecione <i>Ativar<\/i> para torn\u00e1-lo o tema atual do seu site. Agora voc\u00ea pode visualiz\u00e1-lo pelo frontend:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"1200\" height=\"630\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/woocommerce-child-theme-preview-store.jpg\" alt=\"editando seu tema filho WooCommerce\" class=\"wp-image-37879 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/11\/woocommerce-child-theme-preview-store.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/woocommerce-child-theme-preview-store-300x158.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/woocommerce-child-theme-preview-store-1024x538.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/woocommerce-child-theme-preview-store-768x403.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/11\/woocommerce-child-theme-preview-store-600x315.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/11\/woocommerce-child-theme-preview-store-750x394.jpg.webp 750w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/woocommerce-child-theme-preview-store-100x53.jpg 100w\" data-sizes=\"(max-width: 1200px) 100vw, 1200px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1200px; --smush-placeholder-aspect-ratio: 1200\/630;\" \/><\/figure><\/div>\n\n\n<p>Como voc\u00ea pode ver, ele parece exatamente igual ao tema original neste momento. Enquanto o tema filho est\u00e1 ativo, tudo o que ele faz \u00e9 incorporar os estilos do seu tema principal. Para personalizar sua apar\u00eancia, voc\u00ea precisar\u00e1 ser criativo com a folha de estilos do seu tema filho.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-step-5-add-styles-to-the-child-theme\"><b>Etapa 5: Adicionar Estilos ao Tema Filho<\/b><\/h3>\n\n\n\n<p>Finalmente, \u00e9 hora de come\u00e7ar a estilizar o seu tema filho. A maneira de fazer isso depende de voc\u00ea, da sua criatividade e de como voc\u00ea deseja que sua loja pare\u00e7a. No entanto, vamos passar por um exemplo do que voc\u00ea pode fazer.<\/p>\n\n\n\n<p>Para ilustrar como editar o seu tema filho funciona, vamos mudar a apar\u00eancia dos bot\u00f5es da nossa loja. No momento, eles aparecem cinza com texto preto, mas poder\u00edamos atualizar esse estilo para torn\u00e1-los mais destacados:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"1200\" height=\"530\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/woocommerce-child-theme-preview.jpg\" alt=\"editando seu tema filho WooCommerce\" class=\"wp-image-37880 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/11\/woocommerce-child-theme-preview.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/woocommerce-child-theme-preview-300x133.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/woocommerce-child-theme-preview-1024x452.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/woocommerce-child-theme-preview-768x339.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/11\/woocommerce-child-theme-preview-600x265.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/11\/woocommerce-child-theme-preview-750x331.jpg.webp 750w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/woocommerce-child-theme-preview-100x44.jpg 100w\" data-sizes=\"(max-width: 1200px) 100vw, 1200px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1200px; --smush-placeholder-aspect-ratio: 1200\/530;\" \/><\/figure><\/div>\n\n\n<p>Abra novamente o arquivo <i>style.css<\/i> do seu tema filho, e adicione o seguinte c\u00f3digo ap\u00f3s o \u00faltimo <i>*\/<\/i> no cabe\u00e7alho do arquivo:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">a.button,\nbutton.button,\ninput.button,\n#review_form #submit {\nbackground: pink;\ncolor: red;\n}<\/pre>\n\n\n\n<p>Se voc\u00ea salvar seu arquivo e visualiz\u00e1-lo no frontend agora, ver\u00e1 a mudan\u00e7a em a\u00e7\u00e3o. Os bot\u00f5es agora ser\u00e3o rosa vibrante com texto vermelho:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"1200\" height=\"532\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/editing-woocommerce-child-theme.jpg\" alt=\"editando seu tema filho WooCommerce\" class=\"wp-image-37878 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/11\/editing-woocommerce-child-theme.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/editing-woocommerce-child-theme-300x133.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/editing-woocommerce-child-theme-1024x454.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/editing-woocommerce-child-theme-768x340.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/11\/editing-woocommerce-child-theme-600x266.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/11\/editing-woocommerce-child-theme-750x333.jpg.webp 750w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/editing-woocommerce-child-theme-100x44.jpg 100w\" data-sizes=\"(max-width: 1200px) 100vw, 1200px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1200px; --smush-placeholder-aspect-ratio: 1200\/532;\" \/><\/figure><\/div>\n\n\n<p>Voc\u00ea tamb\u00e9m pode fazer altera\u00e7\u00f5es nos <a href=\"https:\/\/www.dreamhost.com\/blog\/pt\/modelos-e-partes-de-modelos-do-wordpress\/\" target=\"_blank\" rel=\"noopener\">arquivos de template do seu tema<\/a>. Voc\u00ea s\u00f3 precisar\u00e1 copiar o arquivo de template que deseja alterar, como <i>header.php<\/i>, da sua pasta de tema principal para a pasta do seu tema filho.<\/p>\n\n\n\n<p>Entretanto, voc\u00ea tamb\u00e9m precisar\u00e1 fazer algumas altera\u00e7\u00f5es para especificar qual fun\u00e7\u00e3o o WordPress usa para <a href=\"https:\/\/developer.wordpress.org\/themes\/advanced-topics\/child-themes\/#adding-template-files\" target=\"_blank\" rel=\"noopener\">referenciar os arquivos de template<\/a>. Isso requer o uso da fun\u00e7\u00e3o <span style=\"font-family: 'courier new', courier, monospace;\">get_stylesheet_directory();<\/span> em vez de <span style=\"font-family: 'courier new', courier, monospace;\">get_template_directory()<\/span> para referenciar seus templates.<\/p>\n\n\n\n<p>Para saber mais sobre como fazer isso, voc\u00ea pode ler sobre todos os <a href=\"https:\/\/docs.woocommerce.com\/document\/template-structure\/\" target=\"_blank\" rel=\"noopener\">modelos que o WooCommerce utiliza<\/a>.<\/p>\n\n\n\n<p>Neste ponto, voc\u00ea criou um tema filho do WooCommerce! Claro, h\u00e1 muito mais que voc\u00ea pode fazer, mas agora voc\u00ea sabe como come\u00e7ar a mexer. Recomendamos que voc\u00ea <a href=\"https:\/\/www.dreamhost.com\/blog\/pt\/aprender-css\/\" target=\"_blank\" rel=\"noopener\">aprimore seus conhecimentos em CSS<\/a> para aproveitar ao m\u00e1ximo o seu estilo!<\/p>\n\n\n\n<h2 id=\"h-create-a-woocommerce-child-theme\" class=\"wp-block-heading\"><b>Crie um Tema Filho WooCommerce<\/b><\/h2>\n\n\n\n<p><a href=\"https:\/\/wordpress.org\/plugins\/woocommerce\/\" target=\"_blank\" rel=\"noopener\">WooCommerce<\/a> facilita a cria\u00e7\u00e3o de uma loja online, e voc\u00ea pode at\u00e9 alterar sua apar\u00eancia usando <a href=\"https:\/\/woocommerce.com\/storefront\/\" target=\"_blank\" rel=\"noopener\">o tema Storefront<\/a> ou um dos muitos <a href=\"https:\/\/themeforest.net\/category\/wordpress\/ecommerce\/woocommerce\" target=\"_blank\" rel=\"noopener\">temas personalizados<\/a>.<\/p>\n\n\n\n<p>Entretanto, voc\u00ea n\u00e3o precisa depender da criatividade de outras pessoas. Criar seu pr\u00f3prio tema filho WooCommerce n\u00e3o \u00e9 t\u00e3o dif\u00edcil quanto voc\u00ea pode pensar, e isso lhe d\u00e1 quase total controle sobre a apar\u00eancia e funcionalidade da sua loja.<\/p>\n\n\n\n<p>Feliz venda!<\/p>\n\n\n\n\n<div\n\tclass=\"article-cta-shared article-cta-small\"\n>\n    <div class=\"tr-img-wrap-outer jsLoading\"><img decoding=\"async\" class=\"js-img-lazy \" src=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/themes\/blog2018\/assets\/img\/lazy-loading-transparent.webp\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/themes\/blog2018\/assets\/img\/article-small-ad-cta-placeholder.webp 1x, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/themes\/blog2018\/assets\/img\/article-small-ad-cta-placeholder-x2.webp 2x\"  alt=\"Ad background image\" \/><\/div>\n\n\n\n\n  <div class=\"content-btm\">\n    <h2\n      class=\"h2--md\"\n    >\n      Sua Loja Merece Hospedagem WooCommerce\n    <\/h2>\n    <p\n      class=\"p--md\"\n    >\n      Venda qualquer coisa, em qualquer lugar, a qualquer hora na maior plataforma de com\u00e9rcio eletr\u00f4nico do mundo.\n    <\/p>\n\n            <a\n            href=\"https:\/\/www.dreamhost.com\/pt\/hosting\/loja-online\/\"\n                        class=\"btn btn--white-outline btn--sm btn--round\"\n                                    target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            >\n                            Veja Planos                    <\/a>\n\n  <\/div>\n<\/div>\n\n","protected":false},"excerpt":{"rendered":"<p>Vamos supor que voc\u00ea tenha uma loja WooCommerce em funcionamento. Se voc\u00ea estiver usando o tema oficial Storefront, ela pode at\u00e9 parecer bastante profissional. No entanto, voc\u00ea ainda pode querer personalizar a apar\u00eancia da sua loja WooCommerce para corresponder \u00e0 sua vis\u00e3o. A melhor solu\u00e7\u00e3o \u00e9 muitas vezes criar um tema filho WooCommerce. Isso porque um filho [\u2026]<\/p>\n","protected":false},"author":1062,"featured_media":37875,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_yoast_wpseo_metadesc":"","toc_headlines":"[[\"h-a-quick-look-at-woocommerce-themes\",\"Uma Vis\u00e3o R\u00e1pida dos Temas WooCommerce\"],[\"h-why-you-might-want-to-create-a-woocommerce-child-theme\",\"Por Que Voc\u00ea Pode Querer Criar um Tema Filho WooCommerce\"],[\"h-how-to-create-a-woocommerce-child-theme-in-5-steps\",\"Como Criar um Tema Filho WooCommerce (Em 5 Passos)\"],[\"h-create-a-woocommerce-child-theme\",\"Crie um Tema Filho WooCommerce\"]]","hide_toc":false,"footnotes":""},"categories":[14391,14421,14409],"tags":[],"class_list":["post-55065","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutoriais-pt","category-vendas-online-pt","category-wordpress-pt"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v26.3 (Yoast SEO v27.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Como Criar um Tema Filho WooCommerce - DreamHost Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www-dev.dreamhost.com\/blog\/pt\/criacao-de-tema-filho-do-woocommerce\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Como Criar um Tema Filho WooCommerce\" \/>\n<meta property=\"og:description\" content=\"Vamos supor que voc\u00ea tenha uma loja WooCommerce em funcionamento. Se voc\u00ea estiver usando o tema oficial Storefront, ela pode at\u00e9 parecer bastante profissional. No entanto, voc\u00ea ainda pode querer personalizar a apar\u00eancia da sua loja WooCommerce para corresponder \u00e0 sua vis\u00e3o. A melhor solu\u00e7\u00e3o \u00e9 muitas vezes criar um tema filho WooCommerce. Isso porque um filho [\u2026]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www-dev.dreamhost.com\/blog\/pt\/criacao-de-tema-filho-do-woocommerce\/\" \/>\n<meta property=\"og:site_name\" content=\"DreamHost Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/DreamHost\/\" \/>\n<meta property=\"article:published_time\" content=\"2022-11-03T14:00:36+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-05-26T19:59:06+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/WooCommerce-Child-Themes-Feature.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"900\" \/>\n\t<meta property=\"og:image:height\" content=\"598\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Jason Cosper\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@dreamhost\" \/>\n<meta name=\"twitter:site\" content=\"@dreamhost\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jason Cosper\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"11 minutes\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Como Criar um Tema Filho WooCommerce - DreamHost Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/criacao-de-tema-filho-do-woocommerce\/","og_locale":"en_US","og_type":"article","og_title":"Como Criar um Tema Filho WooCommerce","og_description":"Vamos supor que voc\u00ea tenha uma loja WooCommerce em funcionamento. Se voc\u00ea estiver usando o tema oficial Storefront, ela pode at\u00e9 parecer bastante profissional. No entanto, voc\u00ea ainda pode querer personalizar a apar\u00eancia da sua loja WooCommerce para corresponder \u00e0 sua vis\u00e3o. A melhor solu\u00e7\u00e3o \u00e9 muitas vezes criar um tema filho WooCommerce. Isso porque um filho [\u2026]","og_url":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/criacao-de-tema-filho-do-woocommerce\/","og_site_name":"DreamHost Blog","article_publisher":"https:\/\/www.facebook.com\/DreamHost\/","article_published_time":"2022-11-03T14:00:36+00:00","article_modified_time":"2025-05-26T19:59:06+00:00","og_image":[{"width":900,"height":598,"url":"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/WooCommerce-Child-Themes-Feature.jpg","type":"image\/jpeg"}],"author":"Jason Cosper","twitter_card":"summary_large_image","twitter_creator":"@dreamhost","twitter_site":"@dreamhost","twitter_misc":{"Written by":"Jason Cosper","Est. reading time":"11 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/criacao-de-tema-filho-do-woocommerce\/#article","isPartOf":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/criacao-de-tema-filho-do-woocommerce\/"},"author":{"name":"Jason Cosper","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/person\/2273b8bf7336df78f6d99a89c17253c4"},"headline":"Como Criar um Tema Filho WooCommerce","datePublished":"2022-11-03T14:00:36+00:00","dateModified":"2025-05-26T19:59:06+00:00","mainEntityOfPage":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/criacao-de-tema-filho-do-woocommerce\/"},"wordCount":2080,"publisher":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#organization"},"image":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/criacao-de-tema-filho-do-woocommerce\/#primaryimage"},"thumbnailUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/WooCommerce-Child-Themes-Feature.jpg","articleSection":["Tutoriais","Vendas Online","WordPress"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/criacao-de-tema-filho-do-woocommerce\/","url":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/criacao-de-tema-filho-do-woocommerce\/","name":"Como Criar um Tema Filho WooCommerce - DreamHost Blog","isPartOf":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/criacao-de-tema-filho-do-woocommerce\/#primaryimage"},"image":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/criacao-de-tema-filho-do-woocommerce\/#primaryimage"},"thumbnailUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/WooCommerce-Child-Themes-Feature.jpg","datePublished":"2022-11-03T14:00:36+00:00","dateModified":"2025-05-26T19:59:06+00:00","breadcrumb":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/criacao-de-tema-filho-do-woocommerce\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www-dev.dreamhost.com\/blog\/pt\/criacao-de-tema-filho-do-woocommerce\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/criacao-de-tema-filho-do-woocommerce\/#primaryimage","url":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/WooCommerce-Child-Themes-Feature.jpg","contentUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/11\/WooCommerce-Child-Themes-Feature.jpg","width":900,"height":598,"caption":"how to create a WooCommerce child theme"},{"@type":"BreadcrumbList","@id":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/criacao-de-tema-filho-do-woocommerce\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/dhblog.dream.press\/blog\/"},{"@type":"ListItem","position":2,"name":"Como Criar um Tema Filho WooCommerce"}]},{"@type":"WebSite","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#website","url":"https:\/\/www-dev.dreamhost.com\/blog\/","name":"DreamHost Blog","description":"","publisher":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www-dev.dreamhost.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#organization","name":"DreamHost","url":"https:\/\/www-dev.dreamhost.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/dhblog.dream.press\/blog\/wp-content\/uploads\/2019\/01\/dh_logo-blue-2.png","contentUrl":"https:\/\/dhblog.dream.press\/blog\/wp-content\/uploads\/2019\/01\/dh_logo-blue-2.png","width":1200,"height":168,"caption":"DreamHost"},"image":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/DreamHost\/","https:\/\/x.com\/dreamhost","https:\/\/www.instagram.com\/dreamhost\/","https:\/\/www.linkedin.com\/company\/dreamhost\/","https:\/\/www.youtube.com\/user\/dreamhostusa"]},{"@type":"Person","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/person\/2273b8bf7336df78f6d99a89c17253c4","name":"Jason Cosper","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/02\/IMG_4807-scaled.jpeg","url":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/02\/IMG_4807-scaled.jpeg","contentUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/02\/IMG_4807-scaled.jpeg","caption":"Jason Cosper"},"description":"Jason is DreamHost\u2019s WordPress Product Advocate, based out of Bakersfield, CA. He is currently working on making our DreamPress product even better. In his free time, he likes to curl up on the couch and watch scary movies with his wife Sarah and three very small dogs. Follow him on Twitter.","url":"https:\/\/www-dev.dreamhost.com\/blog\/author\/jasoncosper\/"}]}},"lang":"pt","translations":{"pt":55065,"es":37888,"en":37872,"pl":52883,"de":54934,"uk":54949,"ru":55033,"it":67883,"fr":69356,"nl":69388},"pll_sync_post":[],"_links":{"self":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/55065","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/users\/1062"}],"replies":[{"embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/comments?post=55065"}],"version-history":[{"count":4,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/55065\/revisions"}],"predecessor-version":[{"id":62295,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/55065\/revisions\/62295"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/media\/37875"}],"wp:attachment":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/media?parent=55065"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/categories?post=55065"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/tags?post=55065"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}