WooBag - Customize your Cart Easily

WooBag is a must have Wordpress WooCommerce Addon Plugin that gives you full control over design and behaviour of your cart icons and cart popup.

Demo Admin Side Demo Front End Live Documentation Buy Now

Thank you for purchasing WooBag! This guide answers all your questions about how to use this plugin. You can use the top navigation menu to jump directly to the relevant section. You can also use CTRL+F in this browser window and enter the text to find what you are looking for.

Quick-start-guide



Setting up your WooBag is simple. Check below a 4 Step quide to bring WooBag in action.

Step-1: Install and Activate

Install woobag.zip using Plugin Uploader or FTP and activate the plugin.

For more details see section Installation to get a step by step guide on the installation process.

Step-2: Edit Template

Now you will see the Templates page having one template named “Default Template”. This template will be active by default but will not show on the front end because you need to set the pages and menu you want to show it in. Edit this template, select the pages and menu you want to show it in. Hit Save!

For more details see section Settings to get detailed guide on the Template Settings options.

Step-3: Place Shortcode or Widget

Get the shortcode using the “Get Shortcode” button on top of the Templates page and place it in anywhere you want to show it. You can also use widget to show it. Go to the Appearance -> Widgets and find the widget with the named “Woo Bag”. Drag it to the desired widget area.

For more details see section Using Shortcode and Using Widget.

Step-4: See it in Action on Front End!

Go to the front end of your store and see it in action!

  • If you used the menu option, the WooBag will start showing in your selected menu.
  • If you used the Shortcode, it will start showing in the locations where you had placed it.
  • If you used the Widget, it will start showing in the widget area you placed it in.

To show WooBag in Widget or in Menu, you will need to select the respective pages from the template settings and it will only show in those pages. However, shortcode will work anywhere you place it!

  • WordPress (version 3.4 or above)
  • WooCommerce ( version 2.0 or above)
  • A WooCommerce Compatible Theme of Wordpress. The WordPress theme must properly integrate with WooCommerce templates. If your theme doesn't properly support WooCommerce, WooBag will not work.                                                              

 

WordPress Plugin Uploader

You can install WooBag using the WordPress plugin uploader without unzipping the file.

Log into your WordPress admin panel

login

Navigate to Plugins > Add New

dashboard

Click Upload

dashboard

Click Choose File and select the woobag.zip

upload

Click Install Now.

Activate the plugin through the Plugins menu in WordPress

FTP

You can also install WooBag using FTP:

  • Decompress the .zip file you downloaded from CodeCanyon.
  • Find the woobag.zip folder inside the folder that you just decompressed and decompress it.
  • Upload the woobag folder to your wp-content/plugins directory.
  • Navigate to your Control Panel: Plugins
  • Under WooBag, click Activate

Now you're done with the installation but still there is a final step to do before it starts showing in action on your store front. You need to setup your cart! You will now start seeing a new menu item labelled as WooBag. This is where you will be able to set your cart's design and behaviour! The sections below explain how easily you can use the settings to setup you cart!                                                         

 

Managing Templates

Templates

In the WooBag menu, you will see a sub-menu labelled as Templates. WooBag Templates lets you create infinite designs and save them for future use. Only one template can be activated at a time. You can always switch the template by just activating the one you want to show on the store front. You can switch the WooBag designs whenever wanted. For example, you can create one template for Independence Day using the relevant color schemes and activate it when Independence Day approaches. You can create another template with bright and fresh colors and images and activate it during the spring season. WooBag templating system opens unlimited possibilities, choice is yours! We have already included few default templates, which you can use as is, edit, or copy as a new template.

Create New Template

Create-new-template

You can create a new template by clicking the top right button on the templates page as indicated in the screenshot. You will be first prompted for the name of the new template, and then the template settings will open with default design. Then after making changes in the design and behaviour from the settings section, you can activate it to show it on the front end.

Editing a Template

Create-new-template

If you want to edit a template, go to the templates page where you will see a whole list of your WooBag templates. In front of each template you will find the action buttons. Among the action buttons you will see a button labelled as Edit. Click on this button and the settings page will open, where you will be able to edit all available options.

Activating a Template

Create-new-template

If you want to activate a template, go to the templates page where you will see a whole list of your WooBag templates. In front of each template you will find the action buttons. Among the action buttons you will see a button labelled as Activate. Click on this button and a confirmation window will open, click Yes I am button and it will be activated. You can also activate a template from its settings page using the button at the bottom labelled as Save and Activate

WooBag Attributes

WooBag is shown on the front using some attributes where you can place any of the given values. They are:

  • Woobag_type:

    There are two main types of WooBag i.e. Icon or Box. If you want to show the icon of the WooBag in which the popup opens, then choose type icon. If you don't want to show the icon and just want to show the WooBag box/popup for example in a sidebar, then use this option.

  • position:

    The attribute lets you set the positioning of your WooBag. If you want to show cart that remains visible on the window even while scrolling down, you can choose the option as fixed otherwise keep the floating option.

  • position_top:

    If you are using the fixed position, then you can define where you need to show it fixed from the top in the visible window of the user.

  • position_left:

    If you are using the fixed position, then you can define where you need to show it fixed from the left in the visible window of the user.

  • position_right:

    If you are using the fixed position, then you can define where you need to show it fixed from the right in the visible window of the user.

Using Shortcode

Create-new-template

Create-new-template

Shortcode uses the active template settings to show on the front end. However, few settings also come within the shortcode. To get the shortcode, click on the button labelled as Get Shortcode on the top right section of templates page. A popup will open that will give you all the details.

Using Widget

Create-new-template

You can show WooBag using the Widget. In your Wordpress Admin Control panel, Go to Appearances -> Widgets. Among the Available Widgets section, you will see a widget labelled as WooBag. Just drag it to any widget area of your choice. Set the attributes of your choice, and click Save.

Import/Export

Create-new-template

To export the template settings, you can you the export button next to the Action column of a template. When you will click on it, the downloading will begin and a .txt will be downloaded to your local computer.

Create-new-template

To import the template, you have the import button on the top right section of the templates page. Click on it and a popup will open asking you to choose the file from your local computer. Once imported, a new template with that name will be created.

Please note that the image will need to be manually uploaded into the media files. Also please make sure these images have the same names as they were at the time of exporting the template.

Sample Data

You will find a folder named Sample Template Data which you can use by importing the files into WooBag and uploading the images to media files. Import the three files one by one as WooBag templates. Then go to the template settings and upload the mentioned image into the media files using the browse button.                                                         

 

General Settings

1) WooBag Background Option

This option lets you setup the whole background of WooBag popup.

Following are the ways to set up the background:

  • Image: Using this option, you can use image as your background.
  • Color: Using this option, you can use color as your background.
  • Both: Using this option, you can use both image and color as your background.

Note that the Header's and Footer's backgrounds can also be changed from the Header Area and Footer Area settings menu.

2) Background Image

This option lets you upload/choose the image for the background of WooBag popup.

Note that this option only works if WooBag Background Option is set to Image or Both.

3) Background Image Repeat

This option lets you set the repetition behaviour of the background image for WooBag popup.

  • Repeat-x: To repeat the image horizontally.
  • Repeat-y: To repeat the image vertically.
  • Both: To repeat the image both horizontally and vertically.
  • No-Repeat: To disable the repeat option and showing the single image.

Note that this option only works if WooBag Background Option is set to Image or Both.

4) Background Image Position

This option lets you set the position of the background image both vertically and horizontally.

  • Arrow Left: To move the image to the left hand side.
  • Arrow Up: To move the image upwards.
  • Arrow Right: To move the image to the right hand side.
  • Arrow Down: To move the image downwards.
  • Reset: To reset the image position to the default settings.

Note that this option only works if WooBag Background Option is set to Image or Both.

5) Background Color

This option lets you choose the color for the background from the colour palette.

Note that this option only works if WooBag Background Option is set to Color or Both.

6) Action to Open WooBag Popup

This option lets you decide how you want the WooBag Popup to appear when your customers want to see it using the cart icon. This option works with both Menu icon and Block Icon. You can set it in any of the two ways:

  • On Click: By choosing this option, the WooBag Popup will appear when your customer will click on the cart icon.
  • On Mouse Over: By choosing this option, the WooBag Popup will appear when your customer will bring their mouse pointer over the cart icon.
7) WooBag Popup Position upon Add to Cart Action

This option lets you set the screen position of the new popup in the event when customer adds an item to the cart. This popup will be exactly same as the usual WooBag popup. You will also notice that the newly added item will have a different background color for few seconds to distinguish it from other items in the cart. Here is the explanation on how each option works:

  • Under the Cart Icon: WooBag popup will be shown right under the cart icon.
  • Center of Screen: WooBag popup will be shown in the middle of the screen.
  • Right Side of Screen: WooBag popup will be shown on the right side of the screen.
  • Left Side of Screen: WooBag popup will be shown on the Left side of the screen.
  • Don't Show: If you do not want to show the WooBag popup in the event of adding an item to the cart by your customer, you can do that by choosing this option.
8) Border Color

This option lets you set the color of the Border of WooBag Popup. You can use the color palette to give the border any color of your choice.

9) Border Radius

This option lets you make the corners of your WooBag popup rounded.

10) Border Width

This option lets you set the width of the border of your WooBag popup.

11) Border Style

This option lets you choose the style of the outer border of WooBag popup.

  • Solid: To give plain solid line effect to the border.
  • Dotted: To give dotted line effect to the border.
  • Dashed: To give dashed line effect to the border.
  • Double: To give double plain solid line effect to the border. To use this option, you will need to increase the Border width to at least 3px.
12) Set Custom Width

This option lets you set custom width of your WooBag popup. You can choose any width and the items inside will adjust accordingly. Entering custom width will make it of a fixed width for any screen size. If your website design is responsive for multi-screens then we recommend leaving it empty.

13) Pages to show WooBag on

This option lets you set the pages on which you want to show the WooBag. This option lists all your pages and lets you choose which pages you want to have the WooBag on. If you want to show it on all pages then select All Pages option. It works with the WooBag shown using Widgets or Menu options. It doesn't work with the shortcode because shortcode is in your control and you can remove it yourself from pages of your choice.

14) Action to Close WooBag Popup

This option lets you set how you want the WooBag popup to close. There are two method of closing WooBag Popup.

  • Using the Close Button: WooBag popup will close by clicking on Close icon provided in header area.
  • On Mouse Out: WooBag popup will close when the mouse pointer will be moved away from the WooBag Popup or the Cart Icon. If you choose this option then the Close button will not be shown in the header area.
15) Loader Icon

Loader Icon shows when the WooBag Popup is loading. You have 5 different icon styles to choose from.

16) Loader Icon Size

This option lets you set the size of the icon.

17) Loader Icon Color

This option lets you set the color of your choice for the Loader Icon.

18) Opacity

This option lets you set the Opacity(Transparency) of your WooBag popup. The value 0 is the lightest and the value 1 is the darkest.

This tab lets you set WooBag in one of the menus of your website/store.

1) Show WooBag Icon in Menu

This option lets you decide whether you want to show the WooBag in any of your defined menus. This option also lets you set how you want the cart icon to appear.

  • Icon only:To show just the cart icon in the menu
  • Icon with Items in Cart and Subtotal: To show Cart Icon and also the number of items in the cart along with their subtotal.
  • Icon with Cart Items in Balloon: To show the cart in a fancy style by showing a balloon and the total items in cart inside it.
  • Don't Show: If you do not want to show the WooBag in any of your menus, then select this option.
2) Choose Menu Icon

This option lets you choose which icon you want to use in the menu. There are two options in it:

  • Use Built-in Icon: You can choose from the provided icons using the drop down.
  • Upload your own icon: You can upload the icon of you own choice. If you upload you own icon, the following options will not work:
    • Icon Size
    • Icon Color
    • Icon Color on Mouse Over
3) Menu to Show WooBag on

This option lets you set in which menu you want to show the WooBag. This section lists all your pre-defined menus to choose one from.

4) Menu Icon Placement

This option lets you decide where in the selected menu you want to show the WooBag.

  • Start of Menu: The WooBag will be shown in the First position in the list of the menu items in the selected menu.
  • End of Menu: The WooBag will be shown in the Last position in the list of the menu items in the selected menu
5) Icon Size

This option lets you set the size of the Icon of the WooBag in the Menu. This option doesn't work with your own uploaded icon.

6) Icon Color

This option lets you set the color of the Icon of the WooBag in the Menu. This option doesn't work with your own uploaded icon.

7) Icon Color on Mouse Over

This option lets you set the color of the Icon in the event when mouse pointer is brought over the Cart Icon in the Menu. This option doesn't work with your own uploaded icon.

8) Icon Top Padding

This option lets you move the icon down in your menu.

9) Icon Bottom Padding

This option lets you move the icon up in your menu.

10) Text Color

This option lets you set the color of the text in the menu icon.

Note that this option will not work if your Menu icon is set to show Icon with Items in Cart and Subtotal.

11) Mouse Over Text Color

This option lets you set the mouse over color of the text in the menu icon.

Note that this option will not work if your Menu icon is set to show Icon with Items in Cart and Subtotal.

12) Icon Text Size

This option lets you set the size of the text in the menu icon.

Note that this option will only work if your Menu icon is set to show Icon with Items in Cart and Subtotal.

13) Text Font

This option lets you set the font of the text in the menu icon.

Note that this option will only work if your Menu icon is set to show Icon with Items in Cart and Subtotal.

14) Text Top Padding

This option lets you move the icon text down in your menu.

Note that this option will only work if your Menu icon is set to show Icon with Items in Cart and Subtotal.

15) Text Bottom Padding

This option lets you move the icon text up in your menu.

Note that this option will only work if your Menu icon is set to show Icon with Items in Cart and Subtotal.

16) Balloon Text Color

This option lets you set the color of the numeric value (No. of items in cart) which is shown inside the balloon.

Note that this option only works if the Menu Cart is set to show Icon with Cart Items in Balloon.

17) Balloon Background Color

This option lets you set the background color of the small balloon.

Note that this option only works if the Menu Cart is set to show Icon with Cart Items in Balloon.

18) Balloon Text Size

This option lets you set the size of the numeric value (No. of items in cart) which is shown inside the balloon.

Note that this option only works if the Menu Cart is set to show Icon with Cart Items in Balloon.

19) Balloon Font

This option lets you set the Font of the numeric value text (No. of items in cart) which is shown inside the balloon.

Note that this option only works if the Menu Cart is set to show Icon with Cart Items in Balloon.

Untitled Document

Block Icon Settings

Block icons can be shown on the front end using the widget or shortcode. Just like Menu Icons, WooBag Block icons expand into WooBag Popup upon click or mouse over on the icon. Unlike the Menu Icons, they can be shown anywhere on the website.

1) Choose Icon

This option lets you choose which icon you want to use for the WooBag. There are two options in it:

  • Use Built-in Icon: You can choose from the provided icons using the drop down.
  • Upload your own icon: You can upload the icon of you own choice. If you upload you own icon, the following options will not work:
    • Icon Size
    • Icon Color
    • Icon Color on Mouse Over
2) Show Icon with

This option lets you decide whether you want to show the WooBag in any of your defined menus. This option also lets you set how you want the cart icon to appear.

  • Total Items in Cart: To show the cart icon and the total number of items in the cart.
  • Total Items in Cart with Subtotal: To show the cart icon and the total number of items in the cart along with their subtotal.
  • Total Cart Items in Balloon: To show the cart in a fancy style by showing a balloon and the total items in cart inside it.
  • Icon only: To show just the cart icon
3) Icon Size

This option lets you set the size of the Icon of the WooBag. This option doesn't work with your own uploaded icon.

4) Icon Color

This option lets you set the color of the Icon of the WooBag. This option doesn't work with your own uploaded icon.

5) Icon Color on Mouse Over

This option lets you set the color of the Icon in the event when mouse pointer is brought over the Icon. This option doesn't work with your own uploaded icon.

6) Icon Area Width

This option lets you set the width of the block icon area.

7) Icon Background Option

This option lets you setup the background of Block Icon.
Following are the ways to set up the background:

  • Image: Using this option, you can use image as your background.
  • Color: Using this option, you can use color as your background.
  • Both: Using this option, you can use both image and color as your background.
  • None: If you don't want to use any background, choose this option.
8) Icon Background Image

This option lets you upload/choose the image for the background of Block Icon.
Note that this option only works if Icon Background Option is set to Image or Both.

9) Icon Background Image Repeat

This option lets you set the repetition behaviour of the background image for Block Icon.

  • Repeat-x: To repeat the image horizontally.
  • Repeat-y: To repeat the image vertically.
  • Both: To repeat the image both horizontally and vertically.
  • No-Repeat: To disable the repeat option and showing the single image.

Note that this option only works if Icon Background Option is set to Image or Both.

10) Background Image Position

This option lets you set the position of the background image both vertically and horizontally.

  • Arrow Left: To move the image to the left hand side.
  • Arrow Up: To move the image upwards.
  • Arrow Right: To move the image to the right hand side.
  • Arrow Down: To move the image downwards.
  • Reset: To reset the image position to the default settings.

Note that this option only works if Icon Background Option is set to Image or Both.

11) Icon Background Color

This option lets you choose the color for the background from the colour palette.
Note that this option only works if Icon Background Option is set to Color or Both.

12) Icon Padding Sideways

This option lets you set the width of the Block Icon Background.

13) Icon Padding Top and Bottom

This option lets you set the Height of the Block Icon Background.

14) Icon Text Position

This option lets you set the position of the text on either the left hand or right hand side of the icon.
Note that this option only works if the Block Cart is set to show Total Items in Cart or Total Items in Cart with Subtotal.

15) Icon Text Size

This option lets you set the size of the text.
Note that this option only works if the Block Cart is set to show Total Items in Cart or Total Items in Cart with Subtotal.

16) Icon Text Font

This option lets you set the font of the text.
Note that this option only works if the Block Cart is set to show Total Items in Cart or Total Items in Cart with Subtotal.

17) Icon Text Color

This option lets you set the color of the text.
Note that this option only works if the Block Cart is set to show Total Items in Cart or Total Items in Cart with Subtotal.

18) Icon Text Color on Mouse Over

This option lets you set the color of the text when the mouse pointer is brought over the Block Icon.
Note that this option only works if the Block Cart is set to show Total Items in Cart or Total Items in Cart with Subtotal.

19) Balloon Text Color

This option lets you set the color of the numeric value (No. of items in cart) which is shown inside the balloon.
Note that this option only works if the Block Cart is set to show Total Cart Items in Balloon.

20) Balloon Background Color

This option lets you set the background color of the small balloon.
Note that this option only works if the Block Cart is set to show Total Cart Items in Balloon.
Note that this option only works if the cart icon is set to show with Total Cart Items in Balloon.

21) Balloon Text Size

This option lets you set the size of the numeric value (No. of items in cart) which is shown inside the balloon.
Note that this option only works if the Block Cart is set to show Total Cart Items in Balloon.

22) Balloon Font

This option lets you set the Font of the numeric value text (No. of items in cart) which is shown inside the balloon.
Note that this option only works if the Block Cart is set to show Total Cart Items in Balloon.

Header Settings

Header Area is the top section of your WooBag Popup. It gives you the ability to set any label of your choice to display the number of items in the cart. The WooBag's Close button is also shown in the right side of the header.

1) Show Header Area

This option lets you set your WooBag's header to on or off.

  • Yes: To show the header area
  • No: To hide the header area
2) Header Height

