Developer Docs
Sticky Add to Cart for Woo
Sticky Add to Cart for Woo Documentation
Sticky Add to Cart for Woo aims to increase sales and lower buyer frustration by creating a sticky add to cart area on the product pages. As your shoppers scroll down the page the add to cart will remain visible at all times, allowing for a fast and simple click/tap to continue the shopping process
Settings page
The following steps outline the settings page
The top of the settings page contains 3 switches. Enable, Enable Desktop and Enable Mobile. The top Enable must be turned on to enable sitewide on all device types. Once the top switch is enabled you can turn on and off the device type as you wish. For example, you can enable the bar only on mobile, only on desktop or both. If both mobile and desktop are disabled it will have the same affect as the top enable switch and the bar will not display at all.
The next section contains the hide/show section for the assets. You’ll notice that this section contains 2 rows for each item with a third option for price font size and title font size.
As you can probably imagine, a mobile device has a lot less area to display content, so you are given the choice to enable or disable assets for device type. The breakpoint is set at 768px.
Desktop top and bottom bars are enabled as follows
Mobile top and bottom have the following layout
Both desktop and mobile have the same layout for the side slide in cart but have a smaller width.
If you find that the text is too large using the default font size settings you can adjust the font size down to better fit mobile devices, so in essence you can have a price font size of 40px for desktop and 20px for mobiles. This helps you get a better looking display on mobile devices
Below the enable/disable assets section you’ll find the display section. This covers things such as the colours used and position of the sticky add to cart.
Background color: This is the background color of the sticky area. The background of the mini cart and mini cart item table will have this color set.
Border color: This is the border color. It will also be set around the mini cart and mini cart table
Image border radius: You can set the amount of curve for the featured image here. On a desktop the image is set to 80px X 80px and mobile is set to 40px X 40px. If you want a square image set this to 0 or leave blank. If you want a circle set it to a large number and the image will be perfectly round. Want only a small rounded corner? Try 5px, 10px or 20px.
Review stars color: Set the color f the review stars.
Add to cart padding: Due to the way that we had to create the plugin you will need to set padding for the add to cart button. We have this laid out in a table for a better visual understanding of what’s going on. A nice padding to have is 10px top and bottom and 20px left and right. The top and bottom padding will be duplicated for the input quantity box to maintain visual quality.
Add to cart top and bottom gradient: Your add to cart button can contain 2 colors as a gradient. If you want a solid color only all you need to do is enter the same color twice for top and bottom. If you want a different color when hovering the button you can set the colors for on hover.
Add to cart font color: Set the text color for the add to cart button here. It is strongly recommended to pick a color that strongly contrasts the background color.
Title font size: Set the product title text size for the sticky add to cart.
Title font color: Set the color of the product title for the sticky add to cart.
Title line height: If your titles go to multiple lines and they are overlapping other content you can adjust the line height here for a better layout to help fix this problem if it occurs.
Price font size: Set the size of the price text here.
Price color: Set the color of the price text here.
Regular price strike through color: Set the strike trhough text color here. This is the original price for on sale items
Sticky position: This plugin comes with 3 possible positions.
- Top
- Bottom
- Side (slide in/out
The position of the sticky add to cart behaves differently depending on the position. For the side slide in the cart will have a delay before it’s visible to give readers the chance to read the short description. Each position comes with a toggle arrow to hide and reveal the sticky add to cart.
Sticky bar height: You can set the height for the sticky bar here (top and bottom only). You can go from 80px up to 300px. If you wish to have all content visible on a mobile device it’s recommended to have a minimum height of 120px.
The final option is the action that takes place when the add to cart button is clicked. You have the option to create several redirects.
1. Same page: This will simply reload the same page after the product is added to the cart which is the default setting for most stores.
2. Homepage: You can send your buyers to your homepage after they have added a product to the cart. This can be great if you have a specific single product website.
3. Cart Page: Redirect your shoppers to the cart page following the add to cart being clicked. This can help speed up the purchase process.
4. Checkout Page: Bypass the cart page for an even faster checkout process
5. Custom page: This option allows you to redirect users to a custom page as defined by you. You can use this option for upselling or addon products to help increase your caert size. To use this feature all you need to do is enter the page ID. Not sure where to find the page ID? Read this guide and you’ll be surprised how easy it is.
Request a Feature or Open a Ticket
Have some ideas for this plugin? Please contact us and let us know your thoughts
Ready To Get Started?
Save a bundle by buying our plugin bundle. All plugins for only $99/year