ShopEngine’s Lista de deseos 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 #

Cerciorarse TiendaEngine 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 –

• Nombre: Give a name to the template
• Template Type: Choose My Account Wishlist from the list
• Template Activation: Enable the option
• El blank template is selected
• Check if the Elementor builder is selected
• Hacer clic 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 + y − botones.

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 fronterizo: sets whether the table borders are merged together or kept separate.
• Tipo de borde: defines the style of the table border, such as solid, dashed, or dotted.
• Ancho del borde: adjusts the thickness of the border on each side (top, right, bottom, left) of the table.
• Color del borde: 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.

Encabezado de tabla #

• Color de texto: sets the color of the heading text across all table columns.
• Fondo: controls the background color of the table header row.
• Tipografía: 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.

Cuerpo de la mesa #

• Body Background: sets the background color of the table body rows.
• Color de texto: controls the color of the general text content within the table body.
• Color de enlace: defines the color of clickable links, such as product names, inside the table.
• Color al pasar el cursor sobre el enlace: 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.
• Tipografía de texto: customizes the font family, size, weight, and style of the body text.
• Row Borde
  • Tipo de borde: sets the style of the border between rows, such as solid, dashed, or dotted.
  • Ancho del borde: 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 fondo: sets whether the product column background is a solid color or an image.
• Color: defines the background color of the product column.
• Imagen: lets you set a custom background image for the product column.

Price Column #

• Current / Sale Price
  • Color: Sets the color of the active or discounted sale price displayed in the table.
  • Tipografía: Customizes the font style and size of the current or sale price text.
• Regular / Old Price
  • Color: Sets the color of the original crossed-out price shown alongside the sale price.
  • Tipografía: 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 #

• Tipografía: Customizes the font family, size, and weight of the stock status text.
• En stock: Sets the text color for products that are currently available.
• Low Stock: Sets the text color for products that are running low on inventory.
• Agotado: 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 #

El 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 #

El Action Buttons section lets you style the añadir a la cesta button with full control over its normal and hover states, including color, background, border type, width, color, padding, border radius, typography, and more.