Como personalizar a página do carrinho WooCommerce sem codificação (grátis)

A personalização da página do carrinho WooCommerce oferece vários benefícios, incluindo o abandono da página do carrinho, mas fazer isso sem problemas não é moleza.

A página do carrinho leva à decisão final sobre finalizar a compra ou abandonar o carrinho. Você não gostaria que os compradores abandonassem o carrinho, certo? É aí que você precisa personalizar a página do carrinho do WooCommerce. 

Neste blog, você encontrará um guia passo a passo sobre como personalizar as páginas do carrinho WooCommerce sem qualquer codificação.

Vamos começar…

Qual é a aparência de uma página de carrinho WooCommerce padrão

WooCommerce provides a very basic layout of a Cart page. Although different themes add styles to the WooCommerce cart page, it still kinda looks the same.

Aqui estão os elementos comuns do design de uma página de carrinho WooCommerce (incluídos, mas não limitados a):

🔹Miniaturas ou imagens de produtos 🔹Nomes dos produtos 🔹Preços dos produtos 🔹Seletor de quantidade ou campo de entrada 🔹Botão Remover item 🔹Subtotal para cada item 🔹Subtotal total do pedido 🔹Campo do código do cupom (se aplicável) 🔹Resumo dos totais do carrinho (impostos, frete, descontos, etc.)

🔹Custos e opções de envio estimados 🔹Sugestões de produtos para venda cruzada ou upsell 🔹Subtotal do item do carrinho 🔹Total de itens do carrinho (incluindo impostos e frete) 🔹Botões ou links de atualização de quantidade 🔹Atributos do produto (tamanho, cor, etc., se aplicável) 🔹Endereço de entrega e seleção de método 🔹Prossiga para o botão de finalização da compra

Você pode editar a página do carrinho WooCommerce e personalizar os elementos de acordo com suas necessidades. Antes disso, vamos dar uma olhada na aparência da página padrão do carrinho WooCommerce em diferentes temas.

Here is how the WooCommerce cart page design looks on the WordPress Twenty Twenty theme:

Here is how the cart page design looks on the Twenty Twenty One theme of WordPress:

Até mesmo um tema Elementor popular como Olá Elementor lhe dará um design de página de carrinho WooCommerce de aparência muito básica com o mesmo layout antigo.

Acho que você concordará que todas as páginas do carrinho acima têm o mesmo layout e não oferecem nada sofisticado ou extraordinário

Por que personalizar a página do carrinho WooCommerce

As per the November 2025 report of BuiltWith, 6.16 million+ live websites use WoCommerce.

WooCommerce permite que você crie um site de comércio eletrônico totalmente funcional e pronto para usar com seus modelos, incluindo uma página de carrinho em um piscar de olhos. Muitos desses sites usam os modelos padrão do WooCommerce para o carrinho e outras páginas.

Mas você não gostaria que a página do carrinho do seu site fosse semelhante a outras, pois isso provavelmente desanimará seus compradores. Para se destacar da multidão, as edições da página do carrinho WooCommerce ou a personalização do carrinho WooCommerce podem ser úteis.

Também é um fato que cerca  70% de pessoas abandonam seu carrinho de compras e nunca finalizar a compra. Isso mostra como é importante personalizar a página do carrinho WooCommerce.

Use WooCommerce abandoned cart plugins to recover lost sales by automatically reminding customers to complete their purchases.

E é sabido que as pessoas se sentem atraídas por coisas diferentes e que se destacam na multidão.

Portanto, não deixe a página do seu carrinho se perder na multidão, em vez disso personalize-a para que se destaque e ajude você a conseguir mais pedidos. 

Agora a questão é como você pode obter uma página de carrinho que se destaque? Bem, existem duas maneiras de criar um design de página de carrinho Woocommerce.

1. Editing the WooCommerce files (requires you to know to code)
2. Use a drag-and-drop plugin

Default WooCommerce Cart vs Customized Cart

Here’s a side-by-side comparison between the default WooCommerce cart and customize WooCommerce cart:

