QuickOrder Documentation

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

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

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

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

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

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.