WooCommerce Drag N Drop Shop

• Contributors: splashingpixels.com
• Tags: woocommerce plugin,plugin,dropshop,drop shop,drag n drop shop,widget,shopping cart,cart
• Requires at least: WooCommerce 2.1
• Tested up to: WooCommerce 2.1.11
• Requires at least: WP 3.8+
• Tested up to: WP 3.9.1
• Stable tag: 2.0.0

Description

Adds a drag and drop cart widget to your sidebars for easier and faster purchases. It creates a fun user interaction for adding products to the cart!

Thank you for purchasing our WordPress WooCommerce Drag N Drop Shop Plugin.

Make sure you have a widgetized theme. If you don't know what that means, have a look over here. https://codex.wordpress.org/WordPress_Widgets

Installation

The Drag N Drop Shop is an alternative to your standard shopping cart widget.

Be sure to first have WooCommerce plugin installed and activated. It is free to download here http://wordpress.org/extend/plugins/woocommerce/

To install the Drop Shop plugin, first upload the SP WooCommerce Drag N Drop Shop plugin folder to your site's plugins directory (wp-content/plugins) and then in you WP-Admin Dashboard activate the dropshop in the plugins menu.

Now you need to drag the Drop Shop widget onto an available widget area (this will depend on your theme). After which, you will see the many options that this widget has. Go to your WordPress backend Appearance/Widgets settings. From there you will see a widget called "WooCommerce Drag N Drop Shop" widget. Drag that to your desire location. Then you can begin modifying the settings if you wish. Each setting is explained below.

Here are the list of options/settings available and what they do.

• Title: This sets the title of the cart.
• Theme: You can choose the preset theme you want to use from light to dark.
• DropShop Orientation: For DropShop to appear wider (most footers), choose horizontal. For DropShop to appear taller (most sidebars), choose vertical.
• Auto Hide Cart: This option sets the horizontal layout to auto hide the cart within 10 seconds if no activatity is present.
• Auto Hide Cart Duration: Set the duration in which you would like until the cart auto hides. Default is 10 seconds.
• Cart Default Position: Choose if you would like the cart to be shown by default or hidden by default.
• DropShop Positioning: For DropShop to remain in the widget position you chose, choose fixed. If you would like dropshop to appear whenever you try to drop an item in, choose dynamic.
• Show how many products?: Set the maximum number of products you want to display in the DropShop at one time.
• Arrow clicks scroll by how many products?: How many DropShop items should scroll each time you click the arrows?
• Scroll Speed: How fast would you like the items to scroll when you click the arrows? 1000 is equal to 1 second.
• Easing Effect: Set the easing effect you want when scrolling through the DropShop items.
• Show on Single Product Page: This sets whether you want to display the DropShop in your product's single detail page.
• Show Cart On Shop Pages Only: Turning this on will show drop shop cart on only shop pages.
• Exclude Pages: This setting will hide the cart from the pages you specify. You can enter a comma separated list of page ids.
• Exclude Categories: This setting will hide the cart from the categories you specify. You can enter a comma separated list of category names.
• Custom Styles: Turning this on will allow you to further customize your cart. It will expand further customization options.
• DropShop Background Color: This sets the custom color of the DropShop cart background.
• DropShop Inset Background Color: This sets the custom color of the DropShop inset background.
• DropShop Inset Rounded Corners: This sets the display of rounded corners on the inset area.
• DropShop Inset Shadow: This sets the display of inner shadow effect on the inset area.
• DropShop Buttons Background Color: This sets the custom color of the checkout button.
• DropShop Buttons Background Color on Hover: This sets the custom color of the checkout button during a hover.
• DropShop Buttons Text Color: This sets the text color of the checkout button.
• Font Style: Choose a font family: Serif looks like Times New Roman and Courier. Sans Serif looks like Arial and Helvetica.
• DropShop Text Color: This sets the overall font color of the cart.
• DropShop prev/next Arrow Color: Choose an arrow color that will work best with the colors chosen above.

Usage

After you have set your desire settings, you can begin to test your plugin. In the front end go to your product category page and try dragging the product image to your drop shop cart. You should see the item will be added to the cart. If the item has variations, it will prompt you with option to select the options before adding to the cart.

Compatibility

*Tip: ONLY ONE INSTANCE OF THE WIDGET SHOULD BE USED

UPDATE NOTICE

If you're updating from 1.x to 2.x, please note we have changed the plugin folder name so you will need to delete the old plugin and install this new plugin. Re-activate the plugin thereafters.

User Hooks and Template Overrides

This plugin has in place many user filterable hooks to make it convenient for developers to manipulate different parts of the plugin including text translations. We will go over some important ones here. You can do a search and find for "apply_filters" on the plugin folder to see what other filters are available you can use.