Recurso	Default WooCommerce Cart	Customized WooCommerce Cart
Layout Flexibility	Limitado	Totalmente personalizável
Mobile Experience	Básico	Optimized and responsive
Checkout Visibility	Padrão	Sticky checkout buttons
Upsell Features	Minimal	Advanced upsells and cross-sells
Design Customization	Limitado	Full branding control
AJAX Cart Updates	Limitado	Smooth dynamic updates
Trust Signals	Not included	Easily added
Free Shipping Progress	Não disponível	Fully supported
Experiência de usuário	Generic	Conversion-focused
Average Order Value	Padrão	Potentially higher

What Can You Customize on the WooCommerce Cart Page?

A well-optimized cart page can improve user experience, reduce cart abandonment, and increase conversions significantly.

Here are the most important elements you can customize without coding:

Change Cart Layout

You can completely redesign the default WooCommerce cart layout using page builders or WooCommerce plugins. Rearranging sections, changing product positioning, and simplifying the cart flow can create a smoother shopping experience.

You can customize the layout for a two-column cart, sticky order summary sections, compact mobile cart views, and AJAX-powered cart updates.

Add Trust Badges

Trust badges help reassure customers before checkout. Adding secure payment icons, money-back guarantees, SSL badges, and delivery assurance can increase buyer confidence.

Trust badges are especially effective for first-time buyers. Examples include secure checkout badges, PayPal/Stripe verification icons, free returns guarantee, fast shipping labels, and trust signals.

Enable Sticky Checkout Button

A sticky checkout button keeps the “Proceed to Checkout” CTA visible while users scroll through the cart page. This helps for faster checkout access, improved mobile usability, reduced friction, and higher conversion rates.

Sticky checkout buttons work particularly well for long carts on mobile devices.

Add Coupon Field Styling

The default WooCommerce coupon field looks very basic. Styling the coupon area can make promotions more noticeable and user-friendly.

You can customize coupon field colors, button styles, discount success messages, and expandable coupon sections. 

Show Upsell/Cross-Sell Products

Upsells and cross-sells encourage customers to add more products to their orders directly from the cart page. You may add upsell/cross-sell sections like “Frequently Bought Together,” “You May Also Like,” “Complete the Look” and “Related accessories.”

Then place them strategically to increase average order value significantly.

Edit Cart Table Design

The cart table is one of the most visible elements on the page. Customizing it helps improve readability and usability.

You can modify product image size, typography, table spacing, product row layout, and remove unnecessary columns. 

Add Quantity Buttons

Instead of manually typing product quantities, customers can use plus (+) and minus (–) buttons. Adding these buttons is very useful for faster quantity updates, better mobile experience, reduced input errors, and improved usability.

Enable Side Cart / Mini Cart

A side cart or mini cart allows customers to view cart contents without leaving the current page. These carts guarantee faster shopping experience, reduced interruptions, better user engagement, and improved conversion flow

Add Progress Bars (Free Shipping)

Free shipping progress bars motivate users to spend more.

Exemplo:

“You’re only $15 away from FREE shipping!”

These progress indicators create urgency and encourage larger purchases.

Add Shipping Calculator

A shipping calculator helps users estimate delivery costs before checkout. Customers can avoid surprises during checkout that would lead to cart abandonment. 

Por que editar o código para obter uma página de carrinho WooCommerce personalizada não é uma boa ideia

Embora editar o código para obter a página do carrinho desejada seja uma opção, não é recomendado para não codificadores. Como você escolheu uma plataforma pronta para usar como o WooCommerce para construir seu site, acho que não está procurando codificar nada manualmente.

Aqui estão alguns dos motivos pelos quais programadores novatos ou não codificadores devem evitar a edição do código padrão para fins de design da página do carrinho WooCommerce.

• Requer que você seja um programador especialista e conheça HTML, CSS, Javascript e PHP como um profissional.
• Se o código não for editado e otimizado de forma eficiente, seu site poderá ficar lento.
• Você precisará alterar o código toda vez que quiser alterar o tema WooCommerce
• Quando o WooCommerce apresentar uma nova atualização, você será solicitado a fazer novas alterações para tornar o código compatível com uma nova versão do WooCommerce
• Você também pode perder todo o seu código quando o WooCommerce for atualizado, se não criar um tema filho.

