Are you tired of having customers navigate through multiple pages just to place an order on your WooCommerce store? A one-page WooCommerce custom order form may be the solution you’re looking for!

Not only does it simplify the ordering process for your customers, but it also has the potential to increase conversions and sales for your business. And with the integration of Add to Wishlist buttons, customers can easily save items for later purchase.

In this guide, we will walk you through the process of creating a seamless one-page order form with an Add Wishlist button in WooCommerce.

Creating the One Page WooCommerce Order Form #

First, install and activate the WooCommerce Product Table plugin.

To configure the plugin, go to

WordPress dashboard > WooCommerce > Setting > Products > Product tables.

Now let’s check the settings related to the design and content of the table.

Designing the layout and formatting of the order form #

Table Design

1. Borders: This option contains three sections to set the border settings of the table
   1. External border setting
   2. Border setting related to the table header row
   3. Border setting between table cells
2. Background Header: With this option, you can change the color of the background header.
3. Cell background: With this option, you can change the background color of the cells.
4. Header font: With this option, you can change the header font.
5. Cell font: With this option, you can change the cell font.

Product Table location

With the help of this option, you can choose the location of the products table.

Table content

1. Columns: From this section, you can choose the order of the columns and the content of your columns.
2. Photo size: From this section, you can change the photo size of the products in the table.
3. Image Lightbox: By activating this option, product photos will be displayed in the lightbox.
4. Description length: From this section, you can specify how many words the length of the description in the table should be.
5. Product link: With this option, you can specify which content of the table should be a link.

“Add to cart” button

1. Adding products to cart: From this section, you can select the form of the Add to cart option.
2. Quantities: By activating this option, the field for choosing the number of products will be displayed next to Add to cart.
3. Variations: You can pick how to display the characteristics of variable products in the table.
4. Multi-select “Add to cart” button: You can decide where to display the public “Add to cart” button.
5. Multi-select “Add to cart” button text: You can change the text of the universal “Add to cart” button.

Table controls

1. Product filter: From this option, you can customize the product filter box or select not to display it.
2. Search box: You can set the location of the search box.
3. Reset Link: By activating this option, a button will be displayed to reset the changes made by the user in the table.
4. Page length: to set the position of displaying the number of table pages
5. Product total : to choose the location of the total products according to the filters
6. Pagination: to choose the location of the pagination related to the table

The result of the settings will be something like this:

Enabling Add to Wishlist button for each product #

1. Enter the MC WooCommerce Wishlist plugin settings.
2. Enter the MC Wishlist button tab.
3. From this section, set the Button position to one of the following states.
   1. Before “add to cart” form
   2. After “add to cart” form
   3. Before “add to cart” button
   4. After “add to cart” button
   5. Use Shortcode (If you use this option, you must add the Add to wishlist button to the table using the page builder)

Customizing the appearance and behavior of the buttons #

To perform settings related to the Add to wishlist button in the table, you should follow the path below:

WordPress Dashboard > MC wishlist > Setting > Wishlist Button > Single product page

1- Button position

You can select the location of the add to wishlist button in the table. In the images below, you can see all the cases. Note that in table mode, only options 1 to 4 and also option 10 are possible.

1-1-Before “add to cart” form:

1-2-After “add to cart” form:

1-3-Before “add to cart” button:

1-4-After “add to cart” button:

The rest of the button cases, which are 4 button cases on image and button after summary, are not available if you use tables. These cases are only possible for the simple single product page.

2- Button type

In this section, you can choose three types for your add to wishlist button:

• Icon only
• Text only
• Icon and text

3 – Default button style

With this option, the wishlist button will have its default style according to your theme.

4 – Button icon

You can change the icon of the wishlist button as you like. To do this, you can use the available icons or upload your own icon.

5 – Icon style

In this section, you can change the size, color, and hover color of the icon.

6 – Button color

In this section, you can make settings for the button color.

7 – Button sizes

In this section, you can also change “the height of the lines around the button”, “the height of the button”, “the level of opacity of the button from the sides”, and “the size of the button space from the sides.”

8 – Button tooltip styles (if the Button type = only Icon)

You can activate the tooltip from this section and also set the color of the tooltip and the color of the tooltip text and more importantly the direction of the tooltip (top-bottom-left-right). Note that the button type must be in the only icon mode, otherwise the tooltip will not exist.

Please note that if you place the button on the icon and text mode, an option in the settings will replace the tooltip settings, and an option will be added to set the text color.

9 – Text Style

From this section, you can set the color settings for the text.

10 – Separate icon and text

By activating this option, the separator between text and icon, which is in the form of a vertical line, will be added.

Testing and publishing WooCommerce custom order form #

Now we can check how is our WooCommerce custom order form is performing.

Testing the WooCommerce custom order form #

As you can see in the image below, we add a product to the wishlist and card through the table.

Adding WooCommerce order form to a page or post on your store #

To do this, just follow the path below.

WordPress dashboard > WooCommerce > Settings > Products > Product tables

Then, in the Shop integration section, you can add the table for any page you want.

Conclusion #

In conclusion, building a one-page custom order form in WooCommerce with Add to Wishlist buttons is a great way to streamline the ordering process for your customers and increase conversions. By following the steps outlined in this guide, you can easily create a custom order form that is tailored to your specific business needs and incorporates Add to Wishlist functionality.

As your business evolves, it’s important to regularly review and update your order form to ensure that it remains relevant and effective. By keeping these tips in mind, you can ensure that your one-page order form continues to drive success for your business in the long term.

If you have any idea about this topic, we will be happy to hear it from you.