• "sp_woocommerce_dropshop_use_legacy_jquery_ui" - This filter handles whether legacy jQuery libraries are loaded. By default it is using legacy jQuery libraries due to the bug jQuery has with mouse draggable in browsers.
• "sp_woocommerce_dropshop_widget_template_path" - This filter handles the display output of the components that make up the cart. You can use this filter in your child theme. Copy the template file wc-dropshop-widget-display-html.php to your child theme somewhere and use the filter to point to it. Then you can change anything you want within the template file.
• "sp_woocommerce_dropshop_horizontal_item_image_width" - This sets the image width of the product item when display inside the cart in horizontal mode.
• "sp_woocommerce_dropshop_horizontal_item_image_height" - This sets the image height of the product item when display inside the cart in horizontal mode.
• "sp_woocommerce_dropshop_vertical_item_image_width" - This sets the image width of the product item when display inside the cart in vertical mode.
• "sp_woocommerce_dropshop_vertical_item_image_height" - This sets the image height of the product item when display inside the cart in vertical mode.

Frequently Asked Questions

• How come the design layout is not showing correctly?

  This is quite normal and this plugin cannot anticipate every different themes in the market and therefore may not be fully compatible by default. The first thing to do is activate the default WordPress 2012 theme (don't forget to flush permalinks after you switch). Then re-test to see if the plugin's design layout is still not showing correctly. If it shows correctly, then that means there is a conflict perhaps in CSS with your current theme that is causing the issue.

• I put the widget into my right/left handside sidebar but it is not showing vertically!

  Make sure in your widget setting that you have "vertical" selected as the orientation.

• I am getting this error when I updated the plugin in the backend.

  This usually happens when we added new feature that is not already in your config. You just need to click SAVE once on the widget and the new features will be saved into the config and the error will go away.

• I set the DropShop option to horizontal but it sits inside the left/right sidebar.

  In some themes, you need to specifically put the widget into the "footer" sidebar area for it to work.

• When I add or remove products from the cart, the cart's pricing total shows correctly but in my theme's header area, the price is not correct and is not updated until I refresh the page.

  This is not our plugin's issue. You need to contact your theme developer to ask them if they can code the header cart with WooCommerce's standard. If they deviate from using WooCommerce's standard way, this issue will occur as our plugin follows the standards. You can concur this by switching to some of the FREE WooCommerce themes like Wootique or Mystile and see the header cart does update properly.

Changelog

• 2.0.0:
  • Fixed - Horizontal cart will randomly slide up.
  • Added - Option to set the horizontal cart auto hide duration.
  • Added - Option to set the horizontal cart default position.
  • Added - Ability to override cart template html with a user filter.
  • Added - Widget title when in horizontal mode.
  • Update - Complete refactored code to use class base.
  • Removed - Images in favor of icon fonts.
• 1.8.1:
  • Fixed - Widget settings not displayed in two columns.
  • Fixed - Dropped items sometimes does not refresh cart.
  • Added - Older jQuery UI versions because of the bug see http://bugs.jqueryui.com/ticket/9315
  • Update - Horizontal button styling
  • Tweak - Remove unecessary calls to the carousel to improve performance.
• 1.8.0:
  • Update - WooCommerce 2.1 Compatibility
• 1.7.1:
  • Fixed - Renamed dependency class.
• 1.7.0:
  • Update - Refactored for improved performance.
  • Added - Tooltip item title on hover.
  • Removed - Item title on hover in favor of a tooltip.
  • Fixed - Items not displaying on page load/refresh.
• 1.6.1:
  • Removed - Compatibility check.
  • Fixed - Hide on set product categories were not working properly.
• 1.6:
  • Added - Admin notification function.
  • Update - Adjustsments to CSS.
  • Fixed - Issue with cart images sometimes being cropped when added to cart.
• 1.5:
  • Added - Function to hide the item count.
  • Added - User hooks to manipulate the cart item image size.
  • Added - Function to show produc title in the cart on cursor hover.
  • Added - User hook to change empty cart icon image.
  • Fixed - Sometimes variation index is undefined.
  • Fixed - $post object not created during add to cart ajax call causing notice.
  • Update - Misc CSS adjustments.
• 1.4:
  • Added - Function to hide the cart on specified pages.
  • Added - Function to hide the cart on specified categories.
  • Added - Function to show cart only on shop type pages.
• 1.3:
  • Update - Message popup has been restyled to be in the center like a proper modal box.
  • Update - Misc. style adjustments.
• 1.2:
  • Added - Header cart info refresh on add/remove product from cart for Woothemes Artificer and Wootique theme.
  • Added - Two user callbacks for adding and removing product events.
  • Added - The function to remove html arrows when item is added to the cart for themes like Artificer and Wootique.
  • Added - Removing item event.
  • Added - User filterable hooks for all text such as view cart text, checkbout button text, sub-total text, empty cart text and more.
  • Added - Cart autohide feature for horizontal layout.
  • Added - Ability to add variable products into the cart.
  • Added - Option to show/hide on product's single page.
  • Fixed - When removing products from the cart, the product list would remove all added to the cart css class instead of from just one product.
  • Fixed - A slight gap in the horizontal layout.
  • Fixed - Draggable item handle position was off centered.
• 1.1:
  • Update - Added check to make sure all carousel elements are being found before initializing carousel.
  • Update - Escape some attributes that were not escaped.
  • Update - Minor CSS updates.
  • Fixed - Rare issue with colorpicker showing up twice on initial load.
  • Added - Support for products without add to cart buttons.
• 1.0: Release.