ShopEngine’s Lista de Desejos widget lets your customers save their favorite products and revisit them anytime without losing track. Fully customizable and easy to set up, it seamlessly integrates into your WooCommerce store to deliver a smoother, more personalized shopping experience.

ShopEngine Wishlist #

Certificar-se ShopEngine Pro is installed and active on your site before you start.

Step 1: Turn ON the Account Wishlist Widget #

Go to ShopEngine’s widgets and turn ON Account Wishlist

Step 2: Turn ON the Account Wishlist Widget #

Create a new template from ShopEngine’s builder’s templates.

Wishlist template settings –

• Nome: Give a name to the template
• Template Type: Choose My Account Wishlist from the list
• Template Activation: Enable the option
• O blank template is selected
• Check if the Elementor builder is selected
• Clique Edit with Elementor or Save Changes

Step 3: Turn ON the Account Wishlist Widget #

Search for My Account Wishlist widget and drag and drop it.

Customize Wishlist Content #

In the content tab, you can personalize the Layout content –

• Stock status column: Toggle the button to ON and show the Stock Status of the selected wishlist items.

• Product Cell Layout –
  • Image beside title: Displays the product image and title side by side in the same row.
  • Image above title: Stacks the product image on top of the title within the product cell.

• Quantity Field –
  • Number input: lets customers type in the desired quantity directly into a plain input field.
  • Stepper (+/-): lets customers increase or decrease the quantity using the + e − botões.

In the style tab, you can style the following things.

Table Container #

• Table Width: controls the overall width of the wishlist table as a percentage.
• Colapso da Fronteira: sets whether the table borders are merged together or kept separate.
• Tipo de borda: defines the style of the table border, such as solid, dashed, or dotted.
• Largura da borda: adjusts the thickness of the border on each side (top, right, bottom, left) of the table.
• Cor da borda: sets the color of the outer table border.
• Outer Border Radius: rounds the corners of the table’s outer border.
• Inner Vertical Borders: toggles the vertical divider lines between columns inside the table.
• Inner Vertical Border Color: sets the color of those inner vertical column dividers.

Título da tabela #

• Cor do texto: sets the color of the heading text across all table columns.
• Fundo: controls the background color of the table header row.
• Tipografia: customizes the font family, size, weight, and style of the heading text.
• Header Cell Padding: adjusts the inner spacing on each side (top, right, bottom, left) of the header cells.
• Text Transform: changes the letter casing of the heading text, such as capitalize, uppercase, or lowercase.
• Column Alignment (Header): sets the horizontal alignment of the header text, left, center, or right.

Corpo da tabela #

• Body Background: sets the background color of the table body rows.
• Cor do texto: controls the color of the general text content within the table body.
• Cor do link: defines the color of clickable links, such as product names, inside the table.
• Cor do link flutuante: sets the color of links when hovered over by the cursor.
• Vertical Alignment: adjusts how the content is aligned vertically within each row — top, middle, or bottom.
• Column Alignment (Cells): sets the horizontal alignment of content inside the body cells — left, center, or right.
• Tipografia de texto: customizes the font family, size, weight, and style of the body text.
• Row Borde
  • Tipo de borda: sets the style of the border between rows, such as solid, dashed, or dotted.
  • Largura da borda: controls the thickness of the border on each side of the rows.
  • Border Row Color: sets the color of the row divider borders.

Product Column #

• Image Width: controls the width of the product thumbnail image in the column.
• Image Height: controls the height of the product thumbnail image in the column.
• Image Border Radius: rounds the corners of the product image on each side (top, right, bottom, left).
• Image & Title Spacing: adjusts the gap between the product image and its title below.
• Tipo de plano de fundo: sets whether the product column background is a solid color or an image.
• Cor: defines the background color of the product column.
• Imagem: lets you set a custom background image for the product column.

Price Column #

• Current / Sale Price
  • Cor: Sets the color of the active or discounted sale price displayed in the table.
  • Tipografia: Customizes the font style and size of the current or sale price text.
• Regular / Old Price
  • Cor: Sets the color of the original crossed-out price shown alongside the sale price.
  • Tipografia: Customizes the font style and size of the regular or old price text.
• Spacing Between Prices: Adjusts the gap between the sale price and the regular price displayed together.

Stock Status #

• Tipografia: Customizes the font family, size, and weight of the stock status text.
• Em estoque: Sets the text color for products that are currently available.
• Low Stock: Sets the text color for products that are running low on inventory.
• Fora de estoque: Sets the text color for products that are no longer available.
• On Backorder: Sets the text color for products that can be ordered but are not yet in stock.

Quantity Field #

O Quantity Field section gives you full control over the input box appearance — including width, typography, text color, background, border type, width, color, radius, padding, and more.

Action Buttons #

O Action Buttons section lets you style the adicionar ao carrinho button with full control over its normal and hover states, including color, background, border type, width, color, padding, border radius, typography, and more.