As the customer will add more than one product, Woobag's interface header text can be changed using this field to show a customized heading as compare to the customers having single product in their cart.

3) Header Label for Single Item

This option lets you set the Label of the Header when there is a single item in the cart. The total number of items is a auto value and your defined label shows afterwards. For example 1 Item in Cart where 1 is an auto value which counts automatically as per the number of items in the cart, and Item in Cart is the dynamic value that you can set yourself. You can also hide this auto value using the option named Show Items Count in Header in the Header Area setting tab.

Note that this option only works if:

  • Show Header Area is set to yes.
4) Header Label for Multiple Items

This option lets you set the Label of the Header when there are multiple items in the cart. The total number of items is an auto value and your defined label shows afterwards. For example 4 Items in Cart where 4 is an auto value which counts automatically as per the number of items in the cart, and Items in Cart is the dynamic value that you can set yourself. You can also hide this auto value using the option named Show Items Count in Header in the Header Area setting tab.

Note that this option only works if:

  • Show Header Area is set to yes.
5) Header Label Position

This option lets you set the horizontal position of your header text.

Note that this option only works if:

  • Show Header Area is set to yes.
6) Header Text Vertical Position

This option lets you set the vertical position of your header text.

Note that this option only works if:

  • Show Header Area is set to yes.
7) Header Label Font Size

This option lets you set the size of the text shown in the header.

Note that this option only works if:

  • Show Header Area is set to yes.
8) Header Label Font

This option lets you set the font of the text shown in the header.

Note that this option only works if:

  • Show Header Area is set to yes.
9) Header Text Color

This option lets you set the color of the text shown in the header.

Note that this option only works if:

  • Show Header Area is set to yes.
10) Header Background Option

This option lets you setup the background of header.

Following are the ways to set up the background:

  • Image: Using this option, you can use image as your background.
  • Color: Using this option, you can use color as your background.
  • Both: Using this option, you can use both image and color as your background.
  • None: If you don't want to use any background, choose this option.

Note that this option only works if:

  • Show Header Area is set to yes.
11) Header Background Color

This option lets you set the background color of your header.

Note that this option only works if:

  • Show Header Area is set to yes.
  • Header Background Option is set to Color or Both.
12) Header Background Image

This option lets you upload/choose the image for the background of Header.

Note that this option only works if:

  • Show Header Area is set to yes.
  • Header Background Option is set to Image or Both.
13) Header Background Image Repeat

This option lets you set the repetition behaviour of the background image for Header.

  • Repeat-x: To repeat the image horizontally.
  • Repeat-y: To repeat the image vertically.
  • Both: To repeat the image both horizontally and vertically.
  • No-Repeat: To disable the repeat option and showing the single image.

Note that this option only works if:

  • Show Header Area is set to yes.
  • Header Background Option is set to Image or Both.
14) Background Image Position

This option lets you set the position of the background image both vertically and horizontally.

  • Arrow Left: To move the image to the left hand side.
  • Arrow Up: To move the image upwards.
  • Arrow Right: To move the image to the right hand side.
  • Arrow Down: To move the image downwards.
  • Reset: To reset the image position to the default settings.

Note that this option only works if:

  • Show Header Area is set to yes.
  • Header Background Option is set to Image or Both.
15) Show Items Count in Header

This option lets you show/hide the Items count in the header

  • Yes: To show the items count
  • No: To hide the items count

Note that this option only works if:

  • Show Header Area is set to yes.
16) Show Close Button in Header

This option lets you show/hide the Close Button in the header

  • Yes: To show the Close Button
  • No: To hide the Close Button

Note that this option only works if:

  • Show Header Area is set to yes.
17) Choose Close Button Icon

This option lets you set what icon you want to use for the Close button of the WooBag Popup. You can choose any of the provided icons in the dropdown.

Note that this option only works if:

  • Show Header Area is set to yes.
  • Show Close Button in Header is set to yes.
18) Close Button Icon Color

This option lets you set the color of the icon of your Close Button.

Note that this option only works if:

  • Show Header Area is set to yes.
  • Show Close Button in Header is set to yes.
19) Close Button Icon Color on Mouse Over

This option lets you set the color of the icon of your Close Button when mouse pointer is brought over it.

Note that this option only works if:

  • Show Header Area is set to yes.
  • Show Close Button in Header is set to yes.
20) Close Button Icon Size

This option lets you set the size of close button icon.

Note that this option only works if:

  • Show Header Area is set to yes.
  • Show Close Button in Header is set to yes.
21) Close Button Position

This option lets you set the horizontal position of the close button icon.

Note that this option only works if:

  • Show Header Area is set to yes.
  • Show Close Button in Header is set to yes.
22) Show Header Bottom Separator

This option lets you show/hide the bottom border of the header.

Note that this option only works if:

  • Show Header Area is set to yes.
23) Header Separator Style

This option lets you choose the style of the bottom border of the Header.

  • Solid: To give plain solid line effect to the border.
  • Dotted: To give dotted line effect to the border.
  • Dashed: To give dashed line effect to the border.
  • Double: To give double plain solid line effect to the border. To use this option, you will need to increase the Border width to at least 3px.

Note that this option only works if:

  • Show Header Area is set to yes.
  • Show Header Bottom Separator is set to yes.
24) Header Separator Width

This option lets you set the width of the bottom border of the Header.

Note that this option only works if:

  • Show Header Area is set to yes.
  • Show Header Bottom Separator is set to yes.
25) Header Separator Color

This option lets you set the color of the bottom border of the Header. You can use the color palette to give the border any color of your choice.

Note that this option only works if:

  • Show Header Area is set to yes.
  • Show Header Bottom Separator is set to yes.

Items Area Settings

1) Item Area Padding Sideways

This option lets you set the width of the items area by adjusting padding on both (right and left) sides.

2) Show Items Separator

This option lets you set the separator row between the items in the cart.

3) Items Separator Style

This option lets you choose the item separators style.

  • Solid: To use plain solid line separator to separate every item present in the cart.
  • Dotted: To use dotted line separator to separate every item present in the cart.
  • Dashed: To use dashed line separator to separate every item present in the cart.
  • Double: To use double plain solid line separator to separate every item present in the cart. To use this option, you will need to increase the Item Separator width to at least 3px.

Note that this option only works if:

  • Show Items Separator is set to Yes.
4) Item Separator Width

This option lets you set custom width of the Item separators.

Note that this option only works if:

  • Show Items Separator is set to Yes.
5) Item Separator Color

This option lets you set Color of the Item separators.

Note that this option only works if:

  • Show Items Separator is set to Yes.
6) Items Area Visible Window

This option lets you set how many items you want to make visible in the WooBag. The rest of the items will go in the scrolling (below the fold).

  • 1, 2 or 3: By choosing any of these options will set the items window accordingly. For example, if you choose 2 and there are 3 items in the cart, the rest of the items will go under the fold and customer will have to scroll down to see the third item.
  • Auto Adjust: This option will auto adjust the height of the Items visible window as per the screen size of the customer/visitor.
7) Set Height of an Individual Item

If you choose to display 1,2 or 3 items in the visible window, then you are required to enter an estimated height of an individual item when it shows in the cart. The recommended value is between 110 and 140. This value is required for the amazing item to item scroll jump feature.

Note that this option only works if:

  • Items Area Visible Window is set to value 1, 2 or 3.
8) Show Items Quantity

This option lets you hide/show the quantity of an individual item in cart.

  • Yes: To show the quantity of an item.
  • No: To hide the quantity of an item.
9) Quantity Label Color

This option lets you set the color of the quantity label in items area.

Note that this option only works if:

  • Show Items Quantity is set to yes.
10) Quantity Value Color

This option lets you set the color of the quantity label in items area.

11) Show Items Price

This option lets you set the way price of an individual item shows in the cart.

  • Sale Price Only: To show only the sale price of an individual item.
  • Regular Price + Sale Price: To show both Regular Price and the Sale price.
  • Don't Show: To hide the price of an individual item in the cart.
12) Price Label Color

This option lets you set the color of the Price label in items area.

Note that this option only works if:

  • Show Items Price is set to yes.
13) Price Value Color

This option lets you set the color of the Price label in items area.

Note that this option only works if:

  • Show Items Price is set to yes.
14) Text after Items Saving

This option lets you set any custom text after the price of each item in the cart.

Note that this option only works if:

  • Show Items Price is set to yes.
15) Show Items Saving

This option lets you show/hide the Savings % on an individual item in cart. It will automatically hide for an item that is having 0% saving.

  • Yes: Show savings % on an individual item in the cart.
  • No: Hide Savings % on an individual item in the cart.
16) Show Tax per Item

This option lets you show/hide the Tax amount on an individual item in cart.

  • Yes: Show Tax amount on an individual item in the cart.
  • No: Hide Tax amount on an individual item in the cart.
17) Show Items Image

This option lets you show/hide the Image of an individual item in cart.

  • Yes: Show Image of an individual item in the cart.
  • No: Hide Image of an individual item in the cart.
18) Set Width of Items Image

This option lets you set the width of an item's image. You have full control on how you want to set the Image and Text ratio. The maximum you can distribute among image in text is 90% of the WooBag Popup because the rest of the 10% is for the item remove button.

19) Set Width of Items Content

This option lets you set the width of an item's text. You have full control on how you want to set the Image and Text ratio. The maximum you can distribute among image in text is 90% of the WooBag Popup because the rest of the 10% is for the item remove button.

20) Item's Content Text Color

This option lets you set the color for rest of the text shown for an individual item e.g. custom attributes such as Size, Color, Tax etc.

21) Items Content Text Position

This option lets you set the horizontal position of the content of items area.

22) Item's Content Text Padding Left

This option lets you set the padding of the item's content area from the left hand side.

23) Item Title Color

The option lets you sent the color of the title of an individual item in cart.

24) Items Title Font

The option lets you sent the font of the title of an individual item in cart.

