O widget Adicionar ao carrinho permite que os clientes adicionem produtos ao carrinho de compras virtual. Este é um widget de modelo de produto único. Você pode adicionar este widget para criar sua página de produto única usando ShopEngine.
Vamos aprender como você pode usar o widget Adicionar ao carrinho em seu site wooCommerce:
Passo 1: Habilite o widget #
Para ativar o widget,
- Vá para: ShopEngine > Widgets > Adicionar ao carrinho
- Ligar
- Salvar alterações

Observação: Você também pode ativar o Estoque de Produtos com uma configuração global que ativa todos os widgets do ShopEngine ao mesmo tempo.
Etapa 2: adicionar Adicionar ao carrinho Ferramenta #
Antes de adicionar o widget, você precisa primeiro criar um modelo de produto único. Confira a documentação em como criar um modelo de produto único.
Adicionar Adicionar ao carrinho:
- Vá para ShopEngine > Modelos > Modelo de página de produto único
- Clique em Editar com ElementoR

- Procurar para a opção Adicionar ao carrinho na pesquisa de elementos
- Arraste e solte o widget
- Clique em Atualizar para salvar as alterações.

Etapa 3: configurações de adicionar ao carrinho #
Vá para Conteúdo > Configurações para personalizar as seguintes opções:

- Configurações de quantidade:
- Estilo do botão: Você pode alterar o estilo do botão. Você pode definir os botões de aumentar (+) e diminuir (-) em ambos os lados, ambos à esquerda, ambos à direita ou pode deixá-los como padrão. Você também tem a opção de escolher personalizado Ícone de adição (+) e Ícone Menos (-).
- Estoque:
- Mostrar status do estoque: Você pode mostrar o status do estoque ativando esta opção.
- Variação:
- Descrição da variação: Ative esta opção para mostrar a descrição da variação do produto.
- Ordenação de dados:
- Ativar pedido: Habilite esta opção para personalizar a posição de Quantidade, Adicionar ao carrinho, Check-out rápido, Lista de desejos e posição de comparação. Você pode usar – valor para a posição, quanto menor valor (- 5) terá mais prioridade.
- Posição de quantidade: Você não pode alterar esta opção para produtos do grupo. Nesse caso, esta opção estará sempre em primeiro lugar.
Preencha o restante dos valores de acordo com a ordem em que deseja que apareçam e clique em Atualizar salvar.
Etapa 4: configurações de estilo de adicionar ao carrinho #
Mude para a guia Estilo para ter acesso a todas as opções de estilo.
Expanda o status do estoque e edite as seguintes configurações:

- Tipografia: Você pode alterar a família da fonte, o tamanho da fonte, a espessura da fonte, a transformação e a altura da linha do texto de status do estoque aqui.
- Alinhamento: Você pode escolher o alinhamento à esquerda, à direita ou ao centro.
- Cor em estoque: Escolha a cor do texto quando o produto estiver em estoque.
- Cor fora de estoque: Escolha a cor do texto quando o produto estiver esgotado.
Expandir Botão Adicionar ao carrinho para editar as seguintes opções de estilo:

- Tipografia: Você pode alterar a família da fonte, o tamanho da fonte, a espessura da fonte, a transformação e a altura da linha do botão Adicionar ao carrinho aqui.
- Normal/Hover: Altere a cor e a cor de fundo das visualizações normal e instantânea.
- Tipo de borda: você pode escolher o tipo de borda como sólida, pontilhada, tracejada dupla ou nenhuma.
- Largura: Selecione a largura superior, esquerda, direita e inferior da borda.
- Cor: Escolha uma cor para a borda.
- Raio da fronteira: Coloque os valores superior, direito, inferior e esquerdo para o raio.
- Preenchimento: Ajuste o preenchimento superior, esquerdo, direito e inferior.
- Margem: Dê uma margem para a parte superior, esquerda, direita e inferior, se desejar.
Expandir Entrada de quantidade para editar as seguintes opções de estilo:

- Tipografia: Você pode alterar a família da fonte, o tamanho da fonte, a espessura da fonte, a transformação e a altura da linha para a opção de entrada de quantidade.
- Cor: Escolha uma cor para o texto da quantidade.
- Cor de fundo: Você pode alterar a cor de fundo aqui, se desejar.
- Botão Mais Menos:
- Tamanho do ícone: Sselecione o tamanho do botão mais-menos.
- Cor e fundo: Altere a cor e a cor de fundo da visualização normal e instantânea.
- Preenchimento de botões: Forneça um valor de preenchimento ao redor do botão.
- Preenchimento de entrada: Forneça um valor de preenchimento ao redor do campo de entrada.
- Tipo de borda: você pode escolher o tipo de borda como sólida, pontilhada, tracejada dupla ou nenhuma.
- Largura: Selecione a largura superior, esquerda, direita e inferior da borda.
- Cor: Escolha uma cor para a borda.
- Raio da fronteira: Coloque os valores superior, direito, inferior e esquerdo para o raio.
- Margem envolvente: Forneça um valor superior, direito, esquerdo e inferior para a margem.
Expandir Variações para editar as seguintes opções de estilo:

- Alinhamento: Você pode escolher o alinhamento à esquerda, à direita ou ao centro.
- Etiqueta/ Descrição/ Preço: Altere as guias e edite a tipografia, a cor, o estilo de exibição do rótulo, a descrição e o preço.
- Largura da etiqueta: Selecione a largura do rótulo em pixels aqui.
- Margem do item de variação (px): Selecione aqui a margem entre os itens de variação.
- Margem de envoltório de variação: Forneça os valores superior, esquerdo, direito e inferior para a margem de ajuste de variação.
- Menu suspenso de variação: Escolha a cor do menu suspenso aqui.
- Tipo de borda: você pode escolher o tipo de borda como sólida, pontilhada, tracejada dupla ou nenhuma.
- Largura: Selecione a largura superior, esquerda, direita e inferior da borda.
- Cor: Escolha uma cor para a borda.
- Raio da fronteira: Coloque os valores superior, direito, inferior e esquerdo para o raio.
Expandir Amostras de variação para editar as seguintes opções de estilo relacionadas às amostras de variação:

- Cor/Imagem/Etiqueta: Alterne para cada guia para definir a largura e a altura da amostra e o raio da borda para cor, imagem e rótulo.
- Tipo de borda: Você pode escolher o tipo de borda como sólida, pontilhada, tracejada dupla ou nenhuma.
- Largura: Selecione a largura superior, esquerda, direita e inferior da borda.
- Cor: Escolha uma cor para a borda.
- Cor da borda selecionada: Escolha uma cor de borda para os itens selecionados.
Expandir Lista de Desejos para editar as seguintes opções de estilo relacionadas às listas de desejos:

- Tamanho do ícone: Selecione o tamanho do ícone para a lista de desejos.
- Normal/Hover: Escolha a cor e a cor de fundo para a visualização normal e instantânea.
- Tipo de borda: Você pode escolher o tipo de borda como sólida, pontilhada, tracejada dupla ou nenhuma.
- Largura: Selecione a largura superior, esquerda, direita e inferior da borda.
- Cor: Escolha uma cor para a borda.
- Raio da fronteira: Coloque os valores superior, direito, inferior e esquerdo para o raio.
- Preenchimento: Ajuste o preenchimento superior, esquerdo, direito e inferior.
- Margem: Dê uma margem para a parte superior, esquerda, direita e inferior, se desejar.
Clique em Atualizar para salvar todas as alterações que você fez.
Aqui está uma prévia do widget Adicionar ao carrinho:
