ShopEngine’s 위시리스트 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 #

확실하게 하다 ShopEngine 프로 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 –

• 이름: Give a name to the template
• Template Type: Choose My Account Wishlist from the list
• Template Activation: Enable the option
• 그만큼 blank template is selected
• Check if the Elementor builder is selected
• 딸깍 하는 소리 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 + 그리고 − 버튼.

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.
• 국경 붕괴: sets whether the table borders are merged together or kept separate.
• 테두리 유형: defines the style of the table border, such as solid, dashed, or dotted.
• 테두리 너비: adjusts the thickness of the border on each side (top, right, bottom, left) of the table.
• 테두리 색상: 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.

테이블 제목 #

• 텍스트 색상: sets the color of the heading text across all table columns.
• 배경: controls the background color of the table header row.
• 타이포그래피: 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.

테이블 본체 #

• Body Background: sets the background color of the table body rows.
• 텍스트 색상: controls the color of the general text content within the table body.
• 링크 색상: defines the color of clickable links, such as product names, inside the table.
• 링크 호버 색상: 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.
• 텍스트 타이포그래피: customizes the font family, size, weight, and style of the body text.
• Row Borde
  • 테두리 유형: sets the style of the border between rows, such as solid, dashed, or dotted.
  • 테두리 폭: 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.
• 배경 유형: sets whether the product column background is a solid color or an image.
• 색상: defines the background color of the product column.
• 영상: lets you set a custom background image for the product column.

Price Column #

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

• 타이포그래피: Customizes the font family, size, and weight of the stock status text.
• 재고: Sets the text color for products that are currently available.
• Low Stock: Sets the text color for products that are running low on inventory.
• 품절: 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 #

그만큼 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 #

그만큼 Action Buttons section lets you style the 장바구니에 추가 button with full control over its normal and hover states, including color, background, border type, width, color, padding, border radius, typography, and more.