Além disso, se você estiver usando plataformas como WordPress e WooCommerce para evite codificar em primeiro lugar, então por que aprender a codificar apenas para editar uma página de carrinho, certo?

Sem problemas. Tenho outro processo que você pode usar para personalizar o design da página do carrinho sem precisar codificar. Nem mesmo uma única linha. Promessa!

Vamos ver como editar a página do carrinho WooCommerce sem conhecimento de codificação!

Como personalizar a página do carrinho WooCommerce usando um plug-in de arrastar e soltar

Now you can design a cart page with easy drag-and-drop technology. Thanks to the WooCommerce PageBuilder plugin ShopEngine.

Existem muitos top WordPress shopping cart plugins for WooCommerce, ShopEngine is the ultimate WooCommerce builder with premade templates, and widgets to custom build your WooCommerce pages and modules with useful eCommerce functionalities. With this plugin, you get complete control over the design of your WooCommerce pages including the Cart page.

Enquanto o ShopEngine oferece um pré-fabricado Modelo de carrinho, você pode criar sua página de carrinho do zero e também personalizar o carrinho WooCommerce. Neste blog, orientarei você no processo de edição de uma página de carrinho WooCommerce para criar uma nova do zero.

We recommend to create a custom shop page to showcase your products in the best style.

Etapa #1: Instale Elementor e ShopEngine

Para iniciar o processo de personalização da página do carrinho no WooCommerce, você precisará de dois plug-ins

1. Elementor
2. WooCommerce
3. ShopEngine 

Como ShopEngine é um construtor de páginas WooCommerce para Elementor e requer Elementor, certifique-se de instalar Elementor primeiro. 

Etapa #2: Crie um modelo de página de carrinho

Depois de instalar os dois plug-ins, crie um modelo de carrinho. Para criar um modelo de página de carrinho:

• Vá para: Painel => ShopEngine => Modelo de Construtores
• Clique sobre Adicionar novo para abrir a janela de configurações do modelo
• Dar uma Nome do modelo da sua preferência
• Escolher Digite como carrinho no menu suspenso
• Ligar a opção Definir padrão para substituir qualquer página de carrinho existente
• Escolha a opção em branco em Projeto de amostra 
• Clique em Salvar alterações atualizar

Observação: Para obter um Modelo de carrinho pronto para usar, escolha a opção “Desenho de amostra 1” ao criar o modelo. Você também pode editar cada elemento desse modelo predefinido. Eu escolhi em branco porque vou criar um do zero

Etapa #3: Escolha um layout/estrutura

Agora é hora de escolher um layout. Para começar 

• Vá para ShopEngine => Módulo Construtores
• Passe o mouse sobre o modelo do carrinho da lista
• Clique em Editar com Elementor

• Assim que o Editor Elementor abrir Clique na seção Adicionar nova seção (+) ícone 
• Agora escolha o estrutura/layout você gosta

Etapa #4: Projete a página do carrinho usando widgets do ShopEngine

ShopEngine provides five widgets exclusively to design a WooCommerce Cart Template. Along with Cart Template widgets, you can also use the Formulário de cupom widget e mais de cinco widgets gerais para construir sua página de carrinho.

Para este blog, vou usar os seguintes widgets:

• Mesa de carrinho: O widget do carrinho exibe todos os produtos do carrinho em formato de tabela com preço, quantidade e subtotal. Os clientes podem atualizar a quantidade do produto e também limpar o carrinho com um clique.
• Total do carrinho: Este widget mostra todos os métodos de envio disponíveis e o total total do pedido.
• Voltar para a loja: Este widget fornece um botão com um link que leva você de volta à página da loja.
• Formulário de cupom de finalização de compra: Os clientes podem usar seu cupom de desconto usando este widget.
• Produto da oferta: Este widget permite que você exiba seus produtos em promoção na página do carrinho, também com uma contagem regressiva que exibe o período de programação de venda. Este é um widget geral do ShopEngine.
• Venda cruzada: A venda cruzada exibe todos os produtos de venda cruzada de forma atraente na página do carrinho.

