To customize the wishlist layout in WooCommerce, use Wishlist for WooCommerce in three places under WPFactory > Wishlist: Wishlist Page chooses the table columns, General > Responsiveness sets when the mobile layout starts, and Style > Wishlist page table controls column titles and mobile alignment. All three are free.
1. Choose what the table shows #
Go to WPFactory > Wishlist (also reachable at WooCommerce > Settings > Wishlist) and open Wishlist Page. Under Wishlist table columns, tick the columns you want: Stock, Price, Add to cart button, SKU, Description, Attributes, Subtotal, Categories and Taxonomies (Quantity is Pro). The full list with defaults is in setting up the wishlist page.
2. Set the mobile breakpoint #
On the General tab, the Responsiveness section sets breakpoints that will be used to adapt the layout to mobile. When the browser window is below them, the plugin switches the wishlist to its responsive layout.
| Label | Option ID | Default | What it does |
|---|---|---|---|
| Max width | alg_wc_wl_responsiveness_max_width |
768 | Window width in pixels below which the mobile layout applies. |
| Max height | alg_wc_wl_responsiveness_max_height |
400 | Window height in pixels below which the mobile layout applies. |
| Evaluation method | alg_wc_wl_responsiveness_evaluation_method |
Max width or max height | Whether either limit is enough, or both must be met (Max width and max height). |
3. Style the table #
On the Style tab, tick Custom style, then use Wishlist page table:
| Label | Option ID | Default |
|---|---|---|
| Column title (desktop) | alg_wc_wl_style_wish_list_t_titles_desktop |
Yes |
| Column titles (mobile) | alg_wc_wl_style_wish_list_t_titles_mobile |
Yes |
| Alignment (on mobile) | alg_wc_wl_style_wish_list_t_alignment_mobile |
Default (also Left, Right, Center) |
The same tab styles the remove icon (Wishlist page remove item button), the buttons and the popup. For anything else, Style customization > Add customized css accepts your own CSS.
Other layout options #
- General options: the General tab also turns on multiple wishlists (shown as tabs above the table) and the Cache option that loads the table after the page for cached sites.
- Icons: the Font Awesome library that draws the wishlist icons is loaded from General > Font Awesome.
- Order of items: Wishlist Page > Sorting (Latest to bottom, Alphabetical ASC or DESC) is free; dropdown, drag-and-drop and arrow sorting are Pro.
- Your own page design: place
[alg_wc_wl]on any page, for example one built with Elementor. See create a wishlist page with Elementor.
Saving your changes #
After you have made your changes, click Save changes on each tab to apply them to your site, then clear any page cache.
If it does not work #
- Style changes do nothing: Custom style is not ticked.
- Mobile layout shows on a laptop: with Max width or max height, a short browser window below 400 px also counts as mobile. Lower Max height or switch to Max width and max height.
- A column you ticked is missing: some columns depend on others; the Note field, for example, needs the Attributes column. See note fields on the wishlist page.
FAQ #
Can I hide the column titles only on phones? #
Yes. Untick Show column titles on mobile version and keep the desktop option ticked.
Is layout customization free? #
Yes. Columns, responsiveness and table styling are free; the Quantity column and extra sorting methods are Pro.
Related guides #
- Set up the wishlist page and its columns
- Style the wishlist buttons, popup and page
- Create a wishlist page with Elementor
Get more control #
This feature is free. Wishlist for WooCommerce Pro adds drag-and-drop, arrow and dropdown sorting, copying a wishlist, hiding buttons by product tag, extra shortcodes and CSV wishlist import. See what Pro unlocks.
Need a hand? Our team answers every ticket on the Wishlist for WooCommerce support forum.
