Últimas notícias da SeedProd

Tutoriais, dicas e recursos do WordPress para ajudar a expandir seus negócios

Como criar uma página em breve do WooCommerce (passo a passo)

Como criar uma página em breve do WooCommerce (passo a passo) 

Escrito por: avatar do autor Stacey Corrin
avatar do autor Stacey Corrin
Stacey escreve sobre WordPress e marketing digital há mais de 10 anos e sobre outros tópicos há muito mais tempo. Além disso, ela é fascinada por web design, experiência do usuário e SEO.
     Avaliado por: reviewer avatar Turner John
reviewer avatar Turner John
John Turner é o cofundador da SeedProd. Ele tem mais de 20 anos de experiência em negócios e desenvolvimento e seus plug-ins foram baixados mais de 25 milhões de vezes.

Do you want to create a WooCommerce coming soon page?

A WooCommerce coming soon page hides your online store while it’s under construction. But instead of showing an error page, you can show a landing page to generate excitement about your store’s launch. Plus, with the right coming soon page features, you can generate leads from day 1.

In this tutorial, we’ll show you how to create a WooCommerce coming soon page easily in WordPress.

Why Create a WooCommerce Coming Soon Page?

Creating a WooCommerce coming soon page is an excellent way to hide your unfinished online store. That way, you can control what potential customers see instead of showing an error page or a half-finished storefront that isn’t ready for the public.

In addition to that, creating a coming soon page for WooCommerce can help in several other ways:

  • Give visitors details about when your store will launch
  • Build excitement for launch day with countdown timers
  • Collect email addresses and grow your list with signup forms
  • Offer discounts and offers to attract customers before your launch
  • Get a head start in search engine rankings with a crawlable web page

There are many more ways WooCommerce coming soon pages can help your business. But how do you create one?

Como criar uma página em breve do WooCommerce

For this guide, we’ll use SeedProd to create a WooCommerce coming page.

SeedProd best WooCommerce Coming Soon Page Builder

SeedProd is the best WordPress page builder with drag-and-drop functionality. With its live visual editor, you can set up a coming soon page for your online store without writing code and see the changes in real time.

You can also use SeedProd to create a custom WooCommerce theme with drag-and-drop.

Here are several more reasons why SeedProd is the best choice for your WooCommerce coming soon page:

  • Built-in coming soon and maintenance mode to hide your site until it’s ready
  • Get started quickly with 100+ landing page templates
  • Tons of blocks to add new sections like headers and calls to action (CTAs)
  • WooCommerce support lets you sell products from your coming soon page
  • Track and manage signups with the subscriber dashboard
  • Integrate with popular marketing platforms like Constant Contact and ActiveCampaign
  • Spam protection against bots and fraudulent form submissions

And the best thing is you won’t need to hire a developer or write any code to follow this tutorial.

Tutorial em vídeo

Etapa 1. Instalar e ativar o SeedProd

Getting started with SeedProd is super easy. First, click the button below to get your copy of SeedProd and create your account.

Observação: o SeedProd também tem uma versão gratuita que pode ser instalada. Mas usaremos a versão Pro hoje porque ela tem alguns recursos muito interessantes dos quais queremos tirar proveito.

Next, install and activate the plugin on your WordPress website. If you need help with this step, follow this easy guide on installing a WordPress plugin.

After installing and activating SeedProd, navigate to SeedProd » Settings from your WordPress dashboard. This allows you to enter your license key so you can access plugin updates and advanced features.

Verifique sua chave de licença do seedprod

You can find your SeedProd license key in your account on the SeedProd website under the Downloads tab.

Localize sua chave de licença do SeedProd

After entering your license key, click the Verify Key button, and you’re all set to start making your WooCommerce coming soon page.

Step 2. Set Up a Coming Soon Page

To begin creating your WooCommerce coming soon page, head to SeedProd » Pages from your WordPress admin panel.

Modos da página de destino do SeedProd

