ShopEngine’s Wunschzettel 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 #

Stellen Sie sicher 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 –

• Name: Give a name to the template
• Template Type: Choose My Account Wishlist from the list
• Template Activation: Enable the option
• Der blank template is selected
• Check if the Elementor builder is selected
• Klicken 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 + Und − Tasten.

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.
• Border Collapse: sets whether the table borders are merged together or kept separate.
• Randtyp: defines the style of the table border, such as solid, dashed, or dotted.
• Rahmenbreite: adjusts the thickness of the border on each side (top, right, bottom, left) of the table.
• Randfarbe: 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.

Tabellenüberschrift #

• Textfarbe: sets the color of the heading text across all table columns.
• Hintergrund: controls the background color of the table header row.
• Typografie: 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.

Tischkörper #

• Body Background: sets the background color of the table body rows.
• Textfarbe: controls the color of the general text content within the table body.
• Verknüpfungsfarbe: defines the color of clickable links, such as product names, inside the table.
• Link-Hover-Farbe: 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.
• Texttypografie: customizes the font family, size, weight, and style of the body text.
• Row Borde
  • Randtyp: sets the style of the border between rows, such as solid, dashed, or dotted.
  • Rahmenbreite: 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.
• Hintergrundtyp: sets whether the product column background is a solid color or an image.
• Farbe: defines the background color of the product column.
• Bild: lets you set a custom background image for the product column.

Price Column #

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

• Typografie: Customizes the font family, size, and weight of the stock status text.
• In 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.
• Out of Stock: 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 #

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

Der Action Buttons section lets you style the in den Warenkorb legen button with full control over its normal and hover states, including color, background, border type, width, color, padding, border radius, typography, and more.