{"id":67838,"date":"2024-04-03T11:41:38","date_gmt":"2024-04-03T14:41:38","guid":{"rendered":"https:\/\/kinqsta.com\/pt\/?p=67838&#038;preview=true&#038;preview_id=67838"},"modified":"2024-04-08T04:03:22","modified_gmt":"2024-04-08T07:03:22","slug":"woocommerce-headless","status":"publish","type":"post","link":"https:\/\/kinqsta.com\/pt\/blog\/woocommerce-headless\/","title":{"rendered":"WooCommerce Headless: Da Configura\u00e7\u00e3o \u00e0 Implanta\u00e7\u00e3o na Kinsta"},"content":{"rendered":"<p>O <a href=\"https:\/\/kinqsta.com\/pt\/blog\/tutorial-woocommerce\/\">WooCommerce<\/a> \u00e9 um dos mais populares <a href=\"https:\/\/kinqsta.com\/pt\/blog\/plugin-wordpress\/\">plugins de WordPress<\/a> para a cria\u00e7\u00e3o de aplicativos de eCommerce. Al\u00e9m de usar o WooCommerce em um aplicativo tradicional de WordPress, voc\u00ea pode us\u00e1-lo como uma solu\u00e7\u00e3o headless.<\/p>\n<p>Este artigo ensina a criar um aplicativo WordPress headless com o <a href=\"https:\/\/kinqsta.com\/pt\/blog\/wordpress-react\/\">React<\/a> implantado na Kinsta.<\/p>\n<div><\/div><kinsta-auto-toc heading=\"Table of Contents\" exclude=\"last\" list-style=\"arrow\" selector=\"h2\" count-number=\"-1\"><\/kinsta-auto-toc>\n<h2>Introdu\u00e7\u00e3o ao WooCommerce headless<\/h2>\n<p>O termo &#8220;eCommerce headless&#8221; significa a separa\u00e7\u00e3o do backend (head) do frontend (body) de um aplicativo de eCommerce. A arquitetura headless passa solicita\u00e7\u00f5es entre as camadas de apresenta\u00e7\u00e3o (frontend) e as camadas de aplicativo (backend) de uma solu\u00e7\u00e3o de eCommerce por meio de <a href=\"https:\/\/kinqsta.com\/pt\/blog\/endpoint-api\/\">APIs<\/a>.<\/p>\n<p>As APIs definem as intera\u00e7\u00f5es entre os intermedi\u00e1rios, permitindo que as empresas alterem as camadas de apresenta\u00e7\u00e3o sem interferir na funcionalidade das camadas de aplicativos e atualizem, editem ou adicionem produtos a v\u00e1rias camadas de aplicativos.<\/p>\n<p>Em um aplicativo WooCommerce headless, a API do WooCommerce \u00e9 um intermedi\u00e1rio, fornecendo comunica\u00e7\u00e3o entre o frontend e o backend. Al\u00e9m dos benef\u00edcios mencionados acima, isso oferece suporte ao desenvolvimento de frontend flex\u00edvel e escal\u00e1vel, permitindo que voc\u00ea se concentre na cria\u00e7\u00e3o de interfaces de usu\u00e1rio envolventes e din\u00e2micas com pilhas de tecnologia modernas, como <a href=\"https:\/\/kinqsta.com\/pt\/blog\/wordpress-react\/\">React<\/a> ou <a href=\"https:\/\/kinqsta.com\/pt\/blog\/vue-js\/\">Vue<\/a>.<\/p>\n<p>Al\u00e9m disso, o uso do WooCommerce headless prepara a infraestrutura de eCommerce para o futuro, ajudando voc\u00ea a se adaptar \u00e0 evolu\u00e7\u00e3o das necessidades dos clientes e aos avan\u00e7os tecnol\u00f3gicos. Voc\u00ea pode atualizar sem esfor\u00e7o os componentes do frontend e, ao mesmo tempo, garantir a estabilidade e a confiabilidade da plataforma de backend do WooCommerce.<\/p>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/03\/traditional-cms.png\" alt=\"Aplicativo de eCommerce tradicional e aplicativo de WooCommerce headless.\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">Aplicativo de eCommerce tradicional e aplicativo de WooCommerce headless.<\/figcaption><\/figure>\n<p>Essa abordagem moderna oferece v\u00e1rios benef\u00edcios em compara\u00e7\u00e3o com as configura\u00e7\u00f5es tradicionais de eCommerce do WordPress.<\/p>\n<p>Agora que voc\u00ea entende o que \u00e9 um aplicativo WooCommerce headless e seus benef\u00edcios, \u00e9 hora de criar um para voc\u00ea. Usando o WordPress, o React e o <a href=\"https:\/\/kinqsta.com\/pt\/blog\/plugins-woocommerce\/\">plugin WooCommerce<\/a>, voc\u00ea criar\u00e1 um aplicativo de eCommerce e o implantar\u00e1 na Kinsta.<\/p>\n<h2>Pr\u00e9-requisitos<\/h2>\n<p>Antes de come\u00e7ar, verifique se voc\u00ea tem o seguinte:<\/p>\n<ul>\n<li>Uma compreens\u00e3o de <a href=\"https:\/\/kinqsta.com\/pt\/blog\/o-que-e-react-js\/\">React<\/a> e <a href=\"https:\/\/kinqsta.com\/pt\/blog\/o-que-wordpress\/\">WordPress<\/a><\/li>\n<li>Uma instala\u00e7\u00e3o <a href=\"https:\/\/kinqsta.com\/pt\/blog\/como-instalar-o-node-js\/\">Node.js<\/a><\/li>\n<li>Um site operacional do WordPress<\/li>\n<li>Uma <a href=\"https:\/\/my.kinqsta.com\/?lang=pt\" target=\"_blank\" rel=\"noopener noreferrer\">conta Kinsta<\/a> ativa<\/li>\n<\/ul>\n<h2>Benef\u00edcios do WooCommerce headless<\/h2>\n<p>Quando voc\u00ea escolhe a op\u00e7\u00e3o headless para seus aplicativos WooCommerce, desbloqueia uma s\u00e9rie de benef\u00edcios \u2014 especialmente a flexibilidade de ter um backend que suporta v\u00e1rios frontends para o seu aplicativo.<\/p>\n<p>Aqui est\u00e3o alguns outros benef\u00edcios do WooCommerce headless:<\/p>\n<ul>\n<li><strong>Personaliza\u00e7\u00e3o aprimorada<\/strong> \u2014 Voc\u00ea pode criar seu aplicativo WooCommerce como quiser usando qualquer <a href=\"https:\/\/kinqsta.com\/pt\/blog\/bibliotecas-javascript\/\">framework web<\/a>.<\/li>\n<li><strong>Melhor desempenho do site<\/strong> \u2014 Voc\u00ea pode aproveitar frameworks web r\u00e1pidos, como React e Vue, para aumentar significativamente o desempenho do seu site.<\/li>\n<li><strong>Benef\u00edcios de SEO<\/strong> \u2014 Voc\u00ea tem mais controle e flexibilidade sobre as estrat\u00e9gias de SEO para atingir as metas da sua empresa.<\/li>\n<li><strong>Melhor escalabilidade<\/strong> \u2014 Seu site pode ser dimensionado de forma mais eficiente, garantindo um desempenho suave mesmo durante per\u00edodos de alto tr\u00e1fego.<\/li>\n<li><strong>Possibilidade de criar experi\u00eancias exclusivas para o cliente<\/strong> \u2014 Voc\u00ea est\u00e1 livre das restri\u00e7\u00f5es dos templates tradicionais. Voc\u00ea pode inventar experi\u00eancias inovadoras e personalizadas para seus clientes.<\/li>\n<\/ul>\n<h2>Configura\u00e7\u00e3o de um site de WooCommerce headless<\/h2>\n<p>Acompanhe este passo a passo para configurar um site de WooCommerce:<\/p>\n<ol start=\"1\">\n<li>Fa\u00e7a login no seu painel MyKinsta<\/li>\n<li>Navegue at\u00e9 <strong>Adicionar servi\u00e7o &gt; Site WordPress<\/strong>.<\/li>\n<li>Selecione a op\u00e7\u00e3o <strong>Instalar WordPress<\/strong>.<\/li>\n<li>Na p\u00e1gina <strong>Adicionar novo site WordPress<\/strong>, preencha os campos necess\u00e1rios para instalar o WordPress.<\/li>\n<li>Marque a caixa <strong>Instalar WooCommerce<\/strong> e clique em <strong>Continuar<\/strong>.<\/li>\n<\/ol>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/03\/new-wp-site.png\" alt=\"Instalando o WordPress e o plugin WooCommerce.\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">Instalando o WordPress e o plugin WooCommerce.<\/figcaption><\/figure>\n<h3>Ative o plugin WooCommerce<\/h3>\n<ol start=\"1\">\n<li>No painel MyKinsta, clique em <strong>Dom\u00ednios<\/strong> na barra lateral.<\/li>\n<li>Na p\u00e1gina <strong>Dom\u00ednios<\/strong>, clique em <strong>Abrir Painel do WordPress<\/strong>.<\/li>\n<li>Fa\u00e7a login em seu painel do WordPress, navegue at\u00e9 plugins, selecione o plugin WooCommerce e ative-o.<\/li>\n<\/ol>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/03\/activate-woocommerce.png\" alt=\"Ativando o plugin do WooCommerce.\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">Ativando o plugin do WooCommerce.<\/figcaption><\/figure>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Se estiver usando a Kinsta, voc\u00ea n\u00e3o ser\u00e1 solicitado a fornecer detalhes do protocolo de transfer\u00eancia de arquivos (FTP) durante a configura\u00e7\u00e3o. No entanto, se estiver usando uma <a href=\"https:\/\/kinqsta.com\/pt\/blog\/instalar-wordpress-localmente\/\">instala\u00e7\u00e3o local do WordPress<\/a>, voc\u00ea dever\u00e1 fornecer seus detalhes de FTP. Prossiga para configurar o plugin WooCommerce para opera\u00e7\u00f5es headless.<\/p>\n<\/aside>\n\n<h2>Configure o WooCommerce para opera\u00e7\u00e3o headless<\/h2>\n<p>Para configurar o WooCommerce para opera\u00e7\u00f5es headless:<\/p>\n<ol start=\"1\">\n<li>Fa\u00e7a login no seu painel do WordPress. Na barra lateral, clique em <strong>WooCommerce &gt; Settings<\/strong>.<\/li>\n<li>Na p\u00e1gina <strong>Settings<\/strong>, clique na aba <strong>Advanced<\/strong>. Em seguida, clique em <strong>Rest API<\/strong>.<\/li>\n<li>Agora, clique em <strong>Add key<\/strong>.\n<p><figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/03\/woocommerce-rest-api.png\" alt=\"Adicionando a chave para a API REST.\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">Adicionando a chave para a API REST.<\/figcaption><\/figure><\/li>\n<li>Clique em <strong>Create an API key<\/strong>. D\u00ea uma descri\u00e7\u00e3o \u00e0 sua nova API REST, defina o campo <strong>Permissions <\/strong>como <strong>Read\/Write <\/strong>e clique em <strong>Generate API key<\/strong>.\n<p><figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/03\/api-details.png\" alt=\"Gerando a chave de API do WooCommerce.\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">Gerando a chave de API do WooCommerce.<\/figcaption><\/figure><\/li>\n<li>Copie a chave e o segredo do consumidor e armazene em seguran\u00e7a para uso no aplicativo React.<\/li>\n<li>Por fim, ajuste a estrutura do Permalink para garantir que os dados JSON sejam retornados quando voc\u00ea solicitar a API. No painel do WordPress, clique em <strong>Settings <\/strong><strong>&gt; Permalinks<\/strong> e selecione <strong>Post name<\/strong>.<\/li>\n<\/ol>\n<p>Antes de continuar, adicione alguns produtos \u00e0 sua loja WooCommerce. Navegue at\u00e9 a se\u00e7\u00e3o <strong>WooCommerce<\/strong> no painel do WordPress, clique em Products e siga as instru\u00e7\u00f5es para adicionar produtos. Voc\u00ea tamb\u00e9m pode importar <a href=\"https:\/\/github.com\/woocommerce\/woocommerce\/blob\/trunk\/plugins\/woocommerce\/sample-data\/sample_products.csv\" target=\"_blank\" rel=\"noopener noreferrer\">esses produtos de amostra<\/a> para sua loja.<\/p>\n<p>Com o WordPress e o WooCommerce configurados, voc\u00ea est\u00e1 pronto para se concentrar no frontend do seu aplicativo de eCommerce headless.<\/p>\n<h2>Configure um projeto React<\/h2>\n<p>Como configurar um projeto React:<\/p>\n<ol start=\"1\">\n<li>No diret\u00f3rio de sua prefer\u00eancia, use os seguintes comandos para criar um projeto React:\n<pre><code class=\"language-bash\"># Remember to replace &lt;app-name&gt; with your preferred name\n\n# With npx\nnpx create-react-app &lt;app-name&gt; && cd &lt;app-name&gt;\n\n# With yarn\nyarn create react-app &lt;app-name&gt; && cd &lt;app-name&gt;<\/code><\/pre>\n<\/li>\n<li>Depois que o projeto for criado, crie um arquivo <strong>.env<\/strong> na raiz do projeto e adicione o seguinte:\n<pre><code class=\"language-bash\">REACT_APP_CONSUMER_KEY=your_Woocommerce_consumer_key\nREACT_APP_CONSUMER_SECRET=your_Woocommerce_consumer_secret<\/code><\/pre>\n<p>Substitua isso por sua chave de consumidor e o segredo do WooCommerce gerados anteriormente.<\/li>\n<li>Em seguida, use o comando abaixo para instalar um pacote para gerenciar rotas:\n<pre><code class=\"language-js\">## With npm\nnpm i react-router-dom\n\n## With yarn\nyarn add react-router-dom<\/code><\/pre>\n<\/li>\n<li>Por fim, inicie o projeto React usando o seguinte comando:\n<pre><code class=\"language-js\">## With npm\nnpm start\n\n## With yarn\nyarn start<\/code><\/pre>\n<\/li>\n<\/ol>\n<h2>Desenvolva o frontend para o seu site de WooCommerce headless<\/h2>\n<p>Uma loja de eCommerce bem-sucedida exibe produtos e facilita as compras. Comece exibindo os produtos dispon\u00edveis na loja de WooCommerce no frontend. Isso envolve fazer solicita\u00e7\u00f5es \u00e0 API do WooCommerce.<\/p>\n<p>O endpoint para listar todos os produtos \u00e9 <code>wp-json\/wc\/v3\/products<\/code>. Esse endpoint deve ser anexado \u00e0 URL do provedor. Adicione essa vari\u00e1vel ao seu arquivo <strong>.env<\/strong> para a sua URL base, que \u00e9 a URL do provedor com o endpoint <code>products<\/code> anexado. Substitua <code>http:\/\/example.com<\/code> com o dom\u00ednio do seu site WooCommerce.<\/p>\n<pre><code class=\"language-bash\">REACT_APP_BASE_URL=http:\/\/example.com\/wp-json\/wc\/v3\/products<\/code><\/pre>\n<p>Ao fazer solicita\u00e7\u00f5es \u00e0 API, voc\u00ea deve incluir sua chave de consumidor e segredo na URL. Quando combinados, a URL fica assim:<\/p>\n<pre><code class=\"language-bash\">\nhttps:\/\/kinstawoocommerce.kinsta.cloud\/wp-json\/wc\/v3\/products?consumer_key=your_consumer_key&consumer_secret=your_consumer_secret<\/code><\/pre>\n<p>Vamos fazer solicita\u00e7\u00f5es de API no aplicativo React usando a <a href=\"https:\/\/kinqsta.com\/pt\/blog\/solicitacoes-http-javascript\/#4-how-to-make-an-http-request-in-javascript-using-the-fetch-api\">API Fetch<\/a> para buscar os produtos do WooCommerce.<\/p>\n<ol start=\"1\">\n<li>Em seu aplicativo React, abra o arquivo <strong>App.js<\/strong> no diret\u00f3rio <strong>src<\/strong> e substitua seu conte\u00fado pelo c\u00f3digo abaixo:\n<pre><code class=\"language-js\">import {Link} from 'react-router-dom';\nimport {useEffect, useState} from 'react';\n\nfunction App() {\n    const BASE_URL = process.env.REACT_APP_BASE_URL;\n    const CONSUMER_KEY = process.env.REACT_APP_CONSUMER_KEY;\n    const CONSUMER_SECRET = process.env.REACT_APP_CONSUMER_SECRET;\n\n    const [products, setProducts] = useState([]);\n    const [loading, setLoading] = useState(true);\n\n    useEffect(() =&gt; {\n        const fetchProducts = async () =&gt; {\n            const response = await fetch(`${BASE_URL}?consumer_key=${CONSUMER_KEY}&consumer_secret=${CONSUMER_SECRET}`);\n            const data = await response.json();\n            setProducts(data);\n            setLoading(false);\n        };\n\n        fetchProducts();\n    }, [BASE_URL, CONSUMER_KEY, CONSUMER_SECRET]);\n\n    return loading ? (\n        &lt;div className=\"loaderText\"&gt;\n            &lt;h2&gt;Just a moment. Fetching products...&lt;\/h2&gt;{' '}\n        &lt;\/div&gt;\n    ) : (\n        &lt;ul&gt;\n            {products ? (\n                products.map((product) =&gt; (\n                    &lt;li key={product.id}&gt;\n                        &lt;Link to={`\/product\/${product.id}`}&gt;\n                            &lt;img src={product.images[0].src} alt=\"Product banner\"\/&gt;\n                            &lt;h2&gt;{product.name}&lt;\/h2&gt;\n                            &lt;p&gt;Sale price: {product.sale_price}&lt;\/p&gt;\n                            &lt;strong&gt;\n                                {product.stock_status === 'instock'\n                                    ? 'In stock'\n                                    : 'Out of stock'}\n                            &lt;\/strong&gt;\n                            &lt;button&gt;Add to Cart&lt;\/button&gt;\n                        &lt;\/Link&gt;\n                    &lt;\/li&gt;\n                ))\n            ) : (\n                &lt;li&gt;No products found&lt;\/li&gt;\n            )}\n        &lt;\/ul&gt;\n    );\n}\n\nexport default App;<\/code><\/pre>\n<p>Esse c\u00f3digo busca uma lista de produtos no endpoint da API do WooCommerce usando a API Fetch quando o componente \u00e9 montado (hook <code>useEffect<\/code>). A URL do endpoint \u00e9 constru\u00eddo usando vari\u00e1veis de ambiente definidas anteriormente.<\/p>\n<p>Depois que os dados s\u00e3o obtidos, ele atualiza o estado do componente (<code>products<\/code>) usando <code>setProducts(response)<\/code> e define <code>loading<\/code> para <code>false<\/code> usando <code>setLoading(false)<\/code>.<\/p>\n<p>Enquanto os dados est\u00e3o sendo obtidos, \u00e9 exibida uma mensagem de carregamento. Depois que os dados s\u00e3o obtidos e <code>loading<\/code> \u00e9 definido como <code>false<\/code>, ele mapeia o array <code>products<\/code> e renderiza uma lista de itens de produtos usando o JavaScript XML (<a href=\"https:\/\/kinqsta.com\/pt\/blog\/sintaxe-jsx\/\">JSX<\/a>). Cada item de produto \u00e9 agrupado em um componente <code>Link<\/code> de <code>react-router-dom<\/code>, que gera um link para a p\u00e1gina de detalhes do produto individual com base em seu ID.<\/p>\n<p>O nome do produto, o pre\u00e7o, a descri\u00e7\u00e3o (renderizada usando <code>dangerouslySetInnerHTML<\/code> para injetar conte\u00fado HTML), o status do estoque e um bot\u00e3o s\u00e3o exibidos para cada produto.<\/li>\n<li>No diret\u00f3rio <strong>src<\/strong>, abra o arquivo <strong>index.js<\/strong> e substitua o c\u00f3digo pelo snippet abaixo:\n<pre><code class=\"language-js\">import React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport { BrowserRouter, Route, Routes } from \"react-router-dom\";\nimport \".\/index.css\";\nimport App from \".\/App\";\n\n\nReactDOM.render(\n    &lt;React.StrictMode&gt;\n        &lt;div className=\"container\"&gt;\n            &lt;header&gt;\n                &lt;h1&gt;Kinsta Store&lt;\/h1&gt;\n            &lt;\/header&gt;\n                &lt;BrowserRouter&gt;\n                    &lt;Routes&gt;\n                        &lt;Route exact path=\"\/\" element={&lt;App \/&gt;} \/&gt;\n                    &lt;\/Routes&gt;\n                &lt;\/BrowserRouter&gt;\n\n        &lt;\/div&gt;\n    &lt;\/React.StrictMode&gt;,\n    document.getElementById(\"root\")\n);<\/code><\/pre>\n<p>Ele renderiza o componente <code>App<\/code> quando o caminho <code>\/<\/code> \u00e9 chamado no navegador.<\/li>\n<li>Execute seu aplicativo para ver as altera\u00e7\u00f5es.\n<pre><code class=\"language-js\">## With npm\nnpm start\n\n## With yarn\nyarn start<\/code><\/pre>\n<p>O aplicativo React agora exibe uma lista de produtos da loja WooCommerce.<\/p>\n<p><figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/03\/products-list-woocommerce.jpg\" alt=\"Lista de produtos da loja WooCommerce.\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">Lista de produtos da loja WooCommerce.<\/figcaption><\/figure><\/li>\n<\/ol>\n<h3>Criar p\u00e1ginas din\u00e2micas de produtos<\/h3>\n<p>Agora, para aprimorar a experi\u00eancia do usu\u00e1rio, crie p\u00e1ginas din\u00e2micas de produtos usando a API do WooCommerce. Essa API fornece um endpoint para buscar os dados sobre um \u00fanico produto: <code>wp-json\/wc\/v3\/products\/&lt;id&gt;<\/code>. Para usar esse endpoint para buscar e exibir dados sobre um \u00fanico produto na loja, siga estas etapas:<\/p>\n<ol start=\"1\">\n<li>Crie um componente <strong>ProductDetail.js<\/strong> no diret\u00f3rio <strong>src<\/strong> que busque e exiba dados sobre um \u00fanico produto. Esse componente busca e exibe informa\u00e7\u00f5es detalhadas sobre um \u00fanico produto, operando de forma semelhante ao c\u00f3digo no arquivo <strong>App.js<\/strong>, exceto pelo fato de recuperar detalhes de um \u00fanico produto.\n<pre><code class=\"language-js\">import {useState, useEffect} from 'react';\nimport {useParams} from 'react-router-dom';\n\nfunction ProductDetail() {\n    const BASE_URL = process.env.REACT_APP_BASE_URL;\n    const CONSUMER_KEY = process.env.REACT_APP_CONSUMER_KEY;\n    const CONSUMER_SECRET = process.env.REACT_APP_CONSUMER_SECRET;\n\n    const {id} = useParams();\n    const [product, setProduct] = useState(null);\n\n    useEffect(() =&gt; {\n        const fetchSingleProductDetails = async () =&gt; {\n            const response = await fetch(\n                `${BASE_URL}\/${id}?consumer_key=${CONSUMER_KEY}&consumer_secret=${CONSUMER_SECRET}`\n            );\n            const data = await response.json();\n            setProduct(data);\n        };\n        fetchSingleProductDetails();\n    }, [BASE_URL, CONSUMER_KEY, CONSUMER_SECRET, id]);\n\n    if (!product) {\n        return (\n            &lt;div className=\"loaderText\"&gt;\n                &lt;h2&gt;Fetching product details...&lt;\/h2&gt;\n            &lt;\/div&gt;\n        );\n    }\n\n    return (\n        &lt;div className=\"product-detail\"&gt;\n            &lt;h2&gt;{product.name}&lt;\/h2&gt;\n            &lt;h4&gt;Original Price: {product.regular_price}&lt;\/h4&gt;\n            &lt;h4&gt;Sale price: {product.sale_price}&lt;\/h4&gt;\n            &lt;img src={product.images[0].src} alt=\"Product banner\"\/&gt;\n            &lt;strong&gt;\n                {product.stock_status === 'instock' ? 'In stock' : 'Out of stock'}\n            &lt;\/strong&gt;\n        &lt;\/div&gt;\n    );\n}\n\nexport default ProductDetail;<\/code><\/pre>\n<\/li>\n<li>Crie um novo caminho em <strong>index.js<\/strong> e atribua o componente <code>ProductDetail<\/code> a ele. Este snippet de c\u00f3digo cria um novo caminho em <strong>index.js<\/strong>\u00a0e atribui o componente <code>ProductDetail<\/code>. Isso garante que, quando os usu\u00e1rios clicarem em um link de produto, ser\u00e3o direcionados para a respectiva p\u00e1gina do produto.\n<pre><code class=\"language-js\">\/\/ index.js\n\u2026\nimport ProductDetail from \".\/ProductDetail\";\n\nReactDOM.render(\n  &lt;React.StrictMode&gt;\n\t\u2026\n               &lt;Router&gt;\n          &lt;Routes&gt;\n            &lt;Route exact path=\"\/\" element={&lt;App \/&gt;} \/&gt;\n\t\t{\/* the new route *\/}\n            &lt;Route path=\"\/product\/:id\" element={&lt;ProductDetail \/&gt;} \/&gt;\n          &lt;\/Routes&gt;\n        &lt;\/Router&gt;\n    &lt;\/div&gt;\n  &lt;\/React.StrictMode&gt;,\n  document.getElementById(\"root\")\n);<\/code><\/pre>\n<p>Com essas modifica\u00e7\u00f5es, clicar em qualquer produto no aplicativo redireciona os usu\u00e1rios para uma p\u00e1gina que exibe informa\u00e7\u00f5es detalhadas sobre esse produto espec\u00edfico.<\/p>\n<p><figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/03\/single-product-woocommerce.jpg\" alt=\"Informa\u00e7\u00f5es detalhadas sobre um produto de vestu\u00e1rio.\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">Informa\u00e7\u00f5es detalhadas sobre um produto de vestu\u00e1rio.<\/figcaption><\/figure><\/li>\n<\/ol>\n<p>Voc\u00ea pode acessar o c\u00f3digo completo <a href=\"https:\/\/github.com\/olawanlejoel\/woocommerce-react\" target=\"_blank\" rel=\"noopener noreferrer\">neste reposit\u00f3rio do GitHub<\/a>.<\/p>\n<h2>Integre os principais recursos do WooCommerce em uma configura\u00e7\u00e3o headless<\/h2>\n<p>Voc\u00ea pode construir sobre essa base de lista de produtos em um aplicativo WooCommerce headless integrando recursos essenciais como os seguintes:<\/p>\n<ul>\n<li><strong>Carrinhos de compras<\/strong> \u2014 Gerencie os dados do carrinho no lado do cliente ou use o armazenamento local para permitir que os usu\u00e1rios adicionem, removam e atualizem itens sem problemas.<\/li>\n<li><strong>Processos de checkout<\/strong> \u2014 Projete um checkout simplificado com <a href=\"https:\/\/kinqsta.com\/pt\/blog\/bibliotecas-de-componentes-react\/\">componentes React<\/a>, colete as informa\u00e7\u00f5es necess\u00e1rias, valide a entrada do usu\u00e1rio e garanta uma experi\u00eancia de checkout tranquila.<\/li>\n<li><strong>Autentica\u00e7\u00e3o do usu\u00e1rio<\/strong> \u2014 Implemente autentica\u00e7\u00e3o segura usando JSON Web Token (JWT) ou Open Authorization 2.0 (OAuth2) para aprimorar a experi\u00eancia do usu\u00e1rio com recursos de registro, login e redefini\u00e7\u00e3o de senha.<\/li>\n<li><strong>Processamento de pagamentos<\/strong> \u2014 Use APIs de gateway de pagamento seguros, como <a href=\"https:\/\/kinqsta.com\/pt\/blog\/stripe-para-wordpress\/\">Stripe<\/a> ou PayPal, para transa\u00e7\u00f5es e reembolsos.<\/li>\n<li><strong>Gerenciamento de pedidos<\/strong> \u2014 Gerencie pedidos e estados de forma eficiente com a API do WooCommerce. Ofere\u00e7a recursos f\u00e1ceis de usar para hist\u00f3rico de pedidos, rastreamento, devolu\u00e7\u00f5es e reembolsos, e automatize processos usando webhooks ou arquitetura orientada por eventos.<\/li>\n<\/ul>\n<h2>Implante seu site de WooCommerce headless na Kinsta<\/h2>\n<p>Uma vez desenvolvido seu site de WooCommerce headless, implant\u00e1-lo na plataforma de <a href=\"https:\/\/kinqsta.com\/pt\/hospedagem-wordpress\/\">hospedagem de sites WordPress\u00a0da Kinsta<\/a> \u00e9 simples.<\/p>\n<p>A Kinsta oferece uma s\u00e9rie de benef\u00edcios, incluindo alto desempenho, seguran\u00e7a robusta e escalabilidade, tornando a escolha ideal para hospedar seu site de eCommerce headless. Se voc\u00ea j\u00e1 tem um site WordPress que n\u00e3o est\u00e1 na Kinsta, voc\u00ea pode facilmente <a href=\"https:\/\/kinqsta.com\/pt\/docs\/hospedagem-de-wordpress\/migracoes-wordpress\/migrando-para-kinsta\/\">migr\u00e1-lo para a Kinsta<\/a>.<\/p>\n<p>Al\u00e9m disso, voc\u00ea pode implantar seu aplicativo React no <a href=\"https:\/\/sevalla.com\/static-site-hosting\/\">servi\u00e7o de Hospedagem de Site Est\u00e1tico da Kinsta<\/a> gratuitamente \u2014 tudo o que voc\u00ea precisa fazer \u00e9 enviar seu c\u00f3digo para o provedor Git de sua prefer\u00eancia (<a href=\"https:\/\/docs.sevalla.com\/applications\/git\/bitbucket#grant-access-to-the-kinsta-bitbucket-application\">Bitbucket<\/a>, <a href=\"https:\/\/docs.sevalla.com\/applications\/git\/github#authenticate-and-authorize\">GitHub<\/a> ou <a href=\"https:\/\/docs.sevalla.com\/applications\/git\/gitlab#authorize-the-kinsta-gitlab-application\">GitLab<\/a>).<\/p>\n<p>Ap\u00f3s completar o envio do seu c\u00f3digo, siga estas etapas para implantar seu site:<\/p>\n<ol start=\"1\">\n<li>Fa\u00e7a login no painel <a href=\"https:\/\/my.kinqsta.com\/?lang=pt\" target=\"_blank\" rel=\"noopener noreferrer\">MyKinsta<\/a>.<\/li>\n<li>Clique em <strong>Adicionar servi\u00e7o<\/strong>, e da\u00ed em <strong>Site est\u00e1tico<\/strong>.<\/li>\n<li>Selecione um provedor Git e clique em <strong>Conectar provedor Git<\/strong>.<\/li>\n<li>Selecione o reposit\u00f3rio e o branch que voc\u00ea deseja implantar. As configura\u00e7\u00f5es de build s\u00e3o detectadas automaticamente.<\/li>\n<li>Certifique-se de adicionar todas as vari\u00e1veis de ambiente necess\u00e1rias do seu arquivo <strong>.env<\/strong>.\n<p><figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/03\/woocommerce-env.png\" alt=\"Adicionando vari\u00e1veis de ambiente.\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">Adicionando vari\u00e1veis de ambiente.<\/figcaption><\/figure><\/li>\n<li>Por fim, clique em <strong>Criar site<\/strong> para implantar seu aplicativo React.<\/li>\n<\/ol>\n<p>Voc\u00ea implantou com sucesso seu aplicativo WooCommerce headless!<\/p>\n<h2>Resumo<\/h2>\n<p>Este artigo explicou as in\u00fameras vantagens e novas possibilidades de cria\u00e7\u00e3o de lojas on-line din\u00e2micas e de alto desempenho com a configura\u00e7\u00e3o de sites de WooCommerce headless.<\/p>\n<p>Ao separar o frontend do backend, voc\u00ea pode personalizar seu site para oferecer experi\u00eancias de compras mais envolventes e personalizadas aos clientes que se beneficiam de alto desempenho, seguran\u00e7a robusta e escalabilidade.<\/p>\n<p>Quer voc\u00ea seja um desenvolvedor experiente ou esteja apenas come\u00e7ando, a Kinsta fornece o suporte, as ferramentas e outros recursos necess\u00e1rios para criar e gerenciar solu\u00e7\u00f5es de eCommerce inovadoras e bem-sucedidas. <a href=\"https:\/\/kinqsta.com\/pt\/\">Hospede na Kinsta<\/a> ainda hoje para come\u00e7ar a explorar as possibilidades do eCommerce headless!<\/p>\n<p><em>Animado com as infinitas possibilidades do WooCommerce headless em sua loja on-line? Compartilhe suas ideias ou perguntas nos coment\u00e1rios abaixo. <\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>O WooCommerce \u00e9 um dos mais populares plugins de WordPress para a cria\u00e7\u00e3o de aplicativos de eCommerce. Al\u00e9m de usar o WooCommerce em um aplicativo tradicional &#8230;<\/p>\n","protected":false},"author":199,"featured_media":67839,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[1026,977,971,1002,1023],"class_list":["post-67838","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-desenvolvimento-wordpress","topic-frameworks-javascript","topic-headless-cms","topic-react","topic-woocommerce"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.6 (Yoast SEO v24.6) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>WooCommerce Headless: Da Configura\u00e7\u00e3o \u00e0 Implanta\u00e7\u00e3o na Kinsta - Kinsta\u00ae<\/title>\n<meta name=\"description\" content=\"Este guia mostra o que significa o WooCommerce headless, como us\u00e1-lo com o React como frontend e como implantar seu aplicativo na Kinsta.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinqsta.com\/pt\/blog\/woocommerce-headless\/\" \/>\n<meta property=\"og:locale\" content=\"pt_PT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"WooCommerce Headless: Da Configura\u00e7\u00e3o \u00e0 Implanta\u00e7\u00e3o na Kinsta\" \/>\n<meta property=\"og:description\" content=\"Este guia mostra o que significa o WooCommerce headless, como us\u00e1-lo com o React como frontend e como implantar seu aplicativo na Kinsta.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinqsta.com\/pt\/blog\/woocommerce-headless\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/kinstapt\/\" \/>\n<meta property=\"article:published_time\" content=\"2024-04-03T14:41:38+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-04-08T07:03:22+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2024\/04\/wp-headless-woocommerce.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1460\" \/>\n\t<meta property=\"og:image:height\" content=\"730\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Jeremy Holcombe\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Este guia mostra o que significa o WooCommerce headless, como us\u00e1-lo com o React como frontend e como implantar seu aplicativo na Kinsta.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2024\/04\/wp-headless-woocommerce.jpg\" \/>\n<meta name=\"twitter:creator\" content=\"@kinsta_pt\" \/>\n<meta name=\"twitter:site\" content=\"@kinsta_pt\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jeremy Holcombe\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tempo estimado de leitura\" \/>\n\t<meta name=\"twitter:data2\" content=\"12 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinqsta.com\/pt\/blog\/woocommerce-headless\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinqsta.com\/pt\/blog\/woocommerce-headless\/\"},\"author\":{\"name\":\"Jeremy Holcombe\",\"@id\":\"https:\/\/kinqsta.com\/pt\/#\/schema\/person\/4eee42881d7b5a73ebb4f58dd5223b21\"},\"headline\":\"WooCommerce Headless: Da Configura\u00e7\u00e3o \u00e0 Implanta\u00e7\u00e3o na Kinsta\",\"datePublished\":\"2024-04-03T14:41:38+00:00\",\"dateModified\":\"2024-04-08T07:03:22+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinqsta.com\/pt\/blog\/woocommerce-headless\/\"},\"wordCount\":2168,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinqsta.com\/pt\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinqsta.com\/pt\/blog\/woocommerce-headless\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2024\/04\/wp-headless-woocommerce.jpg\",\"inLanguage\":\"pt-PT\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinqsta.com\/pt\/blog\/woocommerce-headless\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinqsta.com\/pt\/blog\/woocommerce-headless\/\",\"url\":\"https:\/\/kinqsta.com\/pt\/blog\/woocommerce-headless\/\",\"name\":\"WooCommerce Headless: Da Configura\u00e7\u00e3o \u00e0 Implanta\u00e7\u00e3o na Kinsta - Kinsta\u00ae\",\"isPartOf\":{\"@id\":\"https:\/\/kinqsta.com\/pt\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinqsta.com\/pt\/blog\/woocommerce-headless\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinqsta.com\/pt\/blog\/woocommerce-headless\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2024\/04\/wp-headless-woocommerce.jpg\",\"datePublished\":\"2024-04-03T14:41:38+00:00\",\"dateModified\":\"2024-04-08T07:03:22+00:00\",\"description\":\"Este guia mostra o que significa o WooCommerce headless, como us\u00e1-lo com o React como frontend e como implantar seu aplicativo na Kinsta.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinqsta.com\/pt\/blog\/woocommerce-headless\/#breadcrumb\"},\"inLanguage\":\"pt-PT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinqsta.com\/pt\/blog\/woocommerce-headless\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\/\/kinqsta.com\/pt\/blog\/woocommerce-headless\/#primaryimage\",\"url\":\"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2024\/04\/wp-headless-woocommerce.jpg\",\"contentUrl\":\"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2024\/04\/wp-headless-woocommerce.jpg\",\"width\":1460,\"height\":730},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinqsta.com\/pt\/blog\/woocommerce-headless\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinqsta.com\/pt\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"WooCommerce\",\"item\":\"https:\/\/kinqsta.com\/pt\/topicos\/woocommerce\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"WooCommerce Headless: Da Configura\u00e7\u00e3o \u00e0 Implanta\u00e7\u00e3o na Kinsta\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinqsta.com\/pt\/#website\",\"url\":\"https:\/\/kinqsta.com\/pt\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Solu\u00e7\u00f5es de hospedagem Premium, r\u00e1pida e segura\",\"publisher\":{\"@id\":\"https:\/\/kinqsta.com\/pt\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinqsta.com\/pt\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-PT\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinqsta.com\/pt\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinqsta.com\/pt\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\/\/kinqsta.com\/pt\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinqsta.com\/pt\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/kinstapt\/\",\"https:\/\/x.com\/kinsta_pt\",\"https:\/\/www.instagram.com\/kinstahosting\/\",\"https:\/\/www.linkedin.com\/company\/kinsta\/\",\"https:\/\/www.pinterest.com\/kinstahosting\/\",\"https:\/\/www.youtube.com\/c\/Kinsta\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/kinqsta.com\/pt\/#\/schema\/person\/4eee42881d7b5a73ebb4f58dd5223b21\",\"name\":\"Jeremy Holcombe\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\/\/kinqsta.com\/pt\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/0e17001f3bb37dbbe54fceef9bb547fa?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/0e17001f3bb37dbbe54fceef9bb547fa?s=96&d=mm&r=g\",\"caption\":\"Jeremy Holcombe\"},\"description\":\"Senior Editor at Kinsta, WordPress Web Developer, and Content Writer. Outside of all things WordPress, I enjoy the beach, golf, and movies. I also have tall people problems.\",\"sameAs\":[\"https:\/\/www.linkedin.com\/in\/jeremyholcombe\/\"],\"url\":\"https:\/\/kinqsta.com\/pt\/blog\/author\/jeremyholcombe\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"WooCommerce Headless: Da Configura\u00e7\u00e3o \u00e0 Implanta\u00e7\u00e3o na Kinsta - Kinsta\u00ae","description":"Este guia mostra o que significa o WooCommerce headless, como us\u00e1-lo com o React como frontend e como implantar seu aplicativo na Kinsta.","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:\/\/kinqsta.com\/pt\/blog\/woocommerce-headless\/","og_locale":"pt_PT","og_type":"article","og_title":"WooCommerce Headless: Da Configura\u00e7\u00e3o \u00e0 Implanta\u00e7\u00e3o na Kinsta","og_description":"Este guia mostra o que significa o WooCommerce headless, como us\u00e1-lo com o React como frontend e como implantar seu aplicativo na Kinsta.","og_url":"https:\/\/kinqsta.com\/pt\/blog\/woocommerce-headless\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinstapt\/","article_published_time":"2024-04-03T14:41:38+00:00","article_modified_time":"2024-04-08T07:03:22+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2024\/04\/wp-headless-woocommerce.jpg","type":"image\/jpeg"}],"author":"Jeremy Holcombe","twitter_card":"summary_large_image","twitter_description":"Este guia mostra o que significa o WooCommerce headless, como us\u00e1-lo com o React como frontend e como implantar seu aplicativo na Kinsta.","twitter_image":"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2024\/04\/wp-headless-woocommerce.jpg","twitter_creator":"@kinsta_pt","twitter_site":"@kinsta_pt","twitter_misc":{"Escrito por":"Jeremy Holcombe","Tempo estimado de leitura":"12 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinqsta.com\/pt\/blog\/woocommerce-headless\/#article","isPartOf":{"@id":"https:\/\/kinqsta.com\/pt\/blog\/woocommerce-headless\/"},"author":{"name":"Jeremy Holcombe","@id":"https:\/\/kinqsta.com\/pt\/#\/schema\/person\/4eee42881d7b5a73ebb4f58dd5223b21"},"headline":"WooCommerce Headless: Da Configura\u00e7\u00e3o \u00e0 Implanta\u00e7\u00e3o na Kinsta","datePublished":"2024-04-03T14:41:38+00:00","dateModified":"2024-04-08T07:03:22+00:00","mainEntityOfPage":{"@id":"https:\/\/kinqsta.com\/pt\/blog\/woocommerce-headless\/"},"wordCount":2168,"commentCount":0,"publisher":{"@id":"https:\/\/kinqsta.com\/pt\/#organization"},"image":{"@id":"https:\/\/kinqsta.com\/pt\/blog\/woocommerce-headless\/#primaryimage"},"thumbnailUrl":"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2024\/04\/wp-headless-woocommerce.jpg","inLanguage":"pt-PT","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinqsta.com\/pt\/blog\/woocommerce-headless\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinqsta.com\/pt\/blog\/woocommerce-headless\/","url":"https:\/\/kinqsta.com\/pt\/blog\/woocommerce-headless\/","name":"WooCommerce Headless: Da Configura\u00e7\u00e3o \u00e0 Implanta\u00e7\u00e3o na Kinsta - Kinsta\u00ae","isPartOf":{"@id":"https:\/\/kinqsta.com\/pt\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinqsta.com\/pt\/blog\/woocommerce-headless\/#primaryimage"},"image":{"@id":"https:\/\/kinqsta.com\/pt\/blog\/woocommerce-headless\/#primaryimage"},"thumbnailUrl":"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2024\/04\/wp-headless-woocommerce.jpg","datePublished":"2024-04-03T14:41:38+00:00","dateModified":"2024-04-08T07:03:22+00:00","description":"Este guia mostra o que significa o WooCommerce headless, como us\u00e1-lo com o React como frontend e como implantar seu aplicativo na Kinsta.","breadcrumb":{"@id":"https:\/\/kinqsta.com\/pt\/blog\/woocommerce-headless\/#breadcrumb"},"inLanguage":"pt-PT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinqsta.com\/pt\/blog\/woocommerce-headless\/"]}]},{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/kinqsta.com\/pt\/blog\/woocommerce-headless\/#primaryimage","url":"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2024\/04\/wp-headless-woocommerce.jpg","contentUrl":"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2024\/04\/wp-headless-woocommerce.jpg","width":1460,"height":730},{"@type":"BreadcrumbList","@id":"https:\/\/kinqsta.com\/pt\/blog\/woocommerce-headless\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinqsta.com\/pt\/"},{"@type":"ListItem","position":2,"name":"WooCommerce","item":"https:\/\/kinqsta.com\/pt\/topicos\/woocommerce\/"},{"@type":"ListItem","position":3,"name":"WooCommerce Headless: Da Configura\u00e7\u00e3o \u00e0 Implanta\u00e7\u00e3o na Kinsta"}]},{"@type":"WebSite","@id":"https:\/\/kinqsta.com\/pt\/#website","url":"https:\/\/kinqsta.com\/pt\/","name":"Kinsta\u00ae","description":"Solu\u00e7\u00f5es de hospedagem Premium, r\u00e1pida e segura","publisher":{"@id":"https:\/\/kinqsta.com\/pt\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinqsta.com\/pt\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-PT"},{"@type":"Organization","@id":"https:\/\/kinqsta.com\/pt\/#organization","name":"Kinsta","url":"https:\/\/kinqsta.com\/pt\/","logo":{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/kinqsta.com\/pt\/#\/schema\/logo\/image\/","url":"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinqsta.com\/pt\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/kinstapt\/","https:\/\/x.com\/kinsta_pt","https:\/\/www.instagram.com\/kinstahosting\/","https:\/\/www.linkedin.com\/company\/kinsta\/","https:\/\/www.pinterest.com\/kinstahosting\/","https:\/\/www.youtube.com\/c\/Kinsta"]},{"@type":"Person","@id":"https:\/\/kinqsta.com\/pt\/#\/schema\/person\/4eee42881d7b5a73ebb4f58dd5223b21","name":"Jeremy Holcombe","image":{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/kinqsta.com\/pt\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/0e17001f3bb37dbbe54fceef9bb547fa?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/0e17001f3bb37dbbe54fceef9bb547fa?s=96&d=mm&r=g","caption":"Jeremy Holcombe"},"description":"Senior Editor at Kinsta, WordPress Web Developer, and Content Writer. Outside of all things WordPress, I enjoy the beach, golf, and movies. I also have tall people problems.","sameAs":["https:\/\/www.linkedin.com\/in\/jeremyholcombe\/"],"url":"https:\/\/kinqsta.com\/pt\/blog\/author\/jeremyholcombe\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinqsta.com\/pt\/wp-json\/wp\/v2\/posts\/67838","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinqsta.com\/pt\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinqsta.com\/pt\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinqsta.com\/pt\/wp-json\/wp\/v2\/users\/199"}],"replies":[{"embeddable":true,"href":"https:\/\/kinqsta.com\/pt\/wp-json\/wp\/v2\/comments?post=67838"}],"version-history":[{"count":10,"href":"https:\/\/kinqsta.com\/pt\/wp-json\/wp\/v2\/posts\/67838\/revisions"}],"predecessor-version":[{"id":67886,"href":"https:\/\/kinqsta.com\/pt\/wp-json\/wp\/v2\/posts\/67838\/revisions\/67886"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinqsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/67838\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinqsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/67838\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinqsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/67838\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinqsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/67838\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinqsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/67838\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinqsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/67838\/translations\/jp"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinqsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/67838\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinqsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/67838\/translations\/es"},{"href":"https:\/\/kinqsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/67838\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinqsta.com\/pt\/wp-json\/wp\/v2\/media\/67839"}],"wp:attachment":[{"href":"https:\/\/kinqsta.com\/pt\/wp-json\/wp\/v2\/media?parent=67838"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinqsta.com\/pt\/wp-json\/wp\/v2\/tags?post=67838"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinqsta.com\/pt\/wp-json\/wp\/v2\/topic?post=67838"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}