This screen shows several options for creating different types of pages on your WordPress site, including:

  • Coming Soon Mode – Create a coming soon page for any type of website under construction.
  • Maintenance Mode – Show a maintenance message when you’re making minor changes or performing updates.
  • Login Page – Replace the default login screen with a custom WordPress login page.
  • 404 Page – Set up a custom 404 error page to keep users on your site longer.

Below that section, you can also create any standalone landing page of your choice.

But for this tutorial, you’ll want to select the ‘Set up a Coming Soon Page’ button.

set up a woocommerce coming soon page

Next, you’ll see SeedProd’s responsive templates library. Under the Coming Soon filter, you can see various coming soon page templates that are ready to use right away.

Modelos de página do SeedProd para breve

Hover over any template to see options to preview it, and click on the checkmark icon to choose that design.

Choose a woocommerce coming soon template

After choosing your coming soon page template, SeedProd opens and displays it in the drag-and-drop page builder. It’s on this page that you can customize your WooCommerce coming soon page.

Step 3. Customize Your WooCommerce Coming Soon Page

SeedProd’s visual editor makes it super easy to customize your coming soon page for WooCommerce.

On the right side of the screen, you’ll see a live preview of your design where you can make edits and see the changes in real time.

SeedProd woocommerce coming soon page builder

And on the left-hand side are various sections and blocks for building and customizing your design.

Para editar um elemento, basta clicar nele, e as configurações desse bloco serão abertas à esquerda. Por exemplo, clicar no elemento de título abre seu painel de configurações de conteúdo.

Customize your woocommerce coming soon page heading

A partir daí, você pode editar o conteúdo, alterar as cores e o tamanho da fonte e até mesmo alterar as tags de título para otimizar sua página para os mecanismos de pesquisa.

You can do the same for any other elements on your page, such as the countdown timer, paragraph text, and social media icons.

For instance, clicking the social media icons block allows you to add your social media profile links. You can also click the Templates tab to change the icon colors and style quickly.

Customize your woocommerce coming soon page social media icons

Você pode adicionar mais conteúdo à sua página escolhendo um bloco nas seções de blocos Standard, Advanced ou WooCommerce.

  • The Standard blocks include bullet lists, images, buttons, videos, etc.
  • Advanced blocks include optin forms, giveaways, countdown timers, and many more lead generation tools.
  • The WooCommerce blocks allow you to add shopping carts, checkouts, product grids, and add-to-cart buttons to your coming soon page.

We recommend adding an optin form to grow your list and a coming soon countdown timer to create a sense of urgency.

Add an email newsletter signup form to your woocommerce coming soon page

Besides customizing and adding fresh content to your WooCommerce coming soon page, you can also control the colors, fonts, and styles globally. This saves you from customizing every block manually.

You can find the Global Settings panel by clicking the gear icon in the bottom left corner of your screen. From there, click any heading to add a global color scheme, fonts, background image, and more.

Painel de configurações globais do SeedProd

For example, we removed the default background image, replacing it with something more eye-catching.

Change the background image for your woocommerce coming soon page

We also clicked the Colours heading to alter the heading, text, button, and link colors.

Change woocommerce coming soon page colors

Once you’re happy with your online store’s coming soon page, hit the Save button at the top to save your progress.

Save your woocommerce coming soon page

Step 4. Connect your Email Marketing Service

If you’ve added an email signup form to your WooCommerce coming soon page, it’s a good idea to connect it to an email marketing service. That way, you can collect leads, manage your subscribers, and send emails to potential customers.

You can find SeedProd’s email integrations under the Connect tab at the top of your screen.

integrações de marketing por e-mail da seedprod

From there, click on your desired email service provider and follow the instructions to authorize and connect your account.

Etapa 5. Configurar as definições da página

Before publishing your eCommerce coming soon page, there are a few settings to configure. So switch to the Page Settings tab and look for the navigation panel on the left.

woocommerce coming soon page settings

First, you can change your page title, URL, and status under the General tab.

Then, if you’re a SeedProd Pro user, you’ll see the Access Control tab. On this screen, you can choose who can see your WooCommerce coming soon page and who can access your website while it’s under construction.