Primeiro, você precisa ligue os widgets você deseja usar na página do carrinho. Para ligar  

• Vá para Painel de administração => ShopEngine => Widgets. 
• Role e pesquise o widget que deseja usar
• Habilitar os widgets que você deseja usar
• Clique em Salvar alterações no topo da página

Now it’s time to drag and drop the WooCommerce cart widgets into your layout. Go back to the Cart page editor mode:

• Procurar para o widget
• Arraste e solte the WooCommerce cart widgets (one by one)

Observação: Você pode ocultar o botão Continuar comprando e o botão Ocultar tudo.

As ShopEngine is totally compatible with Elementor, you can use multiple layouts on the same page. For the next part, let’s use a different layout.  To do so, I am going to add a new section with a different structure and drag and drop Cross-sell and Deal products widgets.

Observação: Você precisa adicionar produtos de venda cruzada and set products on sale with schedules from the admin dashboard under product settings for Cross-sell and Deal products to show up on the front end.

Os produtos Cross-Sell e Deal oferecem diferentes configurações que você pode personalizar. Assim, após arrastar e soltar o widget, personalize as configurações de acordo com sua preferência.

Com o widget de venda cruzada, você obtém opções como ativar/desativar Ativar controle deslizante, mostrar/ocultar venda em Flash, preço de venda, botão de carrinho e o número de produtos a serem exibidos nas configurações de conteúdo. Para controles deslizantes, você tem opções como Slides Per View, Loop e Autoplay. Velocidade do slide, etc. Além disso, você também tem as opções Ordenar por e Ordenar na guia Avançado.

Os produtos Deal fornecem a você configurações de conteúdo como Ordem, Ordenar por, Data, Mostrar Produto, Coluna, Intervalo de Coluna e Intervalo de Linha. Você também obtém outras configurações que incluem Ativar venda, Selo, Selo de venda, Venda, Limite de palavras de título, Selo de porcentagem, Relógio de contagem regressiva e Dias.

Etapa #5: Personalizar os parâmetros de estilo da página Woocommerce Cart

Não apenas estrutura, com ShopEngine você também obtém controle total sobre o estilo da página do seu carrinho.

Para alterar os parâmetros de estilo dos widgets do ShopEngine, passe o mouse sobre o widget que deseja editar para encontrar a opção Editar no canto superior direito. Clique nessa opção para encontrar todas as configurações do carrinho Woocommerce para conteúdo e estilos no painel Elementor colocado no lado esquerdo.

Vamos dar uma olhada nas configurações de estilo que você pode personalizar para cada um dos widgets usados neste blog:

Mesa do carrinho: 

Você pode alterar as configurações de estilo do cabeçalho da tabela, corpo da tabela, imagem do produto e quantidade. Rodapé da tabela e fonte global. Para mais detalhes, você pode conferir nosso documentação na tabela Carrinho.

Voltar para a loja:

You change Button Alignment, Typography, Border Color, Border Radius, and Box Shadow. For that, you can check out Return To Shop Widget.

Formulário de cupom:

For the coupon form, you will get a style setting for info, description, coupon form, apply button, and global font. You can easily do that with the Coupon form.

Total do carrinho:

Para o widget Total do carrinho, você tem muitas opções de estilo para alterar o estilo da tabela, entrada, botão de atualização de checkout e fonte global. Para configurações de estilo de carrinho WooCommerce mais detalhadas, você pode conferir nosso documentação no total do carrinho.

Venda cruzada: 

For the Cross-sell widget, you get various style options which include styles for items, flash sales, image, Title racing, price, Add to cart, Slider style, and global font. For more details about Cross, Sale style check out the documentation.

Produtos da oferta:

Você obtém diferentes opções de estilo para invólucro do produto, imagem do produto, emblema do produto, relógio de contagem regressiva, estilo de conteúdo, barra de estoque e progresso e fonte global. Para saber mais detalhes sobre as opções de estilo confira nossa documentação no widget Deal Product.

Step #6: Update and Preview custom WooCommerce cart page design