25) Content Font

The option lets you sent the font of the content of an individual item in cart other than the item title.

26) Show Remove Item Button

This option lets you show/hide the remove button icon of an individual item in the cart.

  • Yes: This option will show Remove Button next to each item in the cart.
  • No: This option will hide Remove Button for all items in the cart.
27) Choose Remove Item button

This option lets you set what icon you want to use for the Remove Button of an individual item in the cart. You can choose any of the provided icons in the dropdown.

Note that this option only works if:

  • Show Remove Item Button is set to Yes.
28) Remove Item Button Position

This option lets you set the vertical position of the remove button icon.

Note that this option only works if:

  • Show Remove Item Button is set to Yes.
29) Remove Button Icon Color

This option lets you set the color of the icon of your Remove Button for an individual item in cart.

Note that this option only works if:

  • Show Remove Item Button is set to Yes.
30) Remove Button Icon Color on Mouse Over

This option lets you set the color of the icon of your Remove Button for an individual item in cart when mouse pointer is brought over it.

Note that this option only works if:

  • Show Remove Item Button is set to Yes.
31) Show Remove Items Confirmation

This option lets you show/hide the confirmation alert box at the time when customer removes an item from the cart.

  • Yes: To show the confirmation box when an item is removed from the cart.
  • No: To hide the confirmation box when an item is removed from the cart.
32) Confirmation Box Heading

This option lets you set the heading of your confirmation alert box.

Note that this option only works if:

  • Show Remove Items Confirmation is set to Yes.
33) Confirmation Message

This option lets you set the message to show on the confirmation message. Using this option you can show a teaser message to your customers to convince them note to remove it. A Good example would be: This item might be out of stock in a couple of hours, are you sure you don't want it?

Note that this option only works if:

  • Show Remove Items Confirmation is set to Yes.
34) Confirmation box Ok button Text

This option lets you set the text for the OK button of your Item Removal Confirmation Message Box.

Note that this option only works if:

  • Show Remove Items Confirmation is set to Yes.
35) Confirmation box Cancel button Text

This option lets you set the text for the Cancel button of your Item Removal Confirmation Message Box.

Note that this option only works if:

  • Show Remove Items Confirmation is set to Yes.

Subtotal Area

This is the area above the footer of the WooBag Popup. You can use this area to show Price in different combinations and also you can show different buttons like View Cart, Checkout and/or Empty Cart.
1) Subtotal Area Padding Sideways

This feature lets you set the width of the subtotal area by giving padding on both (Right and Left) sides.

2) Subtotal Area Vertical Position

This option lets you set the vertical position of subtotal area.

3) Subtotal Area Height

This option lets you set the height of the Subtotal Area.

4) Show Total Price

This options lets you choose how you want to show the price summary of the items present in the cart. The price can even be hidden, if you do not want to show it.

  • Show Subtotal: To show just the Subtotal of the items present in the cart.
  • Show Order Total: To show the Order Total of the items present in the cart.
  • Don't Show: To hide the price from this section.
5) Subtotal Label

This option lets to set a label for the Subtotal. You can leave this field empty if you don't want to show a label.

Note that this option only works if:

  • Show Total Price is set to Show Subtotal.
6) Order Total Label

This option lets to set a label for the Order Total. You can leave this field empty if you don't want to show a label.

Note that this option only works if:

  • Show Total Price is set to Show Order Total.
7) Total Text Position

This option lets you set the horizontal position of Total text.

8) Font Color of the Price

This option lets you set the color of the price section.

Note that this option doesn't work, if:

  • Show Total Price is set to Don't Show.
9) Subtotal Font Size

This option lets you set the Font size of the price section.

Note that this option doesn't work, if:

  • Show Total Price is set to Don't Show.
10) Subtotal Font

This option lets you set the Font of the price section.

Note that this option doesn't work, if:

  • Show Total Price is set to Don't Show.
11) Show Subtotal Top Separator

This option lets you show/hide the top separator the subtotal area.

  • Yes: To show the subtotal separator.
  • No: To hide the subtotal separator.
12) Subtotal Separator Style

This option lets you choose the subtotal separators style.

  • Solid: To use plain solid line separator.
  • Dotted: To use dotted line separator.
  • Dashed: To use dashed line separator.
  • Double: To use double plain solid line separator. To use this option, you will need to increase the Subtotal Separator width to at least 3px.

Note that this option only works if:

  • Show Subtotal Top Separator is set to Yes.
13) Subtotal Separator Width

This option lets you set custom width of the Subtotal separator.

Note that this option only works if:

  • Show Subtotal Top Separator is set to Yes.
14) Subtotal Separator Color

This option lets you set Color of the Subtotal separator.

Note that this option only works if:

  • Show Subtotal Top Separator is set to Yes.
15) Button Position

This option lets you set the horizontal position of the buttons in Subtotal area.

16) Show View Bag Button

This option lets you show/hide the View Bag/Cart button above the footer.

  • Yes: To show the View Bag button.
  • No: To hide the View Bag button.
17) View Bag Button Width

This option lets you set the width of the View Bag button.

Note that this option only works if:

  • Show View Bag Button is set to Yes.
18) View Bag Button Height

This option lets you set the height of the View Bag button.

Note that this option only works if:

  • Show View Bag Button is set to Yes.
19) View Bag Button Text

This option lets you set the custom text of the View Bag button.

Note that this option only works if:

  • Show View Bag Button is set to Yes.
20) View Bag Button Background Option

This option lets you setup the background of View Bag Button.

  • Image: Using this option, you can use image as your background.
  • Color: Using this option, you can use color as your background.
  • Both: Using this option, you can use both image and color as your background.
  • None: If you don't want to use any background, choose this option.

Note that this option only works if:

  • Show View Bag Button is set to Yes.
21) View Bag Button Background Color

This option lets you set the background color of your View Bag Button.

Note that this option only works if:

  • Show View Bag Button is set to Yes.
  • View Bag Button Background Option is set to Color or Both.
22) View Bag Button Background Image

This option lets you upload/choose the image for the background of View Bag Button.

Note that this option only works if:

  • Show View Bag Button is set to Yes.
  • View Bag Button Background Option is set to Image or Both.
23) View Bag Button Background Image Repeat

This option lets you set the repetition behaviour of the background image for View Bag Button.

  • Repeat-x: To repeat the image horizontally.
  • Repeat-y: To repeat the image vertically.
  • Both: To repeat the image both horizontally and vertically.
  • No-Repeat: To disable the repeat option and showing the single image.

Note that this option only works if:

  • Show View Bag Button is set to Yes.
  • View Bag Button Background Option is set to Image or Both.
24) View Bag Button Background Image Position

This option lets you set the position of the background image both vertically and horizontally.

  • Arrow Left: To move the image to the left hand side.
  • Arrow Up: To move the image upwards.
  • Arrow Right: To move the image to the right hand side.
  • Arrow Down: To move the image downwards.
  • Reset: To reset the image position to the default settings.

Note that this option only works if:

  • Show View Bag Button is set to Yes.
  • View Bag Button Background Option is set to Image or Both.
25) View Bag Button Font Size

This option lets you set the font size of the View Bag button.

Note that this option only works if:

  • Show View Bag Button is set to Yes.
26) View Bag Button Text Color

This option lets you set the text color of the View Bag button.

Note that this option only works if:

  • Show View Bag Button is set to Yes.
27) View Bag Button Font

This option lets you set the font of the text of View Bag button.

Note that this option only works if:

  • Show View Bag Button is set to Yes.
28) View Bag Button Border Width

This option lets you set the border width of the View Bag button.

Note that this option only works if:

  • Show View Bag Button is set to Yes.
29) View Bag Button Border Radius

This option lets you set the border radius of the View Bag button.

Note that this option only works if:

  • Show View Bag Button is set to Yes.
30) View Bag Button Border Color

This option lets you set the border color of the View Bag button.

Note that this option only works if:

  • Show View Bag Button is set to Yes.
31) View Bag Button Border Style

This option lets you choose the View Bag button border style.

  • Solid: To use plain solid line border.
  • Dotted: To use dotted line border.
  • Dashed: To use dashed line border.
  • Double: To use double plain solid line border. To use this option, you will need to increase the View Bag Button Border Width to at least 3px.

Note that this option only works if:

  • Show View Bag Button is set to Yes.
32) View Bag Button Mouse Over Border Color

This option lets you set the border color of the View Bag button when mouse pointer is brought over it.

Note that this option only works if:

  • Show View Bag Button is set to Yes.
33) View Bag Button Mouse Over Background Option

This option lets you setup the background of View Bag Button on mouse over.

Following are the ways to set up the background:

  • Image: Using this option, you can use image as your background.
  • Color: Using this option, you can use color as your background.
  • Both: Using this option, you can use both image and color as your background.
  • None: If you don't want to use any background, choose this option.

Note that this option only works if:

  • Show View Bag Button is set to Yes.
34) View Bag Button Mouse Over Background Color

This option lets you choose the color for the background of View Bag Button on mouse over.

Note that this option only works if:

  • Show View Bag Button is set to Yes.
  • View Bag Button Background Option is set to Color or Both.
35) View Bag Button Mouse Over Background Image

This option lets you upload/choose the image for the background of View Bag Button on mouse over.

Note that this option only works if:

  • Show View Bag Button is set to Yes.
  • View Bag Button Background Option is set to Image or Both.
36) View Bag Button Mouse Over Background Image Repeat

This option lets you set the repetition behaviour of the background image for View Bag Button on mouse over.

  • Repeat-x: To repeat the image horizontally.
  • Repeat-y: To repeat the image vertically.
  • Both: To repeat the image both horizontally and vertically.
  • No-Repeat: To disable the repeat option and showing the single image.

Note that this option only works if:

  • Show View Bag Button is set to Yes.
  • View Bag Button Background Option is set to Image or Both.
37) View Bag Button Mouse Over Background Image Position

