Do you want to create a custom checkout page for your WooCommerce store?
Imagine losing 7 out of every 10 potential sales just because customers get stuck at the checkout. That’s what happens to many online stores, and it’s often because their checkout pages are confusing or hard to use.
But don’t worry – there’s a simple fix. By making your WooCommerce checkout page better, you can turn more of those almost-sales into real money in your pocket. It’s like smoothing out the bumps in the road so more customers can easily cross the finish line.
In this guide, I’ll show you exactly how to improve your checkout page, step by step. And the best part? You don’t need to know any complicated computer code to do it. I’ll make it easy for you to create a checkout page that helps, not hinders, your customers.
How to Customize WooCommerce Checkout Page:
Why You Should Customize the WooCommerce Checkout Page
The checkout page is the last thing customers see before completing their purchase. It can mean the difference between converting or abandoning your store altogether.
That’s why it’s essential to ensure your WooCommerce checkout page is designed well and functions in a way that encourages conversions.
The default WooCommerce checkout page is a great place for smaller stores to start. It has everything you need to start an online store.
But as your business grows, you’ll soon find you can provide a better experience by:
- Including your custom branding
- Adding custom fields to your checkout form
- Changing the page design and layout
- Directly linking products to your checkout page
- Changing your input field labels and button text
- Upselling other products or services
Whether you want to redesign your entire WooCommerce checkout page or make some minor edits, there’s one thing to keep in mind. It should be easy!
Luckily, the solution below makes customizing the WooCommerce checkout page effortless.
Como personalizar sua página de checkout do WooCommerce
If you don’t have the time to learn how to code or the budget to hire a developer, customizing your checkout page might seem near impossible.
But the truth is, it isn’t with the right tools at hand.
In the tutorial below, we’ll show you how to customize your WooCommerce checkout page with SeedProd.
SeedProd is the best WordPress landing page builder with drag-and-drop functionality. It allows you to build and customize any page in WordPress visually.
This means you can use the drag-and-drop page editor to create custom pages and see the results in real-time. It removes the need to code your page manually, which is excellent news for people with limited design and technical skills.
SeedProd comes with hundreds of professionally designed landing page templates to get started quickly. You can then customize each template in the visual editor using flexible page blocks like:
- Optin forms and login forms
- Imagens e vídeos
- Text and headings
- Social media profile and sharing buttons
- Custom contact forms with 3rd-party plugins like WPForms
- Brindes do RafflePress
- Depoimentos e classificações por estrelas
- Temporizadores de contagem regressiva e barras de progresso
- Navigation menus and accordions
- E mais.
SeedProd also has landing page blocks dedicated to WooCommerce stores, including add-to-cart buttons, checkout, shopping cart, and flexible product grids. This means you can easily create versatile product, cart, and checkout pages for your eCommerce store without hiring a developer.
With that in mind, let’s look at how to customize the WooCommerce checkout page with SeedProd.
1. Instale e ative o SeedProd
The first step is to get started with SeedProd and download the plugin to your computer. To access SeedProd’s WooCommerce integration features, you’ll need at least a SeedProd Pro Plan.
Depois de fazer o download do SeedProd, você precisa instalar e ativar o plug-in em seu site do WordPress. Você pode seguir estas etapas para instalar um plug-in do WordPress se precisar de ajuda.
After activating the plugin, you’ll see a welcome screen.
A tela solicita que você insira sua chave de licença do SeedProd. Você pode encontrar sua chave fazendo login na sua conta SeedProd e clicando no link View License Key, Details, and Downloads.
From there, you can copy your key to save it to your clipboard. After, paste the key into the license key field and click the Verify Key button.
Now scroll a short way down the page and click the Create Your First Page button.
Isso o levará ao painel da página de destino do SeedProd. Na parte superior da página, há quatro modos de página diferentes:
- Em breve
- Modo de manutenção
- 404
- Login
Each page mode allows you to enable specific landing pages with a single click.
For instance, you can enable Coming Soon mode to add a coming soon page telling people about your new store. Or you can enable 404 Page mode to add a custom 404 error page to your site.
Under that section is where you’ll see a list of any other pages you create with SeedProd. Since we haven’t made one yet, click the Create New Landing Page button to get started.
2. Criar uma nova página de destino
Depois de clicar no botão para criar uma nova página de destino, você verá a biblioteca de modelos de página de destino do SeedProd.
Você pode filtrar os modelos por meta ou setor clicando nas guias na parte superior.
Each template is multifunctional. As such, you can use any design and customize it in the drag-and-drop editor to look any way you like.
For this guide, we’ll show you how to create and customize your WooCommerce checkout page from scratch using the Blank Template. This will give you an excellent overview of how easy it is to use SeedProd.
Portanto, passe o mouse sobre a miniatura do Blank Template e clique no ícone de marcação.
Em seguida, será exibida uma janela pop-up solicitando que você insira um nome e um URL para a sua página. Você pode alterar essa configuração posteriormente, portanto, dê o nome que desejar.
Agora, clique no botão Save and Start Editing the Page (Salvar e começar a editar a página ) para abrir sua página.
Na tela seguinte, você verá o editor da página de destino do SeedProd.
Ele tem um layout simples de dois painéis:
- Painel esquerdo: Blocos de página e seções para criar e personalizar sua página
- Painel direito: Pré-visualização da aparência de sua página de destino em tempo real
Adding content to your page is as simple as dragging a block from the left and dropping it into place on the right. We’ll show you how to do this in the next step.
3. Add the Checkout Block to Your Page
Before you start customizing your WooCommerce checkout page, let’s set up a basic checkout page structure.
In the right-hand panel, choose a page layout by clicking any of the column options.
As you can see below, it adds a simple framework to your page. This is where any page elements you add will sit.
Em seguida, você precisa adicionar o checkout do WooCommerce à sua página. No painel esquerdo, role para baixo até a seção WooCommerce. Em seguida, clique no bloco Checkout e arraste-o para uma das colunas que você criou anteriormente.
You should now see your WooCommerce checkout form right inside your landing page design. When you click your checkout form, you’ll see the form Style settings in the left-hand panel.
In this area, you can customize your WooCommerce checkout form by:
- Criar o layout de 1 ou 2 colunas
- Changing the header fonts and colors
- Editing the checkout fields fonts, colors, spacing, and borders
- Alterar o estilo, a fonte e a cor do botão de checkout
- Adição de uma cor de alerta personalizada
- Alterar o texto, as cores, as bordas e as fontes do carrinho
- Adição de fontes e cores personalizadas à seção de detalhes de pagamento
Now click the Templates tab, and you’ll see a variety of custom styles for your checkout fields. Click any style to add it to your checkout form instantly.
Before moving on, click the green Save button in the top-right corner of your screen to save your progress.
4. Customize Your Checkout Page Design
With your landing page now looking more like it should, let’s look at some other ways to customize your WooCommerce checkout page.
Adding a Header to your WooCommerce Checkout Page
To help customers find their way around, it’s good practice to add a header to your checkout page. SeedProd offers an easy way to do this with Sections.
Ao lado do painel de blocos, clique na guia Sections (Seções ). Isso mostra vários layouts predefinidos que você pode adicionar à sua página com um único clique.
Por exemplo, ao clicar na seção Headers (Cabeçalhos ), são exibidos três estilos diferentes de cabeçalho pré-fabricados. Escolha um design de sua preferência e clique no ícone de adição para importá-lo para o seu design.
By default, any new section is added to the bottom of your page. To move it to your header area, hover your mouse over it and click the move section icon. Then drag the entire section to the top of the page.
Depois, você pode clicar em qualquer elemento dentro da seção de cabeçalho para ver as opções de personalização no painel esquerdo. Por exemplo, ao clicar no bloco de imagem dentro da seção de cabeçalho, você pode carregar uma nova imagem para usar como logotipo.
Você pode até mesmo excluir o bloco de botões no cabeçalho e substituí-lo pelos ícones do seu perfil social.
Adding Suggested Products to your WooCommerce Checkout Page
With SeedProd’s powerful WooCommerce integration, it’s easy to cross-sell and promote your products and services from any landing page. The range of product grid blocks allow you to show:
- Produtos recentes
- Produtos em promoção
- Produtos mais vendidos
- Produtos em destaque
- Produtos com as melhores classificações
Just select the Products Grid block and drag it into place on your page. You can then click the block to see the settings in the left-hand panel.
In this panel, you can choose how many columns of products to display and add pagination to your product grid. You can also filter which products visitors see by choosing a query type from the drop-down menu.
Depois, você pode definir o pedido do produto por:
- Data
- ID
- Pedido de menu
- Popularidade
- Aleatório
- Classificação
- Título
Você também pode optar por mostrá-las em ordem crescente ou decrescente.
Adding Testimonials to Your Checkout Page
Testimonials and star ratings are another great way to add trust and credibility to your checkout page. If potential customers see that people positively review your products, they’re more likely to complete the checkout process instead of abandoning their shopping cart.
To add customer testimonials to your WooCommerce checkout page, drag the Testimonial block from the left panel and drop it into place on your page. Then, you can click the block to see the settings and add your customer testimonials.
Você pode incluir quantos depoimentos quiser e até mesmo exibi-los como um carrossel deslizante de depoimentos.
Configurações de personalização global
As configurações de personalização global do SeedProd permitem que você altere a aparência geral da sua página de checkout do WooCommerce.
Click the gear icon in the bottom-left corner of your screen. This shows a panel of Global Settings for fonts, colors, background, and custom CSS.
Fontes
Expanding the Font heading lets you change your header and body fonts and weights. It’s as easy as picking a Google font from the drop-down menu.
Ou você pode clicar no botão Font Themes (Temas de fontes ) para ver exemplos de diferentes combinações de fontes. A partir daí, basta um clique para aplicá-los à sua página.
Cores
A seção Cores é semelhante. Clique em qualquer cor para ver uma ferramenta de conta-gotas de cores e selecionar cores individuais para títulos, textos, botões e muito mais.
Ou você pode clicar no botão Color Palettes (Paletas de cores ) para escolher entre mais de 20 esquemas de cores predefinidos.
Histórico
Na seção Plano de fundo , é possível alterar a cor, o gradiente e a imagem do plano de fundo. Você pode até mesmo adicionar um fundo de vídeo ou uma apresentação de slides de largura total.
CSS personalizado
And finally, in the Custom CSS section, you can add custom code to customize the WooCommerce checkout page even more.
Quando estiver satisfeito com a aparência de tudo, clique no botão Save (Salvar ).
5. Configure Your Checkout Page Settings
Com as personalizações feitas, vamos examinar algumas outras configurações que podem ser alteradas na página de checkout.
Connecting Your Email List
A primeira são as configurações de marketing por e-mail. O SeedProd permite que você conecte facilmente sua página de destino à sua lista de e-mails.
Clique em Connect (Conectar ) na parte superior da tela e você verá uma grande variedade de serviços populares de marketing por e-mail. Portanto, se quiser pedir aos usuários que assinem seu boletim informativo na página de checkout, use esse painel para vincular seu serviço de marketing por e-mail.
Basta escolher seu provedor favorito e seguir as etapas em nossa documentação de integração de e-mail para fazer a configuração.
Na mesma tela, você pode vincular sua página de checkout a milhares de aplicativos por meio do Zapier, monitorar o desempenho do site com o Google Analytics e protegê-lo contra spam com o Recaptcha.
Configuring Your Page Settings
After connecting your email list, click the Page Settings tab to see other settings you can configure in SeedProd. There are typically 5 sections on the settings page, but this depends on the type of page you build and your SeedProd plan.
Configurações gerais
As configurações gerais permitem que você altere o nome e o URL da página de checkout do WooCommerce. Você também pode alternar entre publicado e rascunho.
If you want to avoid any plugin conflicts and speed up your page, you can enable Isolation Mode. This stops specific header and footer scripts from running and interfering with your performance.
SEO e análise
Under the SEO tab, you can use a WordPress SEO plugin to configure your landing page title tag, meta description, etc. One of the best plugins for this is All In One SEO.
O mesmo se aplica à guia Analytics. Aqui você pode conectar seu plug-in favorito do Google Analytics e monitorar o desempenho da sua página de destino. Por que não experimentar o MonsterInsights for Google Analytics?
If you want more details, you can always check out our MonsterInsights review.
Scripts
In the Scripts area, you can add code to your page header, body, and footer. This could be anything like your tracking cookies, Facebook tracking pixel, or even your analytics script.
Domínio personalizado
If you’re a user of SeedProd’s Pro Plan, you can give any landing page a custom domain that isn’t connected to your existing website.
Por exemplo, se você quiser lançar um novo site e ainda não o tiver configurado, poderá criar uma página em breve no SeedProd em seu site existente e apontá-la para o novo site.
Com essa tática, você pode atrair novos assinantes para a lista do seu futuro site sem precisar fazer uma nova instalação do WordPress.
Depois de definir suas configurações, salve as alterações e clique novamente na guia Design.
6. Publish Your Custom Checkout Page
Before you make your checkout page live, it’s a good idea to test it on mobile devices. If your checkout page isn’t mobile-responsive, it won’t look and perform as well on smaller touch screens like tablets and smartphones.
It could even cause users to abandon their shopping carts out of frustration.
The good news is, SeedProd has a built-in mobile preview option so that you can check your page is mobile-friendly. Just click the mobile icon at the bottom of your screen.
Agora você pode ver a aparência da sua página de checkout no celular e alterar qualquer coisa que não tenha a aparência ou o funcionamento correto.
Quando tudo estiver ótimo, é hora de publicar. Clique na seta para baixo ao lado do botão verde Salvar e clique em Publicar.
Now you can visit the page to see it in action.
Ótimo trabalho! Agora você tem uma incrível página de checkout personalizada do WooCommerce!
7. Assign Your Checkout Page in WooCommerce
There’s 1 one more step until your new checkout page is ready to take orders. You need to set it as your default checkout page in WooCommerce.
To do that, navigate to WooCommerce » Settings and click on the Advanced tab. Next, go to the Checkout page heading, and choose the page you just page from the drop-down menu.
Lembre-se de clicar no botão Save Changes (Salvar alterações ) para armazenar suas configurações.
E é isso!
You now know how to customize the WooCommerce checkout page with SeedProd’s landing page builder. SeedProd’s WooCommerce integration makes controlling the design of your online store super easy.
Além de ser rápido e sem inchaço, o plug-in é tão fácil de usar que até mesmo os iniciantes podem criar uma loja personalizada sem contratar um desenvolvedor.
Então, por que não experimentar você mesmo?
While you’re here, you might also find the following WooCommerce guides helpful:
- How to Customize the WooCommerce Additional Information Tab
- Como adicionar o botão Exibir carrinho no WooCommerce
- Como alterar o título da página da loja no WooCommerce
- Como criar uma impressionante galeria de imagens de produtos no WooCommerce
- Como adicionar classificação por estrelas às páginas de produtos do WooCommerce
- How to Display Related Products in WooCommerce
- Como exibir categorias e tags de produtos no WooCommerce
- Como obter e exibir descrições de produtos no WooCommerce
- How to Display Featured Products in WooCommerce
- Como corrigir o problema de não funcionamento do WooCommerce View Cart
- Como personalizar seu botão Add-to-Cart do WooCommerce
- Como adicionar um ícone de carrinho de compras do WooCommerce nos menus
- Como personalizar as páginas de categoria de produto no WooCommerce
- Como adicionar uma nova seção de produtos do WooCommerce ao WordPress
Obrigado pela leitura! Gostaríamos muito de ouvir sua opinião, portanto, fique à vontade para deixar um comentário com perguntas e feedback.
Você também pode nos seguir no YouTube, no X (antigo Twitter) e no Facebook para obter mais conteúdo útil para expandir seus negócios.
