Wishlist for WooCommerce

  1. Home
  2. Docs
  3. Wishlist for WooCommerce
  4. How To
  5. How to Customize Wishlist Button Placement on Product Page

How to Customize Wishlist Button Placement on Product Page

pasted image 0 4


For WooCommerce store owners, finetuning the user experience is crucial to ensuring customers can navigate and use the site with ease. An important aspect of this is the placement of the wishlist button on product pages. This guide will walk you through the process of setting the position of the wishlist button to align with your store’s design and usability goals.

pasted image 0 5

 StepbyStep Instructions

 Step 1: Log Into Your WordPress Dashboard;

  •  Begin by logging into the backend of your WordPress site.

 Step 2: Access WooCommerce Settings

  •  Click on ‘WooCommerce’ in the lefthand sidebar to open the WooCommerce settings.
  •  Navigate to ‘Settings’ within the WooCommerce options.

 Step 3: Go to Wishlist Settings:

  •  Within the WooCommerce settings, locate and select the Wishlist tab.

 Step 4: Find the Buttons Configuration:

  •  Inside the Wishlist settings, click on the ‘Buttons’ tab where you’ll find the configuration options for the wishlist button.

 Step 5: Set the Wishlist Button Position:

  •  Scroll to the ‘Default button  Single product’ section.
  •  Here, you will see a dropdown menu labeled ‘Hook’. This determines where the wishlist button will appear on the product page.
  •  Select your preferred position for the wishlist button from options such as ‘After product thumbnail’, ‘Before add to cart form’, ‘After add to cart form’, etc.

 Step 6: Adjust Hook Priority (Optional):

  •  If you need more control over the button’s placement, adjust the ‘Hook priority’ field. This number will determine the order in which the button appears relative to other elements.

 Step 7: Save Your Changes:

  •  Once you’ve selected the desired position for the wishlist button, click ‘Save changes’ to implement your configuration.
  •  Tips for Optimizing Button Placement
  •  Consider Your Layout: Choose a position that complements your product page layout and doesn’t interfere with other important elements.
  •  User Testing: Have users test the new placement to ensure it’s intuitive and userfriendly.
  •  Consistency is Key: Ensure the wishlist button is consistently placed across all product pages for a uniform shopping experience.


Customizing the placement of the wishlist button on your WooCommerce product pages can significantly impact the user experience. By following these steps, you can ensure that the button is both functional and aesthetically pleasing, thereby enhancing the overall usability of your online store.


Wishlist for WooCommerce