This option lets you set the position of the background image on mouse over both vertically and horizontally.

  • Arrow Left: To move the image to the left hand side.
  • Arrow Up: To move the image upwards.
  • Arrow Right: To move the image to the right hand side.
  • Arrow Down: To move the image downwards.
  • Reset: To reset the image position to the default settings.

Note that this option only works if:

  • Show View Bag Button is set to Yes.
  • View Bag Button Background Option is set to Image or Both.
38) View Bag Button Mouse Over Text Color

This option lets you set the text color of the View Bag button when mouse pointer is brought over it.

Note that this option only works if:

  • Show View Bag Button is set to Yes.
39) Show Checkout Button

This option lets you show/hide the Checkout button above the footer.

  • Yes: To show the Checkout button.
  • No: To hide the Checkout button.
40) Checkout Button Width

This option lets you set the width of the Checkout button.

Note that this option only works if:

  • Show Checkout Button is set to Yes.
41) Checkout Button Height

This option lets you set the height of the Checkout button.

Note that this option only works if:

  • Show Checkout Button is set to Yes.
42) Checkout Button Text

This option lets you set the custom text of the Checkout button.

Note that this option only works if:

  • Show Checkout Button is set to Yes.
43) Checkout Button Background Option

This option lets you setup the background of Checkout Button.

  • Image: Using this option, you can use image as your background.
  • Color: Using this option, you can use color as your background.
  • Both: Using this option, you can use both image and color as your background.
  • None: If you don't want to use any background, choose this option.

Note that this option only works if:

  • Show Checkout Button is set to Yes.
44) Checkout Button Background Color

This option lets you set the background color of your Checkout Button.

Note that this option only works if:

  • Show Checkout Button is set to Yes.
  • Checkout Button Background Option is set to Color or Both.
45) Checkout Button Background Image

This option lets you upload/choose the image for the background of Checkout Button.

Note that this option only works if:

  • Show Checkout Button is set to Yes.
  • Checkout Button Background Option is set to Image or Both.
46) Checkout Button Background Image Repeat

This option lets you set the repetition behaviour of the background image for Checkout Button.

  • Repeat-x: To repeat the image horizontally.
  • Repeat-y: To repeat the image vertically.
  • Both: To repeat the image both horizontally and vertically.
  • No-Repeat: To disable the repeat option and showing the single image.

Note that this option only works if:

  • Show Checkout Button is set to Yes.
  • Checkout Button Background Option is set to Image or Both.
47) Checkout Button Background Image Position

This option lets you set the position of the background image both vertically and horizontally.

  • Arrow Left: To move the image to the left hand side.
  • Arrow Up: To move the image upwards.
  • Arrow Right: To move the image to the right hand side.
  • Arrow Down: To move the image downwards.
  • Reset: To reset the image position to the default settings.

Note that this option only works if:

  • Show Checkout Button is set to Yes.
  • Checkout Button Background Option is set to Image or Both.
48) Checkout Button Text Color

This option lets you set the text color of the Checkout button.

Note that this option only works if:

  • Show Checkout Button is set to Yes.
49) Checkout Button Font Size

This option lets you set the font size of the Checkout button.

Note that this option only works if:

  • Show Checkout Button is set to Yes.
50) Checkout Button Font

This option lets you set the font of the text of Checkout button.

Note that this option only works if:

  • Show Checkout Button is set to Yes.
51) Checkout Button Border Width

This option lets you set the border width of the Checkout button.

Note that this option only works if:

  • Show Checkout Button is set to Yes.
52) Checkout Button Border Radius

This option lets you set the border radius of the Checkout button.

Note that this option only works if:

  • Show Checkout Button is set to Yes.
53) Checkout Button Border Color

This option lets you set the border color of the Checkout button.

Note that this option only works if:

  • Show Checkout Button is set to Yes.
54) Checkout Button Border Style

This option lets you choose the Checkout button border style.

  • Solid: To use plain solid line border.
  • Dotted: To use dotted line border.
  • Dashed: To use dashed line border.
  • Double: To use double plain solid line border. To use this option, you will need to increase the Checkout Button Border Width to at least 3px.

Note that this option only works if:

  • Show Checkout Button is set to Yes.
55) Checkout Button Mouse Over Border Color

This option lets you set the border color of the Checkout button when mouse pointer is brought over it.

Note that this option only works if:

  • Show Checkout Button is set to Yes.
56) Checkout Button Mouse Over Background Option

This option lets you setup the background of Checkout Button on mouse over.

Following are the ways to set up the background:

  • Image: Using this option, you can use image as your background.
  • Color: Using this option, you can use color as your background.
  • Both: Using this option, you can use both image and color as your background.
  • None: If you don't want to use any background, choose this option.

Note that this option only works if:

  • Show Checkout Button is set to Yes.
57) Checkout Button Mouse Over Background Color

 

Note that this option only works if:

  • Show Checkout Button is set to Yes.
  • Checkout Button Background Option is set to Color or Both.
58) Checkout Button Mouse Over Background Image

This option lets you upload/choose the image for the background of Checkout Button on mouse over.

Note that this option only works if:

  • Show Checkout Button is set to Yes.
  • Checkout Button Background Option is set to Image or Both.
59) Checkout Button Mouse Over Background Image Repeat

This option lets you set the repetition behaviour of the background image for Checkout Button on mouse over.

  • Repeat-x: To repeat the image horizontally.
  • Repeat-y: To repeat the image vertically.
  • Both: To repeat the image both horizontally and vertically.
  • No-Repeat: To disable the repeat option and showing the single image.

Note that this option only works if:

  • Show Checkout Button is set to Yes.
  • Checkout Button Background Option is set to Image or Both.
60) Checkout Button Mouse Over Background Image Position

This option lets you set the position of the background image on mouse over both vertically and horizontally.

  • Arrow Left: To move the image to the left hand side.
  • Arrow Up: To move the image upwards.
  • Arrow Right: To move the image to the right hand side.
  • Arrow Down: To move the image downwards.
  • Reset: To reset the image position to the default settings.

Note that this option only works if:

  • Show Checkout Button is set to Yes.
  • Checkout Button Background Option is set to Image or Both.
61) Checkout Button Mouse Over Text Color

This option lets you set the text color of the Checkout button when mouse pointer is brought over it.

Note that this option only works if:

  • Show Checkout Button is set to Yes.
62) Show Empty Cart Button

This option lets you show/hide the Empty Cart button above the footer.

  • Yes: To show the Empty Cart button.
  • No: To hide the Empty Cart button.
63) Empty Cart Button Width

This option lets you set the width of the Empty Cart button.

Note that this option only works if:

  • Show Empty Cart Button is set to Yes.
64) Empty Cart Button Height

This option lets you set the height of the Empty Cart button.

Note that this option only works if:

  • Show Empty Cart Button is set to Yes.
65) Empty Cart Button Text

This option lets you set the custom text of the Empty Cart button.

Note that this option only works if:

  • Show Empty Cart Button is set to Yes.
66) Empty Cart Button Background Option

This option lets you setup the background of Empty Cart Button.

  • Image: Using this option, you can use image as your background.
  • Color: Using this option, you can use color as your background.
  • Both: Using this option, you can use both image and color as your background.
  • None: If you don't want to use any background, choose this option.

Note that this option only works if:

  • Show Empty Cart Button is set to Yes.
67) Empty Cart Button Background Color

This option lets you set the background color of your Empty Cart Button.

Note that this option only works if:

  • Show Empty Cart Button is set to Yes.
  • Empty Cart Button Background Option is set to Color or Both.
68) Empty Cart Button Background Image

This option lets you upload/choose the image for the background of Empty Cart Button.

Note that this option only works if:

  • Show Empty Cart Button is set to Yes.
  • Empty Cart Button Background Option is set to Image or Both.
69) Empty Cart Button Background Image Repeat

This option lets you set the repetition behaviour of the background image for Empty Cart Button.

  • Repeat-x: To repeat the image horizontally.
  • Repeat-y: To repeat the image vertically.
  • Both: To repeat the image both horizontally and vertically.
  • No-Repeat: To disable the repeat option and showing the single image.

Note that this option only works if:

  • Show Empty Cart Button is set to Yes.
  • Empty Cart Button Background Option is set to Image or Both.
70) Empty Cart Button Background Image Position

This option lets you set the position of the background image both vertically and horizontally.

  • Arrow Left: To move the image to the left hand side.
  • Arrow Up: To move the image upwards.
  • Arrow Right: To move the image to the right hand side.
  • Arrow Down: To move the image downwards.
  • Reset: To reset the image position to the default settings.

Note that this option only works if:

  • Show Empty Cart Button is set to Yes.
  • Empty Cart Button Background Option is set to Image or Both.
71) Empty Cart Button Font Size

This option lets you set the font size of the Empty Cart button.

Note that this option only works if:

  • Show Empty Cart Button is set to Yes.
72) Empty Cart Button Text Color

This option lets you set the text color of the Empty Cart button.

Note that this option only works if:

  • Show Empty Cart Button is set to Yes.
73) Empty Cart Button Font

This option lets you set the font of the text of Empty Cart button.

Note that this option only works if:

  • Show Empty Cart Button is set to Yes.
74) Empty Cart Button Border Width

This option lets you set the border width of the Empty Cart button.

Note that this option only works if:

  • Show Empty Cart Button is set to Yes.
75) Empty Cart Button Border Radius

This option lets you set the border radius of the Empty Cart button.

Note that this option only works if:

  • Show Empty Cart Button is set to Yes.
76) Empty Cart Button Border Color

This option lets you set the border color of the Empty Cart button.

Note that this option only works if:

  • Show Empty Cart Button is set to Yes.
77) Empty Cart Button Border Style

This option lets you choose the Empty Cart button border style.

  • Solid: To use plain solid line border.
  • Dotted: To use dotted line border.
  • Dashed: To use dashed line border.
  • Double: To use double plain solid line border. To use this option, you will need to increase the Empty Cart Button Border Width to at least 3px.

