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

Google Sheets Integration

QuickOrder allows you to automatically send form submissions to Google Sheets, making it easy to track and analyze your orders in a spreadsheet format. This integration is perfect for businesses that want to maintain order records outside of WordPress or need to share order data with team members.

Setting Up Google Sheets Integration

Follow these steps to set up the Google Sheets integration:

1. Create a new Google Sheet where you want to store your order data
2. Go to Extensions > Apps Script in your Google Sheet
3. Replace the default code with the script provided below
4. Save the project with a name like "WC Product Order Form"
5. Deploy as a web app:
   • Click "Deploy" > "New deployment"
   • Select type: "Web app"
   • Set "Execute as" to "Me"
   • Set "Who has access" to "Anyone"
   • Click "Deploy"
6. Copy the web app URL provided after deployment
7. Paste the URL in your QuickOrder plugin settings under the "Integrations" tab

Google Apps Script Code

Copy and paste the following code into your Google Apps Script editor:

/**
 * Google Apps Script for WC Product Order Form
 * 
 * This script receives order data from your WordPress site and adds it to a Google Sheet.
 * 
 * SETUP INSTRUCTIONS:
 * 1. Create a new Google Sheet
 * 2. Go to Extensions > Apps Script
 * 3. Replace the default code with this script
 * 4. Save the project with a name like "WC Product Order Form"
 * 5. Deploy as a web app:
 *    - Click "Deploy" > "New deployment"
 *    - Select type: "Web app"
 *    - Set "Execute as" to "Me"
 *    - Set "Who has access" to "Anyone"
 *    - Click "Deploy"
 * 6. Copy the web app URL and paste it in your plugin settings
 */

// The doPost function is called when data is sent to the web app
function doPost(e) {
  try {
    // Parse the JSON data sent from WordPress
    const data = JSON.parse(e.postData.contents);
    
    // Get the active spreadsheet and the first sheet
    const ss = SpreadsheetApp.getActiveSpreadsheet();
    const sheet = ss.getSheets()[0];
    
    // Check if headers exist, if not create them
    // Also check if we need to create headers even if they exist (for new fields)
    const forceCreateHeaders = e.parameter && e.parameter['X-Create-Headers'] === 'true' || 
                              (e.headers && e.headers['X-Create-Headers'] === 'true');
    
    if (sheet.getLastRow() === 0 || forceCreateHeaders) {
      createHeaders(sheet, data);
    }
    
    // Get headers to ensure we're adding data in the right columns
    const headers = sheet.getRange(1, 1, 1, sheet.getLastColumn()).getValues()[0];
    
    // Prepare the row data based on headers
    const rowData = headers.map(header => {
      // Special handling for phone numbers to ensure they're treated as text
      if (header === 'customer_phone' || header.includes('phone')) {
        if (!data[header]) return '';
        
        // If the value has our special PHONE: prefix, remove it before display
        if (data[header].startsWith("'")) {
          // Remove the prefix but keep it as text by adding a single quote
          return data[header];
        }
        
        // For any other phone number, ensure it's treated as text
        return "'" + data[header];
      }
      
      // Return the value from data or empty string if not found
      return data[header] !== undefined ? data[header] : '';
    });
    
    // Add the new row to the sheet
    sheet.appendRow(rowData);
    
    // Return success response
    return ContentService.createTextOutput(JSON.stringify({
      'success': true,
      'message': 'Data saved successfully'
    })).setMimeType(ContentService.MimeType.JSON);
    
  } catch (error) {
    // Log the error
    console.error('Error processing data: ' + error.message);
    
    // Return error response
    return ContentService.createTextOutput(JSON.stringify({
      'success': false,
      'error': error.message
    })).setMimeType(ContentService.MimeType.JSON);
  }
}

// Create headers based on the data received
function createHeaders(sheet, data) {
  // Get existing headers if any
  let existingHeaders = [];
  if (sheet.getLastRow() > 0) {
    existingHeaders = sheet.getRange(1, 1, 1, sheet.getLastColumn()).getValues()[0];
  }
  
  // Get all keys from the data
  const dataKeys = Object.keys(data);
  
  // Combine existing headers with new keys from data
  let allHeaders = existingHeaders.slice();
  
  // Add any new headers that don't already exist
  dataKeys.forEach(key => {
    if (!allHeaders.includes(key)) {
      allHeaders.push(key);
    }
  });
  
  // If we have headers, clear the first row and set the new headers
  if (allHeaders.length > 0) {
    // If there are existing headers, clear them first
    if (existingHeaders.length > 0) {
      sheet.getRange(1, 1, 1, existingHeaders.length).clearContent();
    }
    
    // Set the new headers
    sheet.getRange(1, 1, 1, allHeaders.length).setValues([allHeaders]);
    
    // Freeze the header row and make it bold
    sheet.setFrozenRows(1);
    sheet.getRange(1, 1, 1, allHeaders.length).setFontWeight('bold');
  }
}

// Test function to verify the script is working
function testScript() {
  const testData = {
    order_id: '12345',
    order_date: '2023-01-01 12:00:00',
    product_id: '789',
    product_name: 'Test Product',
    order_status: 'processing',
    quantity: 2,
    total: 99.99,
    customer_name: 'John Doe',
    customer_email: 'john@example.com',
    customer_phone: "'0123456789", // Note the leading single quote to preserve leading zeros
    field_address: '123 Main St',
    field_notes: 'Test notes'
  };
  
  // Simulate a POST request
  const e = {
    postData: {
      contents: JSON.stringify(testData)
    },
    parameter: {
      'X-Create-Headers': 'true'
    }
  };
  
  // Call doPost with the test data
  const result = doPost(e);
  
  // Log the result
  Logger.log(result.getContent());
}

How It Works

The integration works as follows:

1. When a customer submits an order form on your website, the plugin collects all form data
2. If Google Sheets integration is enabled, the plugin sends this data to your Google Apps Script web app
3. The script processes the data and adds it as a new row in your Google Sheet
4. The script automatically creates headers for all form fields if they don't exist
5. Special handling is applied for phone numbers to preserve formatting

Data Fields

The following data is sent to Google Sheets:

• order_id: The WooCommerce order ID
• order_date: Date and time of the order
• product_id: ID of the ordered product
• product_name: Name of the ordered product
• order_status: Current status of the order
• quantity: Number of items ordered
• total: Total order amount
• customer_name: Customer's full name
• customer_email: Customer's email address
• customer_phone: Customer's phone number
• field_*: Any custom fields from your form (prefixed with "field_")

Testing the Integration

The script includes a testScript() function that you can run to verify that everything is working correctly:

1. After saving the script, click the dropdown menu next to "Debug" (or "Run")
2. Select the testScript function
3. Click "Run" or "Debug"
4. Check your Google Sheet to see if a test row has been added

If the test is successful, your integration is working properly and ready to receive real order data.

Troubleshooting Google Sheets Integration

If you encounter issues with the Google Sheets integration, check the following:

• Web App URL: Make sure you've copied the correct URL from the deployment
• Permissions: Ensure you've set "Who has access" to "Anyone" during deployment
• Script Errors: Check the Apps Script execution logs for any errors (View > Logs)
• Quota Limits: Google Apps Script has usage quotas that may affect high-volume sites

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.