Depois de alterar os estilos, clique em Atualizar para salvar as alterações e clique em Visualização para ver as mudanças.

Se você seguiu o layout e as configurações mencionados neste blog, você deve criar uma página de carrinho personalizada no WooCommerce usando ShopEngine como a mostrada abaixo:

After optimizing the cart page and customizing it, make sure to customize the WooCommerce checkout page to get more conversions. Also, you can offer WooCommerce floating cart to increase the number of add to carts.

Best Practices for WooCommerce Cart Page Optimization

The goal is to create a faster, simpler, and more conversion-focused shopping experience.

Here are some proven optimization practices:

Keep Checkout Button Visible

Your checkout button should always be easy to find. Use high-contrast colors, clear CTA text, and sticky positioning if necessary.

A hidden checkout button can reduce conversions dramatically.

Reduce Distractions

Avoid cluttering the cart page with excessive banners, popups, or unnecessary widgets.

Focus users on one primary action, and that is to complete the purchase.

Add Trust Signals

Customers need reassurance before entering payment details.

Useful trust elements you can include:

• SSL badges
• Secure payment logos
• Customer reviews
• Return guarantees
• Delivery assurances

These elements help reduce hesitation during checkout.

Show Shipping Information Early

Unexpected shipping costs are one of the biggest reasons for cart abandonment. So, make sure that you display estimated shipping costs, delivery timelines, free shipping eligibility, and shipping calculators.

Use Urgency Carefully

Urgency tactics can increase sales when used correctly. Urgent call-outs include limited-time discounts, low-stock warnings, countdown offers, and free shipping deadlines.

However, overusing urgency can make your store feel spammy.

Enable Mobile-Friendly Carts

A large percentage of WooCommerce traffic comes from mobile devices. So, make sure your cart page has responsive layouts, large touch-friendly buttons, simplified cart tables, and sticky checkout CTAs.

Add One-Click Upsells

One-click upsells encourage users to add complementary products instantly.

Examples include:

• Extended warranties
• Product bundles
• Accessories
• Gift wrapping

Well-placed upsells can increase average order value without disrupting checkout.

Improve Page Speed

Slow cart pages lead to abandoned carts. Always compress images, use lightweight plugins, enable caching, reduce third-party scripts, and optimize the WooCommerce database to optimize the performance of your eCommerce website. 

Common Mistakes When Customizing WooCommerce Cart Pages

Even small customization mistakes can negatively impact conversions and usability.

Here are common issues to avoid:

Overloading the Cart with Popups

Too many popups distract users from checkout and create frustration. Avoid excessive exit popups,  discount overlays, newsletter forms, and chat widgets to keep the shopping experience clean and focused.

Using Too Many Plugins

Use only essential and well-maintained plugins. Installing too many WooCommerce plugins can cause website slowdowns, plugin conflicts, security vulnerabilities, and broken layouts.

Ignoring Mobile Users

A desktop-only cart design can hurt conversions. Mobile optimization should never be optional. So, always test:

• Mobile responsiveness
• Button sizes
• Cart table usability
• Sticky checkout behavior

Making Checkout Confusing

Complex cart experiences increase abandonment rates. Make sure to avoid too many steps, unclear CTAs, distracting layouts, and excessive forms. Always remember that a simple checkout flow converts better.

Hiding Coupon Fields Unnecessarily

Some stores hide coupon fields completely to reduce distractions. However, customers who expect discount codes may leave if they cannot find the coupon option. Instead of removing coupons entirely, consider using collapsible coupon sections.

Bônus: dicas para aumentar as vendas da sua loja de comércio eletrônico usando módulos ShopEngine

Agora você sabe como construir e personalizar uma página de carrinho no woocommerce. ShopEngine, além do construtor de modelo de página de carrinho WooCommerce, fornece módulos úteis com importantes funcionalidades de comércio eletrônico que podem impulsionar as vendas da sua loja online. Os módulos do ShopEngine incluem:

• Olhada rápida
• Category page
• Customize the WooCommerce product page
• Amostras de variação
• Lista de Desejos
• Comparação de Produto