Note that this option only works if:

  • Show Empty Cart Button is set to Yes.
78) Empty Cart Button Mouse Over Border Color

This option lets you set the border color of the Empty Cart button when mouse pointer is brought over it.

Note that this option only works if:

  • Show Empty Cart Button is set to Yes.
79) Empty Cart Button Mouse Over Background Option

This option lets you setup the background of Empty Cart Button on mouse over.

Following are the ways to set up the background:

  • Image: Using this option, you can use image as your background.
  • Color: Using this option, you can use color as your background.
  • Both: Using this option, you can use both image and color as your background.
  • None: If you don't want to use any background, choose this option.

Note that this option only works if:

  • Show Empty Cart Button is set to Yes.
80) Empty Cart Button Mouse Over Background Color

This option lets you choose the color for the background of Empty Cart Button on mouse over.

Note that this option only works if:

  • Show Empty Cart Button is set to Yes.
  • Empty Cart Button Background Option is set to Color or Both.
81) Empty Cart Button Mouse Over Background Image

This option lets you upload/choose the image for the background of Empty Cart Button on mouse over.

Note that this option only works if:

  • Show Empty Cart Button is set to Yes.
  • Empty Cart Button Background Option is set to Image or Both.
82) Empty Cart Button Mouse Over Background Image Repeat

This option lets you set the repetition behaviour of the background image for Empty Cart Button on mouse over.

  • Repeat-x: To repeat the image horizontally.
  • Repeat-y: To repeat the image vertically.
  • Both: To repeat the image both horizontally and vertically.
  • No-Repeat: To disable the repeat option and showing the single image.

Note that this option only works if:

  • Show Empty Cart Button is set to Yes.
  • Empty Cart Button Background Option is set to Image or Both.
83) Empty Cart Button Mouse Over Background Image Position

This option lets you set the position of the background image on mouse over both vertically and horizontally.

  • Arrow Left: To move the image to the left hand side.
  • Arrow Up: To move the image upwards.
  • Arrow Right: To move the image to the right hand side.
  • Arrow Down: To move the image downwards.
  • Reset: To reset the image position to the default settings.

Note that this option only works if:

  • Show Empty Cart Button is set to Yes.
  • Empty Cart Button Background Option is set to Image or Both.
84) Empty Cart Button Mouse Over Text Color

This option lets you set the text color of the Empty Cart button when mouse pointer is brought over it.

Note that this option only works if:

  • Show Empty Cart Button is set to Yes.
85) Show Custom Button

This option lets you show/hide the Custom/User-defined button above the footer where you can set the Text and URL of your own choice.

  • Yes: To show the Custom button.
  • No: To hide the Custom button.
86) Custom Button Width

This option lets you set the width of the Custom button.

Note that this option only works if:

  • Show Custom Button is set to Yes.
87) Custom Button Height

This option lets you set the height of the Custom button.

Note that this option only works if:

  • Show Custom Button is set to Yes.
88) Custom Button Text

This option lets you set the custom text of the Custom button.

Note that this option only works if:

  • Show Custom Button is set to Yes.
89) Custom Button URL

This option lets you put in any URL of your choice to link the button to.

Note that this option only works if:

  • Show Custom Button is set to Yes.
90) Custom Button Background Option

This option lets you setup the background of Custom Button.

  • Image: Using this option, you can use image as your background.
  • Color: Using this option, you can use color as your background.
  • Both: Using this option, you can use both image and color as your background.
  • None: If you don't want to use any background, choose this option.

Note that this option only works if:

  • Show Custom Button is set to Yes.
91) Custom Button Background Color

This option lets you set the background color of your Custom Button.

Note that this option only works if:

  • Show Custom Button is set to Yes.
  • Custom Button Background Option is set to Color or Both.
92) Custom Button Background Image

This option lets you upload/choose the image for the background of Custom Button.

Note that this option only works if:

  • Show Custom Button is set to Yes.
  • Custom Button Background Option is set to Image or Both.
93) Custom Button Background Image Repeat

This option lets you set the repetition behaviour of the background image for Custom Button.

  • Repeat-x: To repeat the image horizontally.
  • Repeat-y: To repeat the image vertically.
  • Both: To repeat the image both horizontally and vertically.
  • No-Repeat: To disable the repeat option and showing the single image.

Note that this option only works if:

  • Show Custom Button is set to Yes.
  • Custom Button Background Option is set to Image or Both.
94) Custom Button Background Image Position

This option lets you set the position of the background image both vertically and horizontally.

  • Arrow Left: To move the image to the left hand side.
  • Arrow Up: To move the image upwards.
  • Arrow Right: To move the image to the right hand side.
  • Arrow Down: To move the image downwards.
  • Reset: To reset the image position to the default settings.

Note that this option only works if:

  • Show Custom Button is set to Yes.
  • Custom Button Background Option is set to Image or Both.
95) Custom Button Font Size

This option lets you set the font size of the Custom button.

Note that this option only works if:

  • Show Custom Button is set to Yes.
96) Custom Button Text Color

This option lets you set the text color of the Custom button.

Note that this option only works if:

  • Show Custom Button is set to Yes.
97) Custom Button Font

This option lets you set the font of the text of Custom button.

Note that this option only works if:

  • Show Custom Button is set to Yes.
98) Custom Button Border Width

This option lets you set the border width of the Custom button.

Note that this option only works if:

  • Show Custom Button is set to Yes.
99) Custom Button Border Radius

This option lets you set the border radius of the Custom button.

Note that this option only works if:

  • Show Custom Button is set to Yes.
100) Custom Button Border Color

This option lets you set the border color of the Custom button.

Note that this option only works if:

  • Show Custom Button is set to Yes.
101) Custom Button Border Style

This option lets you choose the Custom button border style.

  • Solid: To use plain solid line border.
  • Dotted: To use dotted line border.
  • Dashed: To use dashed line border.
  • Double: To use double plain solid line border. To use this option, you will need to increase the Custom Button Border Width to at least 3px.

Note that this option only works if:

  • Show Custom Button is set to Yes.
102) Custom Button Mouse Over Border Color

This option lets you set the border color of the Custom button when mouse pointer is brought over it.

Note that this option only works if:

  • Show Custom Button is set to Yes.
103) Custom Button Mouse Over Background Option

This option lets you setup the background of Custom Button on mouse over.

Following are the ways to set up the background:

  • Image: Using this option, you can use image as your background.
  • Color: Using this option, you can use color as your background.
  • Both: Using this option, you can use both image and color as your background.
  • None: If you don't want to use any background, choose this option.

Note that this option only works if:

  • Show Custom Button is set to Yes.
104) Custom Button Mouse Over Background Color

 

Note that this option only works if:

  • Show Custom Button is set to Yes.
  • Custom Button Background Option is set to Color or Both.
105) Custom Button Mouse Over Background Image

This option lets you upload/choose the image for the background of Custom Button on mouse over.

Note that this option only works if:

  • Show Custom Button is set to Yes.
  • Custom Button Background Option is set to Image or Both.
106) Custom Button Mouse Over Background Image Repeat

This option lets you set the repetition behaviour of the background image for Custom Button on mouse over.

  • Repeat-x: To repeat the image horizontally.
  • Repeat-y: To repeat the image vertically.
  • Both: To repeat the image both horizontally and vertically.
  • No-Repeat: To disable the repeat option and showing the single image.

Note that this option only works if:

  • Show Custom Button is set to Yes.
  • Custom Button Background Option is set to Image or Both.
107) Custom Button Mouse Over Background Image Position

This option lets you set the position of the background image on mouse over both vertically and horizontally.

  • Arrow Left: To move the image to the left hand side.
  • Arrow Up: To move the image upwards.
  • Arrow Right: To move the image to the right hand side.
  • Arrow Down: To move the image downwards.
  • Reset: To reset the image position to the default settings.

Note that this option only works if:

  • Show Custom Button is set to Yes.
  • Custom Button Background Option is set to Image or Both.
108) Custom Button Mouse Over Text Color

This option lets you set the text color of the Custom button when mouse pointer is brought over it.

Note that this option only works if:

  • Show Custom Button is set to Yes.

Scroll Settings

This amazing feature lets you decide how you want to set cart items scrolling of your WooBag. You can set the scrolling type and also how the scrolling behaves.

1) Scroll Type

This amazing feature lets you decide how you want to set cart items scrolling of your WooBag. You can set the scrolling type and also how the scrolling behaves.

  • Button Scroll: Lets you show the buttons to scroll the cart items up or down.
  • Mouse Wheel Scroll: Enables the default scrolling feature using mouse or scroll wheel.
2) Scroll Bar Color

This option lets you set the color of the scroll bar on the right hand side.

Note that this option only works if:

  • Scroll Type is set to Mouse wheel Scroll.
3) Scroll Behaviour

This option lets you set the action with which the scrolling takes place.

  • Mouseover Scroll: To scroll up/down when user brings mouse over the scroll buttons.
  • Mouseclick Micro Scroll: To scroll a little up/down when user clicks on the scroll buttons.
  • Mouseclick Mini Scroll: To scroll up/down slightly more than the Micro scroll when user clicks on the scroll buttons.
  • Mouseclick Item to Item Scroll: To scroll a directly to the next item in the cart when user clicks on the scroll buttons.

Note that this option only works if:

  • Scroll Type is set to Button Scroll.
4) Scroll Button Padding Sideways

This feature lets you adjust the position from both side (Right and Left) by using the padding feature.

Note that this option only works if:

  • Scroll Type is set to Button Scroll.
5) Scroll Button Width

This option lets you set the width percentage of your scroll buttons.

Note that this option only works if:

  • Scroll Type is set to Button Scroll.
6) Scroll Button Position

This option lets you set the horizontal position of your scroll buttons settings.

