QuickOrder Logo

QuickOrder Documentation

Developed by Omar Jabar

Welcome to the comprehensive documentation for QuickOrder. This guide will help you install, configure, and customize the plugin to create beautiful order forms for your WooCommerce products.

Getting Started

QuickOrder is a powerful WordPress plugin that allows you to create custom order forms for your WooCommerce products. With this plugin, you can:

  • Replace the standard WooCommerce Add to Cart button with a custom form
  • Customize the appearance and position of your order forms
  • Create proper WooCommerce orders with all form data stored in the admin area
  • Add a quantity field with dynamic price calculation
  • Display a mobile-friendly sticky button for better user experience
  • Export order data to Google Sheets for easy tracking
  • Protect your forms with Google reCAPTCHA integration
  • Create multilingual forms with field-level translations

This documentation will guide you through all aspects of using the plugin, from installation to advanced customization.

Installation

Follow these steps to install and activate the QuickOrder plugin:

Prerequisites

Before installing, make sure you have:

  • WordPress 5.0 or higher
  • WooCommerce 4.0 or higher
  • PHP 7.2 or higher

Method 1: Install via WordPress Admin

  1. Log in to your WordPress admin dashboard
  2. Navigate to Plugins > Add New
  3. Click the Upload Plugin button at the top of the page
  4. Click Choose File and select the plugin ZIP file you downloaded
  5. Click Install Now
  6. After installation, click Activate Plugin

Plugin Installation Screenshot

Replace with a screenshot of the plugin installation process

Method 2: Install via FTP

  1. Unzip the plugin ZIP file on your computer
  2. Connect to your server using an FTP client
  3. Upload the entire quick-order folder to the /wp-content/plugins/ directory
  4. Log in to your WordPress admin dashboard
  5. Navigate to Plugins
  6. Find "QuickOrder" in the list and click Activate

Verifying Installation

After activation, you should see a new menu item called Order Form in your WordPress admin sidebar. This indicates that the plugin has been successfully installed and activated.

General Settings

To configure the plugin, navigate to Order Form > Settings in your WordPress admin sidebar. The settings page is divided into several tabs for easy navigation.

Price and Currency Settings

The plugin now includes improved price and currency handling with the following features:

  • Currency Format Preservation: Maintains the original currency format when updating quantities
  • Dynamic Price Calculation: Accurately calculates prices based on quantity changes
  • Order Summary Display: Configurable options for showing product price and shipping costs separately
  • Default Shipping Costs: Option to enable or disable default shipping costs

These settings can be found in the Order Summary section of the settings page, providing granular control over how prices and shipping costs are displayed to customers.

Form Position Settings Screenshot

Replace with a screenshot of the form position settings

Form Position

You can choose where the order form appears on your product pages:

  • Before Summary: Displays the form before the product summary
  • After Description: Displays the form after the product description
  • After Summary: Displays the form after the product summary (default)

Form Title and Subtitle

You can customize the title and subtitle that appear above the order form:

  • Form Title: The main heading for your order form (default: "Order Form")
  • Form Subtitle: A brief description or instructions for customers (default: "Please fill out the form below to place your order for this product.")

Other General Settings

  • Show Labels: Enable this option to display labels above form fields
  • Hide WooCommerce Add to Cart: Enable this to hide the default WooCommerce Add to Cart button (more details in the dedicated section below)
  • Field Spacing: Set the spacing between form fields in pixels
  • Redirect After Submission: Choose whether to redirect customers to a specific page after form submission
  • Redirect Page: Select the page to redirect to if the above option is enabled

Form Fields

The Fields tab allows you to customize the fields that appear in your order form. You can add, edit, or remove fields as needed.

Default Fields

By default, the form includes the following fields:

  • Name: Customer's full name
  • Email: Customer's email address
  • Phone: Customer's phone number
  • Message: Additional information or special requests
  • Quantity: Number of products to order

Adding Custom Fields

To add a custom field:

  1. Click the Add Field button
  2. Select the field type from the dropdown (Text, Email, Number, Textarea, Checkbox, Radio, Select)
  3. Enter a label for the field
  4. Set whether the field is required
  5. Add a placeholder text if applicable
  6. For select, radio, or checkbox fields, add options as needed
  7. Click Save Field

Adding Custom Fields Screenshot

Replace with a screenshot of the custom fields interface

Reordering Fields

You can change the order of fields by dragging and dropping them in the fields list. Simply click and hold on a field, then drag it to the desired position.

Editing or Deleting Fields

To edit a field, click the Edit button next to the field in the list. To delete a field, click the Delete button.

Styling Options

The Styling tab allows you to customize the appearance of your order form to match your website's design.

Form Width

You can set the width of the form as a percentage of the container width. The default is 100% (full width).

Colors

Customize the following colors to match your brand:

  • Primary Color: Used for buttons, borders, and accents
  • Secondary Color: Used for hover states and secondary elements
  • Text Color: The main text color for the form
  • Background Color: The background color of the form

Color Settings Screenshot

Replace with a screenshot of the color settings

Typography

Customize the typography settings:

  • Font Size: The base font size for form text
  • Heading Font Size: The font size for the form title
  • Button Font Size: The font size for buttons

