LaunchFlows Product Toggles for WooCommerce

Last Updated:

The LaunchFlows Product Toggles plugin enhances your WooCommerce store by allowing customers to add or remove products directly from any page using dynamic buttons, links, or checkboxes. This seamless experience keeps customers on the same page, improving user interaction and satisfaction.

Features

  • Dynamic Add/Remove Controls: The interface adapts based on the product’s cart status, displaying “Add to Cart” or “Remove from Cart” accordingly.
  • Multiple Display Styles: Choose from button, link, or checkbox styles to match your site’s design.
  • Hide Labels: Optionally hide labels for links, buttons, or checkboxes.
  • Compatibility: Supports both simple and variable products.
  • Customizable Labels: Define custom text for add and remove states.
  • Developer-Friendly: Easily extend functionality with unique CSS classes and custom styles.

Benefits

  • Enhanced User Experience: Customers can manage their cart without navigating away from the current page.
  • Flexible Placement: Insert toggle controls anywhere on your site using the shortcode.
  • Consistent Design: Customize the appearance to align with your site’s branding.

Usage

To implement the cart toggle functionality, use the [lf_cart_toggle] shortcode with the following attributes:

  • id (required): The product ID or variation ID to toggle.
  • style (optional): Display style—"button" (default), "link", or "checkbox".
  • add_label (optional): Text for the “Add to Cart” state.
  • remove_label (optional): Text for the “Remove from Cart” state.
  • hide_label (optional): "yes" to hide labels or "no" (default) to display labels.

Examples

1. Default Button Style

Displays a button that toggles the product in the cart.

[lf_cart_toggle id="123"]

2. Custom Labels

Displays a button with custom labels for adding and removing the product.

[lf_cart_toggle id="123" add_label="Add Me" remove_label="Remove Me"]

3. Link Style

Outputs a text link that toggles the product in the cart.

[lf_cart_toggle id="123" style="link"]

4. Link Without Label

Outputs a plain link without any label.

[lf_cart_toggle id="123" style="link" hide_label="yes"]

5. Checkbox Style

Displays a checkbox that dynamically toggles the product in the cart.

[lf_cart_toggle id="123" style="checkbox" add_label="Check to Add" remove_label="Uncheck to Remove"]

6. Checkbox Without Label

Outputs a plain checkbox without any label.

[lf_cart_toggle id="123" style="checkbox" hide_label="yes"]

Styling

Each control includes specific CSS classes for customization:

  • .lf-toggle-button-add: Applied when the product is not in the cart.
  • .lf-toggle-button-remove: Applied when the product is in the cart.
  • .lf-product-[product_id]: Unique identifier for each product instance.

Customization Example

To change the background color of the add and remove buttons, you can use the following CSS:

.lf-toggle-button-add {
    background-color: #008cba;
    color: #fff;
}

.lf-toggle-button-remove {
    background-color: #e74c3c;
    color: #fff;
}