Note that this option only works if:

  • Scroll Type is set to Button Scroll.
7) Scroll Button Background Option

This option lets you setup the background of scroll buttons.

Following are the ways to set up the background:

  • Image: Using this option, you can use image as your background.
  • Color: Using this option, you can use color as your background.
  • Both: Using this option, you can use both image and color as your background.
  • None: If you don't want to use any background, choose this option.

Note that this option only works if:

  • Scroll Type is set to Button Scroll.
8) Scroll Button Background Color

This option lets you set the background color of your scroll buttons.

Note that this option only works if:

  • Scroll Type is set to Button Scroll.
  • Scroll Button Background Option is set to Color or Both.
9) Scroll Button Background Image

This option lets you upload/choose the image for the background of scroll buttons.

Note that this option only works if:

  • Scroll Type is set to Button Scroll.
  • Scroll Button Background Option is set to Image or Both.
10) Scroll Button Background Image Repeat

This option lets you set the repetition behaviour of the background image for scroll buttons.

  • Repeat-x: To repeat the image horizontally.
  • Repeat-y: To repeat the image vertically.
  • Both: To repeat the image both horizontally and vertically.
  • No-Repeat: To disable the repeat option and showing the single image.

Note that this option only works if:

  • Scroll Type is set to Button Scroll.
  • Scroll Button Background Option is set to Image or Both.
11) Scroll Button Background Image Position

This option lets you set the position of the background image both vertically and horizontally.

  • Arrow Left: To move the image to the left hand side.
  • Arrow Up: To move the image upwards.
  • Arrow Right: To move the image to the right hand side.
  • Arrow Down: To move the image downwards.
  • Reset: To reset the image position to the default settings.

Note that this option only works if:

  • Scroll Type is set to Button Scroll.
  • Scroll Button Background Option is set to Image or Both.
12) Scroll Button Arrow Color

This option lets you set the color of the arrows used in the scroll buttons.

Note that this option only works if:

  • Scroll Type is set to Button Scroll.
13) Scroll Button Mouse Over Background Option

This option lets you setup the background of scroll buttons on mouse over.

  • Image: Using this option, you can use image as your background.
  • Color: Using this option, you can use color as your background.
  • Both: Using this option, you can use both image and color as your background.
  • None: If you don't want to use any background, choose this option.

Note that this option only works if:

  • Scroll Type is set to Button Scroll.
14) Scroll Button Mouse Over Background Color

This option lets you set the background color of your scroll buttons on mouse over.

Note that this option only works if:

  • Scroll Type is set to Button Scroll.
  • Scroll Button Background Option is set to Color or Both.
15) Scroll Button Mouse Over Background Image

This option lets you upload/choose the image for the background of scroll buttons on mouse over.

Note that this option only works if:

  • Scroll Type is set to Button Scroll.
  • Scroll Button Background Option is set to Image or Both.
16) Scroll Button Mouse Over Background Image Repeat

This option lets you set the repetition behaviour of the background image for scroll buttons on mouse over.

  • Repeat-x: To repeat the image horizontally.
  • Repeat-y: To repeat the image vertically.
  • Both: To repeat the image both horizontally and vertically.
  • No-Repeat: To disable the repeat option and showing the single image.

Note that this option only works if:

  • Scroll Type is set to Button Scroll.
  • Scroll Button Background Option is set to Image or Both.
17) Scroll Button Mouse Over Background Image Position

This option lets you set the position of the background image both vertically and horizontally.

  • Arrow Left: To move the image to the left hand side.
  • Arrow Up: To move the image upwards.
  • Arrow Right: To move the image to the right hand side.
  • Arrow Down: To move the image downwards.
  • Reset: To reset the image position to the default settings.

Note that this option only works if:

  • Scroll Type is set to Button Scroll.
  • Scroll Button Background Option is set to Image or Both.
18) Scroll Button Arrow Color

This option lets you set the mouse over color of the arrows used in the scroll buttons.

Note that this option only works if:

  • Scroll Type is set to Button Scroll.

Empty Cart Settings

This section lets you set how you want your Empty Cart to behave. What Call 2 Actions you can use to improve conversions. For example you can set a text something like: Hey, I am starving :-( please hurry and fill me up! Or you can even put your store's amazing offers here with an Image and link it to the details page.

1) Show WooBag when Empty

This option lets you show/hide your WooBag Popup when the customer's cart is empty.

  • Yes: To show the WooBag Popup when empty.
  • No: To hide the WooBag Popup when empty.
2) Empty WooBag Height

This option lets you set the height of the Empty WooBag popup.

Note that this option doesn't work, if:

  • Show WooBag when Empty is set to yes.
3) Empty WooBag Content Vertical Position

This option lets you set the vertical position of the content (text/image) shown in Empty Cart.

Note that this option doesn't work, if:

  • Show WooBag when Empty is set to yes.
4) Empty WooBag Content Horizontal Position

This option lets you set the horizontal position of the content (text/image) shown in Empty Cart.

Note that this option doesn't work, if:

  • Show WooBag when Empty is set to yes.
5) Empty WooBag Background Option

This option lets you setup the background of Empty WooBag cart popup.

Following are the ways to set up the background:

  • Image: Using this option, you can use image as your background.
  • Color: Using this option, you can use color as your background.
  • Both: Using this option, you can use both image and color as your background.
  • None: If you don't want to use any background, choose this option.

Note that this option doesn't work, if:

  • Show WooBag when Empty is set to yes.
6) Empty WooBag Background Color

This option lets you set the background color of Empty WooBag cart popup.

Note that this option doesn't work, if:

  • Show WooBag when Empty is set to yes.
  • Empty WooBag Background Option is set to Color or Both.
7) Empty WooBag Background Image

This option lets you upload/choose the image for the background of Empty WooBag cart popup.

Note that this option doesn't work, if:

  • Show WooBag when Empty is set to yes.
  • Empty WooBag Background Option is set to Image or Both.
8) Empty WooBag Background Image Repeat

This option lets you set the repetition behaviour of the background image for Empty WooBag cart popup.

  • Repeat-x: To repeat the image horizontally.
  • Repeat-y: To repeat the image vertically.
  • Both: To repeat the image both horizontally and vertically.
  • No-Repeat: To disable the repeat option and showing the single image.

Note that this option doesn't work, if:

  • Show WooBag when Empty is set to yes.
  • Empty WooBag Background Option is set to Image or Both.
9) Empty WooBag Background Image Position

This option lets you set the position of the background image both vertically and horizontally.

  • Arrow Left: To move the image to the left hand side.
  • Arrow Up: To move the image upwards.
  • Arrow Right: To move the image to the right hand side.
  • Arrow Down: To move the image downwards.
  • Reset: To reset the image position to the default settings.

Note that this option doesn't work, if:

  • Show WooBag when Empty is set to yes.
  • Empty WooBag Background Option is set to Image or Both.
10) Empty WooBag Image

This option lets you set any of your custom images to show on the empty cart. This option opens amazing ideas to improve your store's conversion rate.

Note that this option doesn't work, if:

  • Show WooBag when Empty is set to yes.
11) Empty Woobag Image Link

This option lets you set link on your custom image to show on the empty cart. This option opens amazing ideas to improve your store's conversion rate.

Note that this option doesn't work, if:

  • Show WooBag when Empty is set to yes.
12) Empty Cart Text Message

This option lets you set the text of your choice to be shown beneath the image when the cart is empty.

Note that this option doesn't work, if:

  • Show WooBag when Empty is set to yes.
13) Empty Cart Text Message Color

This option lets you set the color of the custom text when the cart is empty.

Note that this option doesn't work, if:

  • Show WooBag when Empty is set to yes.
14) Empty Cart Text Message Font Size

This option lets you set the Font size of the custom text when the cart is empty.

Note that this option doesn't work, if:

  • Show WooBag when Empty is set to yes.
15) Empty Cart Text Message Font Family

This option lets you set the Font of the custom text when the cart is empty.

Note that this option doesn't work, if:

  • Show WooBag when Empty is set to yes.
16) Empty Cart Icon Color

This option lets you set the color of the icon when the cart is empty.

Note that this option doesn't work, if:

  • Show WooBag when Empty is set to yes.
17) Empty Cart Icon Text Color

This option lets you set the color of the icon text when the cart is empty.

Note that this option doesn't work, if:

  • Show WooBag when Empty is set to yes.
18) Empty Cart Icon Balloon Background

This option lets you set the background color of the icon balloon when the cart is empty.

Note that this option doesn't work, if:

  • Show WooBag when Empty is set to yes.
19) Empty Cart Icon Text Font

This option lets you set the font of the icon text when the cart is empty.

Note that this option doesn't work, if:

  • Show WooBag when Empty is set to yes.

Timer and Reservation Settings

This section lets you show the timer countdown for the items in cart of your customers and also you can set if you want your store items to get temporarily reserved once added into the cart by customers. This feature is amazing because it lets you create scarcity and urgency to help you improve the Conversions. Once the time is up, the items are removed from the reservation and user is not able to checkout unless they click on the re-add button.

1) Show Timer

This option lets you set the feature of timer countdown for the items in your WooBag Popup.

  • Yes: To Enable the timer countdown feature.
  • No: To Disable the timer countdown feature.
2) Enable Item Reserve Feature

This option lets you set the Item Reserve feature when the item is inside the cart of a customer until the timer countdown is over. This feature will temporarily deduct the item quantity from your inventory while the item is in the user's cart. When the time countdown will be over and item not purchased, the item quantity will automatically be rolled back to the inventory. This feature is not essential with the timer countdown feature, so, you can keep the timer feature enabled and keep this feature disabled.

Note that this option only works, if:

  • Yes: To Enable the timer countdown feature.
  • No: To Disable the timer countdown feature.
  • Show Timer is set to Yes.
3) Timer Countdown Message

This option lets you set the message before the countdown.