Spacing and Layout

  • Padding: The internal spacing of the form
  • Border Radius: The roundness of corners for form elements
  • Button Padding: The internal spacing of buttons

Hide Add to Cart Button

The plugin includes an option to hide the default WooCommerce Add to Cart button when your custom order form is displayed. This is useful when you want your order form to be the only way for customers to place orders.

Enabling the Feature

To hide the Add to Cart button:

  1. Go to Order Form > Settings
  2. In the General tab, check the Hide WooCommerce Add to Cart option
  3. Save your changes

Hide Add to Cart Setting Screenshot

Replace with a screenshot of the hide add to cart setting

How It Works

When this option is enabled, the plugin:

  • Removes the standard WooCommerce Add to Cart button from the product page
  • Adds CSS to hide any theme-specific Add to Cart buttons
  • Ensures that the quantity selector and variation selectors are also hidden

This creates a clean interface where customers can only use your custom order form to place orders.

reCAPTCHA Integration

To protect your forms from spam submissions, the plugin includes integration with Google reCAPTCHA.

Setting Up reCAPTCHA

  1. Go to the Google reCAPTCHA website
  2. Sign in with your Google account
  3. Click + Create to create a new reCAPTCHA site
  4. Enter a label for your site (e.g., "My WooCommerce Store")
  5. Select reCAPTCHA v2 as the type
  6. Add your domain(s) to the list of allowed domains
  7. Accept the Terms of Service and click Submit
  8. Copy the Site Key and Secret Key

Configuring reCAPTCHA in the Plugin

  1. Go to Order Form > Settings
  2. Navigate to the Notifications tab
  3. Check the Enable reCAPTCHA option
  4. Paste your Site Key and Secret Key in the respective fields
  5. Save your changes

reCAPTCHA Settings Screenshot

Replace with a screenshot of the reCAPTCHA settings

Using Shortcodes

The plugin provides a shortcode that allows you to place the order form anywhere on your site, not just on product pages.

Basic Shortcode

To display the order form, use the following shortcode:

[wcpof_order_form]

Shortcode with Product ID

To display the order form for a specific product, use the following shortcode with the product ID:

[wcpof_order_form product_id="123"]

Replace 123 with the actual product ID.

Where to Use Shortcodes

You can use the shortcode in:

  • Pages
  • Posts
  • Custom post types
  • Widgets that support shortcodes
  • Page builder elements that support shortcodes

Custom CSS

While the plugin provides many styling options, you may want to add custom CSS for more advanced customization.

Adding Custom CSS

To add custom CSS:

  1. Go to Order Form > Settings
  2. Navigate to the Styling tab
  3. Scroll down to the Custom CSS section
  4. Enter your custom CSS in the text area
  5. Save your changes

Custom CSS Section Screenshot

Replace with a screenshot of the custom CSS section

CSS Selectors

Here are some useful CSS selectors for customizing the form:

/* Main form container */
.wcpof-order-form-container {
    /* Your styles here */
}

/* Form title */
.wcpof-form-title {
    /* Your styles here */
}

/* Form subtitle */
.wcpof-form-subtitle {
    /* Your styles here */
}

/* Form fields */
.wcpof-field {
    /* Your styles here */
}

/* Field labels */
.wcpof-label {
    /* Your styles here */
}

/* Input fields */
.wcpof-input {
    /* Your styles here */
}

/* Submit button */
.wcpof-submit-button {
    /* Your styles here */
}

Troubleshooting

If you encounter issues with the plugin, try these troubleshooting steps:

Form Not Displaying

  1. Check if WooCommerce is active and up to date
  2. Verify that the plugin is activated
  3. Make sure you're viewing a product page or using the shortcode correctly
  4. Check if your theme is compatible with WooCommerce hooks
  5. Try switching to a default WordPress theme temporarily to rule out theme conflicts

Styling Issues

  1. Check if your theme has CSS that might be conflicting with the form styles
  2. Try adding !important to your custom CSS rules
  3. Use browser developer tools to inspect the elements and identify conflicting styles

Form Submission Not Working

  1. Check if JavaScript is enabled in your browser
  2. Verify that all required fields are filled out
  3. Check if reCAPTCHA is configured correctly (if enabled)
  4. Look for JavaScript errors in the browser console

Frequently Asked Questions

Can I use this plugin with any WordPress theme?

Yes, the plugin is designed to work with any WordPress theme that supports WooCommerce. The plugin includes options to customize the appearance to match your theme's design.

Can I add custom fields to the order form?

Yes, you can add, edit, and remove fields from the form using the Fields tab in the plugin settings. You can create various field types including text, email, number, textarea, checkbox, radio, and select.

Will the form data be saved with the order?

Yes, all form data submitted by customers is saved with the order and can be viewed in the order details in your WooCommerce admin.

Can I translate the plugin to another language?

Yes, the plugin is translation-ready. You can use tools like Loco Translate or WPML to translate the plugin strings to your language.

Does the plugin work with variable products?

Yes, the plugin works with all WooCommerce product types, including simple, variable, grouped, and external products.

Can I style the form to match my website's design?

Yes, the plugin includes extensive styling options in the Styling tab. You can customize colors, typography, spacing, and more. You can also add custom CSS for more advanced customization.