Tenho certeza de que sendo proprietário de uma loja WooCommerce, você sabe como essas funcionalidades são importantes para tornar a experiência de compra online uma boa experiência. Se falarmos sobre o modelo de carrinho, usando o Olhada rápida botão e o Lista de Desejos botão na venda cruzada proporcionará aos seus clientes uma melhor experiência de compra. E isso aumenta a chance de seus clientes comprarem mais produtos.

Com o Quick View, os clientes podem conferir facilmente as informações completas de qualquer produto com apenas um clique. Da mesma forma, com apenas um clique, os usuários podem adicionar o produto à sua lista de desejos usando o botão do módulo de lista de desejos para finalizar a compra mais tarde. Ambas as funções podem desempenhar um papel significativo no aumento das vendas de produtos.

If the cart page is not showing properly, there could be an empty cart error. Here is how to solve empty cart error issue.

Portanto, não basta personalizar a página do seu carrinho, use os módulos do ShopEngine para proporcionar aos seus clientes uma ótima experiência de compra e aumentar as vendas da sua loja.

Por que atualizar para o ShopEngine Pro?

Bem, honestamente, o ShopeEngine fornece recursos suficientes para tornar sua loja online boa. Mas por que você deveria se contentar com o bem quando pode obter o melhor, certo?

ShopEngine Pro oferece uma grande quantidade de recursos que farão das compras online em sua loja de comércio eletrônico a melhor experiência de compra para seus clientes. Além de personalizar as páginas do carrinho de woocommerce, você pode acessar Mais de 20 módulos que incluem Flash sale countdown, badges, Sales Notification, Quick checkout, Parietal payment, Currency Switcher, e muitos mais.

Não apenas a satisfação do cliente, os recursos do ShopEngine são projetados para tornar o gerenciamento da loja online muito fácil também com módulos como Preorder, Backorder, Additional Checkout Field, e muitos mais.

Não esquecer 16+ pré-fabricados modelos com controle total de personalização WooCommerce e Mais de 70 widgets avançados para criar todos os modelos WooCommerce do zero, se desejar.

Quando se trata da página do carrinho, o ShopEngine também permite que você crie uma página de carrinho personalizada WooCommerce para sua loja online.

Um plugin com tantos recursos, modelos pré-fabricados e módulos que também por um preço bem razoável você certamente experimentará, certo?

Obtenha sua versão do ShopEngine hoje e nunca mais se preocupe em como personalizar o WooCommerce novamente!

Perguntas frequentes

Can you customize WooCommerce cart page without Elementor?

Yes, you can customize the WooCommerce cart page without Elementor by using WooCommerce-compatible plugins, block editors, or theme customization options. Many plugins offer drag-and-drop cart customization without requiring coding knowledge.

What is the best WooCommerce cart plugin?

The best plugin depends on your goals. Popular options include cart drawer plugins, checkout optimization tools, and funnel builders that offer AJAX carts, upsells, sticky checkout buttons, and cart page customization features.

How do you edit the WooCommerce cart layout?

You can edit the WooCommerce cart layout using WooCommerce blocks, page builders, custom templates, or no-code cart customization plugins. Most modern tools allow drag-and-drop editing.

Can you create a side cart in WooCommerce?

Yes, you can create a side cart or mini cart in WooCommerce using AJAX cart plugins. Side carts allow users to view and update their cart without leaving the current page.

Does cart customization improve conversions?

Yes, optimizing the WooCommerce cart page can improve conversions by reducing friction, simplifying checkout, improving mobile usability, and increasing customer trust.

Palavras Finais

Congratulations! You have successfully redesigned your WooCommerce custom cart page. Wasn’t that easy? 

Bem, é isso que o ShopEngine faz, agora você sabe como personalizar uma página de carrinho WooCommerce sem codificação.

Portanto, não limite sua loja online apenas aos estilos padrão, redesenhe todo o seu site WooCommerce e use os módulos para tornar seu negócio online mais bem-sucedido do que nunca. 

Então, qual página do WooCommerce você vai personalizar a seguir? Não se esqueça de compartilhar sua experiência de uso do ShopEngine.