Note that this option only works, if:

  • Show Timer is set to Yes.
4) Timer Countdown Message Position

This option lets you set the horizontal position of the Time Countdown message.

Note that this option only works, if:

  • Show Timer is set to Yes.
5) Timer Countdown Message Color

This option lets you set the color of Timer Countdown Message.

Note that this option only works, if:

  • Show Timer is set to Yes.
6) Timer Countdown Message Font Size

This option lets you set the font size of Timer Countdown Message.

Note that this option only works, if:

  • Show Timer is set to Yes.
7) Timer Countdown Message Font

This option lets you set the font of Timer Countdown Message.

Note that this option only works, if:

  • Show Timer is set to Yes.
8) Time Countdown Color

This option lets you set the color of the Countdown numbers.

Note that this option only works, if:

  • Show Timer is set to Yes.
9) Time Countdown Font Size

This option lets you set the font size of the Countdown numbers.

Note that this option only works, if:

  • Show Timer is set to Yes.
10) Time Countdown Minutes

This option lets you set the total time (minutes) you want to set for the countdown.

Note that this option only works, if:

  • Show Timer is set to Yes.
11) Time Over Message

This option lets you set the message you want to show when the time is up.

Note that this option only works, if:

  • Show Timer is set to Yes.
12) Time Over Message Color

This option lets you set the Color of the Time Over Message.

Note that this option only works, if:

  • Show Timer is set to Yes.
13) Time Over Message Font Size

This option lets you set the font size of the Time Over Message.

Note that this option only works, if:

  • Show Timer is set to Yes.
14) Time Over Message Position

This option lets you set the horizontal position of the Time Over Message.

Note that this option only works, if:

  • Show Timer is set to Yes.
15) Time Over Message Font

This option lets you set the font of the Time Over Message.

Note that this option only works, if:

  • Show Timer is set to Yes.
16) Re-Add Button Text upon Time Over

The re-add button shows when the countdown is over. This option lets you set the custom text message to show in that button.

Note that this option only works, if:

  • Show Timer is set to Yes.
17) Re-Add Button Width

This option lets you set the width of the Re-Add Button.

Note that this option only works, if:

  • Show Timer is set to Yes.
18) Re-Add Button Height

This option lets you set the width of the Re-Add Button.

Note that this option only works, if:

  • Show Timer is set to Yes.
19) Re-Add Button Position

This option lets you set the horizontal position of the Re-Add Button.

Note that this option only works, if:

  • Show Timer is set to Yes.
20) Re-Add Button Text Color

This option lets you set the color of the Re-add button.

Note that this option only works, if:

  • Show Timer is set to Yes.
21) Re-Add Button Text Font

This option lets you set the font of the Re-add button.

Note that this option only works, if:

  • Show Timer is set to Yes.
22) Re-Add Button Text Font Size

This option lets you set the font size of the Re-add button.

Note that this option only works, if:

  • Show Timer is set to Yes.
23) Re-Add Button Background Option

This option lets you setup the background of Re-add button.

Following are the ways to set up the background:

  • Image: Using this option, you can use image as your background.
  • Color: Using this option, you can use color as your background.
  • Both: Using this option, you can use both image and color as your background.
  • None: If you don't want to use any background, choose this option.

Note that this option only works, if:

  • Show Timer is set to Yes.
24) Re-Add Button Background Color

This option lets you set the background color of Re-add button.

Note that this option only works, if:

  • Show Timer is set to Yes.
  • Re-add button Background Option is set to Color or Both.
25) Re-Add Button Background Image

This option lets you upload/choose the image for the background of Re-add button.

Note that this option only works, if:

  • Show Timer is set to Yes.
  • Re-add button Background Option is set to Image or Both.
26) Re-Add Button Background Image Repeat

This option lets you set the repetition behaviour of the background image for Re-add button.

  • Repeat-x: To repeat the image horizontally.
  • Repeat-y: To repeat the image vertically.
  • Both: To repeat the image both horizontally and vertically.
  • No-Repeat: To disable the repeat option and showing the single image.

Note that this option only works, if:

  • Show Timer is set to Yes.
  • Re-add button Background Option is set to Image or Both.
27) Re-Add Button Background Image Position

This option lets you set the position of the background image both vertically and horizontally.

  • Arrow Left: To move the image to the left hand side.
  • Arrow Up: To move the image upwards.
  • Arrow Right: To move the image to the right hand side.
  • Arrow Down: To move the image downwards.
  • Reset: To reset the image position to the default settings.

Note that this option only works, if:

  • Show Timer is set to Yes.
  • Re-add button Background Option is set to Image or Both.
28) Re-Add Button Text Border Size

This option lets you set the border size of the Re-add button.

Note that this option only works, if:

  • Show Timer is set to Yes.
29) Re-Add Button Text Border Color

This option lets you set the border color of the Re-add button.

Note that this option only works, if:

  • Show Timer is set to Yes.
30) Re-Add Button Border Style

This option lets you set the border style of the Re-add button.

Note that this option only works, if:

  • Show Timer is set to Yes.
31) Re-Add Button Border Radius

This option lets you set the radius of the border of Re-Add Button.

Note that this option only works, if:

  • Show Timer is set to Yes.
32) Re-Add Button Mouse Over Border Color

This option lets you set the color of the border of Re-Add Button on mouse over.

Note that this option only works, if:

  • Show Timer is set to Yes.
33) Re-Add Button Mouse Over Background Option

This option lets you setup the background of Re-add button on Mouse Over.

Following are the ways to set up the background:

  • Image: Using this option, you can use image as your background.
  • Color: Using this option, you can use color as your background.
  • Both: Using this option, you can use both image and color as your background.
  • None: If you don't want to use any background, choose this option.

Note that this option only works, if:

  • Show Timer is set to Yes.
34) Re-Add Button Mouse Over Background Color

This option lets you set the background color of Re-add button on mouse over.

Note that this option only works, if:

  • Show Timer is set to Yes.
  • Re-add button Mouse Over Background Option is set to Color or Both.
35) Re-Add Button Mouse Over Background Image

This option lets you upload/choose the image for the background of Re-add button on mouse over.

Note that this option only works, if:

  • Show Timer is set to Yes.
  • Re-add button Mouse Over Background Option is set to Image or Both.
36) Re-Add Button Mouse Over Background Image Repeat

This option lets you set the repetition behaviour of the background image for Re-add button on mouse over.

  • Repeat-x: To repeat the image horizontally.
  • Repeat-y: To repeat the image vertically.
  • Both: To repeat the image both horizontally and vertically.
  • No-Repeat: To disable the repeat option and showing the single image.

Note that this option only works, if:

  • Show Timer is set to Yes.
  • Re-add button Mouse Over Background Option is set to Image or Both.
37) Re-Add Button Background Image Position

This option lets you set the position of the background image both vertically and horizontally on mouse over.

  • Arrow Left: To move the image to the left hand side.
  • Arrow Up: To move the image upwards.
  • Arrow Right: To move the image to the right hand side.
  • Arrow Down: To move the image downwards.
  • Reset: To reset the image position to the default settings.

Note that this option only works, if:

  • Show Timer is set to Yes.
  • Re-add button Mouse Over Background Option is set to Image or Both.
38) Re-Add Button Mouse Over Text Color

This option lets you set the color of the text of Re-Add Button on mouse over.

Note that this option only works, if:

  • Show Timer is set to Yes.

Small Screen Settings

This feature lets you control your cart display on small screens size i.e. Mobiles and Tablets.

1) Show only WooBag Icon on Small Screens

This option lets you set how you want to display the icon on small screens.

  • Yes: To show only the icon in small screens.
  • No: To show the full popup in small screens.
2) Link WooBag Icon to

This option lets you set the URL to which you want to link your cart icon.

Note that this option only works if:

  • Show only WooBag Icon on Small Screens is set to Yes.
Custom CSS
  • This section is for advanced users. A good understanding of CSS (Cascading Style Sheet) is the pre-requisite of this feature. This section lets you set your own custom styling which over-writes the current styling.
  • You just have to write in your custom CSS and it will be overwritten by the current one thus your own styling will be used for the WooBag.
  • Click here to see the WooBag's CSS which is fully commented to help the advanced users easily understand it and make the modifications their choice.

 

CSS Files

  • admin/css/woo-bag-admin.css
  • admin/css/colpick.css
  • public/css/woo-bag-public.css
  • public/css/woo-bag-public-shortcode.css
  • public/css/bootstrap.css
  • public/css/font-awesome.min.css
  • public/css/jquery.mCustomScrollbar.min.css
Note: These are WooBag Core File. Do not change.

Javascript Files

  • admin/js/woo-bag-admin.js
  • admin/js/woo-bag-admin-show.js
  • admin/js/color.js
  • admin/js/colpick.js
  • admin/js/html2canvas.min.js
  • admin/js/style.js
  • public/js/woo-bag-public.js
  • public/js/woo-bag-public-functions.js
  • public/js/bootbox.js
  • public/js/bootstrap.min.js
  • public/js/jquery.confirm.min.js
  • public/js/jquery.cookie.js
  • public/js/jquery.mCustomScrollbar.concat.min.js
  • public/js/bootbox.js
Note: These are WooBag Core File. Do not change.                                                             

 

We recommend you to first find your solution within this document as this document is very detailed and it is very likely you will find the solution here.

If you are unable find a solution within this document, we are always there to help! Please be polite when requesting support and we will respond as soon as possible. We will do the best to answer your questions. We will always provide fixes for any bugs that crop up as soon as possible.

When requesting support, please indicate what you've already tried and provide a link to your site so we may see the issue firsthand. It's really the only way to efficiently diagnose a problem. Thanks!

If you can't find answer in this guide, Click Here to send inquiry via contact form on our CodeCanyon’s profile page.                                                         

 

Libraries and Scripts

Note: These are WooBag Core File. Do not change.
Top