{"id":5632,"date":"2018-02-26T14:21:51","date_gmt":"2018-02-26T17:21:51","guid":{"rendered":"https:\/\/www.kinghost.com.br\/wiki\/?post_type=article&#038;p=5632"},"modified":"2022-08-01T09:10:03","modified_gmt":"2022-08-01T12:10:03","slug":"woocommerce-imagens-do-produto","status":"publish","type":"article","link":"https:\/\/king.host\/wiki\/artigo\/woocommerce-imagens-do-produto\/","title":{"rendered":"Adicionar imagens do produto na loja WooCommerce"},"content":{"rendered":"\n<p><em>Precisa adicionar as imagens do produto em sua loja WooCommerce? Entenda como as imagens s\u00e3o tratadas dentro do seu ecommerce e saiba como gerenci\u00e1-las.<\/em><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Tipos_de_imagens_no_WooCommerce\"><\/span>Tipos de imagens no WooCommerce<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>O Woo usa 3 tipos de imagens para produtos. Elas s\u00e3o usadas em diferentes locais cada qual com sua finalidade.<\/p>\n\n\n\n<p>\u27a1 <strong>Imagem do Produto<\/strong> &#8211; \u00c9 a imagem principal do produto na p\u00e1gina de detalhes do produto;<br>\u27a1 <strong>Galeria de imagens do Produto<\/strong> &#8211; S\u00e3o imagens de tamanho m\u00e9dio que aparecem na p\u00e1gina de produtos, p\u00e1gina de categorias, produtos relacionados, entre outros &#8211; essas imagens tamb\u00e9m v\u00e3o compor as varia\u00e7\u00f5es do sua produto na p\u00e1gina do produto (frente e verso de uma blusa, por exemplo);<br>\u27a1 <strong>Thumbnails do Produto<\/strong> &#8211; S\u00e3o imagens pequenas usadas no Carrinho, Widgets e demais locais com imagens pequenas.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Adicionar_imagens_do_produto\"><\/span>Adicionar imagens do produto<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>O gerenciamento de imagens do produto fica dentro da edi\u00e7\u00e3o de produto. Para editar ou adicionar um novo produto voc\u00ea deve ir no menu <strong>Produtos<\/strong> em seu painel administrativo. A localiza\u00e7\u00e3o das ferramentas fica ao lado direito da edi\u00e7\u00e3o do produto (veja o destaque na imagem abaixo).<\/p>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"https:\/\/www.kinghost.com.br\/wiki\/wp-content\/uploads\/2018\/02\/woo-imagens.png\" v-on:click=\"toggle_modal\"><img data-original=\"https:\/\/www.kinghost.com.br\/wiki\/wp-content\/uploads\/2018\/02\/woo-imagens.png\" alt=\"WooCommerce - Imagens do produto\"\/><\/a><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Adicionar_a_imagem_principal_do_produto\"><\/span>Adicionar a imagem principal do produto<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Dentro da edi\u00e7\u00e3o do produto, na caixa <strong>Imagem do Produto<\/strong>, clique em <span style=\"color: #0073aa;\"><u>Definir imagem do produto<\/u><\/span>.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"https:\/\/www.kinghost.com.br\/wiki\/wp-content\/uploads\/2018\/02\/woo-imagem-destaque.png\" v-on:click=\"toggle_modal\"><img decoding=\"async\" data-src=\"https:\/\/www.kinghost.com.br\/wiki\/wp-content\/uploads\/2018\/02\/woo-imagem-destaque.png\" alt=\"\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" class=\"lazyload\" \/><noscript><img decoding=\"async\" src=\"https:\/\/www.kinghost.com.br\/wiki\/wp-content\/uploads\/2018\/02\/woo-imagem-destaque.png\" alt=\"\"\/><\/noscript><\/a><\/figure>\n\n\n\n<p>Surgir\u00e1 uma janela id\u00eantica a de adicionar imagens padr\u00f5es do WordPress. Como o funcionamento \u00e9 o mesmo, basta buscar imagens em sua biblioteca de m\u00eddia do site ou fazer o upload de uma imagem presente em seu computador. Assim que a imagem for carregada ela ser\u00e1 exibida na box de <em>Imagem do Produto<\/em>. Ao clicar em <span class=\"button is-light\">Publicar<\/span> ou <span class=\"button is-light\">Atualizar<\/span> a imagem j\u00e1 ser\u00e1 exibida na p\u00e1gina do produto.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"https:\/\/www.kinghost.com.br\/wiki\/wp-content\/uploads\/2018\/02\/woo-imagem-produto.png\" v-on:click=\"toggle_modal\"><img decoding=\"async\" data-src=\"https:\/\/www.kinghost.com.br\/wiki\/wp-content\/uploads\/2018\/02\/woo-imagem-produto.png\" alt=\"\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" class=\"lazyload\" \/><noscript><img decoding=\"async\" src=\"https:\/\/www.kinghost.com.br\/wiki\/wp-content\/uploads\/2018\/02\/woo-imagem-produto.png\" alt=\"\"\/><\/noscript><\/a><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Adicionar_uma_galeria_de_imagens_do_produto\"><\/span>Adicionar uma galeria de imagens do produto<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Esse recurso \u00e9 bem \u00fatil quando voc\u00ea precisa mostrar v\u00e1rias fotos do seu produto, exibindo, por exemplo, cores diferentes e \u00e2ngulos diferentes do produto. O processo de adi\u00e7\u00e3o dessas imagens \u00e9 basicamente o mesmo. Basta ir na caixa <strong>Galeria de imagens do produto<\/strong> e clicar em <span style=\"color: #0073aa;\"><u>Adicionar galeria de imagens do produto<\/u><\/span> para come\u00e7ar a adicionar imagens. Voc\u00ea pode organizar a ordem de exibi\u00e7\u00e3o simplesmente movendo as imagens entre si.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"https:\/\/www.kinghost.com.br\/wiki\/wp-content\/uploads\/2018\/02\/woo-galeria-imagens-produto.png\" v-on:click=\"toggle_modal\"><img decoding=\"async\" data-src=\"https:\/\/www.kinghost.com.br\/wiki\/wp-content\/uploads\/2018\/02\/woo-galeria-imagens-produto.png\" alt=\"\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" class=\"lazyload\" \/><noscript><img decoding=\"async\" src=\"https:\/\/www.kinghost.com.br\/wiki\/wp-content\/uploads\/2018\/02\/woo-galeria-imagens-produto.png\" alt=\"\"\/><\/noscript><\/a><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Visualizando_as_imagens_no_site\"><\/span>Visualizando as imagens no site<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><a href=\"https:\/\/www.kinghost.com.br\/wiki\/wp-content\/uploads\/2018\/02\/woo-exemplo-imagens.gif\"><img decoding=\"async\" data-src=\"https:\/\/www.kinghost.com.br\/wiki\/wp-content\/uploads\/2018\/02\/woo-exemplo-imagens.gif\" alt=\"\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" class=\"lazyload\" \/><noscript><img decoding=\"async\" src=\"https:\/\/www.kinghost.com.br\/wiki\/wp-content\/uploads\/2018\/02\/woo-exemplo-imagens.gif\" alt=\"\"\/><\/noscript><\/a><\/figure><\/div>\n\n\n\n<p>Acesse a p\u00e1gina do produto que acabou de editar para verificar as adi\u00e7\u00f5es de imagens. No nosso exemplo acima ficou da seguinte forma:<br><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Como_alterar_ou_remover_essas_imagens\"><\/span>Como alterar ou remover essas imagens<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>\u00c9 bem simples. Para remover a imagem principal, em <em>Imagem do produto<\/em> clique em <span style=\"color: #0073aa;\"><u>Remover imagem do produto<\/u><\/span>. Para remover imagens da galeria, basta deixar o cursor do mouse em cima da imagem que quer remover e clicar no \u00edcone de exclus\u00e3o.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"https:\/\/www.kinghost.com.br\/wiki\/wp-content\/uploads\/2018\/02\/woo-apagar-da-galeria.png\" v-on:click=\"toggle_modal\"><img decoding=\"async\" data-src=\"https:\/\/www.kinghost.com.br\/wiki\/wp-content\/uploads\/2018\/02\/woo-apagar-da-galeria.png\" alt=\"\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" class=\"lazyload\" \/><noscript><img decoding=\"async\" src=\"https:\/\/www.kinghost.com.br\/wiki\/wp-content\/uploads\/2018\/02\/woo-apagar-da-galeria.png\" alt=\"\"\/><\/noscript><\/a><\/figure>\n\n\n\n<p><small>Documenta\u00e7\u00e3o oficial do WooCommerce: <a href=\"https:\/\/docs.woocommerce.com\/document\/adding-product-images-and-galleries\/\" target=\"_blank\" rel=\"noopener noreferrer\">https:\/\/docs.woocommerce.com\/document\/adding-product-images-and-galleries\/<\/a><\/small><\/p>\n","protected":false},"author":9,"featured_media":0,"menu_order":2,"comment_status":"closed","ping_status":"closed","template":"","format":"standard","article-category":[22],"article-tag":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/king.host\/wiki\/wp-json\/wp\/v2\/article\/5632"}],"collection":[{"href":"https:\/\/king.host\/wiki\/wp-json\/wp\/v2\/article"}],"about":[{"href":"https:\/\/king.host\/wiki\/wp-json\/wp\/v2\/types\/article"}],"author":[{"embeddable":true,"href":"https:\/\/king.host\/wiki\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/king.host\/wiki\/wp-json\/wp\/v2\/comments?post=5632"}],"version-history":[{"count":13,"href":"https:\/\/king.host\/wiki\/wp-json\/wp\/v2\/article\/5632\/revisions"}],"predecessor-version":[{"id":22965,"href":"https:\/\/king.host\/wiki\/wp-json\/wp\/v2\/article\/5632\/revisions\/22965"}],"wp:attachment":[{"href":"https:\/\/king.host\/wiki\/wp-json\/wp\/v2\/media?parent=5632"}],"wp:term":[{"taxonomy":"article-category","embeddable":true,"href":"https:\/\/king.host\/wiki\/wp-json\/wp\/v2\/article-category?post=5632"},{"taxonomy":"article-tag","embeddable":true,"href":"https:\/\/king.host\/wiki\/wp-json\/wp\/v2\/article-tag?post=5632"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}