Controles de acesso ao SeedProd

As a result, you can grant access to any developers and freelancers working on your site. And if you’re a developer yourself, you can provide temporary access to clients to show them your progress.

The next panel is the SEO settings, where you can add an SEO title and description. This information is visible to search engines and will show up in search results.

Configure your WooCommerce coming soon page SEO settings

Plus, you can also add a favicon and your social media thumbnails. And if you want to block search engines from indexing your page, you can turn on the ‘Enable No Index’ option.

Finally, you can add any third-party scripts like your Google Analytics tracking code and Facebook pixels under the Scripts tab.

Configurações de scripts de página de destino

Step 6. Publish Your WooCommerce Coming Soon Page

Before making your coming soon page live on your online store, it’s a smart idea to preview it on SeedProd’s mobile preview screen. That way, you can ensure everything looks good on mobile devices.

To do that, click the mobile preview icon in the bottom toolbar, and you’ll see a live mobile preview of your page.

Preview your woocommerce coming soon page on mobile

From there, you can edit your design and even hide certain elements from showing on desktop or mobile.

For example, to hide the social icons on mobile, all you need to do is click the element, select the Advanced tab, and turn on the Hide on Mobile option under the Device Visibility heading.

Hide coming soon page elements with device visibility

Your social icons are greyed out on your live preview, but on your live page, they won’t show at all.

When you’re ready to publish your WooCommerce coming soon page, click the drop-down arrow beside the Save button and click Publish.

Publish your woocommerce coming soon page

Step 7. Enable Coming Soon Mode for WooCommerce

Now all that’s left is to turn on your coming soon page for WooCommerce. To do that, go back to the SeedProd dashboard by clicking SeedProd » Pages from the WordPress dashboard panel on the left.

Then under the Coming Soon Mode heading, switch the toggle button to ‘Active.’

enable woocommerce coming soon page

Now, when visitors come to your WooCommerce website, they’ll see your coming soon page, where they can get updates on your launch time and sign up for your emails.

WooCommerce coming soon page example

WooCommerce Coming Soon Page FAQs

What is a WooCommerce coming soon page?

A WooCommerce coming soon page is a placeholder page that you can use on your online store when it’s under construction or not yet ready to be fully live. It’s a great way to generate interest and build your customer base before you even launch.

Can I collect email addresses on my WooCommerce coming soon page?

Yes. With SeedProd, you can include an email sign-up form. This can help you build your email list before your site launches.

Can I customize the look and feel of my shop’s coming soon page?

SeedProd’s drag-and-drop page builder lets you customize the design of your coming soon page. You can typically change the text, colors, background images, and more without writing code.

Will my WooCommerce coming soon page be SEO-friendly?

SeedProd offers SEO settings, allowing you to optimize your page for search engines.

What happens to my coming soon page once my WooCommerce shop goes live?

Once your website is ready to go live, you can deactivate your WooCommerce coming soon page through the plugin settings. Visitors will then be redirected to your live eCommerce site.

And that’s it! You’ve successfully added a coming soon page to your WooCommerce site.

Veja como a Mustard Seed usou o SeedProd para lançar sites de clientes neste estudo de caso.

We hope this article helped you learn how to create a WooCommerce coming soon page for your online store. You might also like this guide on how to enable maintenance mode for WooCommerce shop pages.

Obrigado pela leitura. Se você gostou deste artigo, siga-nos no YouTube, no Twitter e no Facebook para obter mais conteúdo útil para expandir seus negócios.

avatar do autor
Stacey Corrin Escritor
Stacey escreve sobre WordPress e marketing digital há mais de 10 anos e sobre outros tópicos há muito mais tempo. Além disso, ela é fascinada por web design, experiência do usuário e SEO.

Divulgação: Nosso conteúdo é apoiado pelo leitor. Isso significa que, se você clicar em alguns de nossos links, poderemos receber uma comissão. Recomendamos apenas produtos que acreditamos que agregarão valor aos nossos leitores.