10Web Help Center

Hi, how can we help?

Custom Add to Cart Widget

Copy article URL

in this article

The Custom Add to Cart widget allows you to add a customizable "Add to Cart" button anywhere on your site. This button can be linked to any specific product, providing flexibility and improving user experience by making it easier for customers to add products to their cart.

Adding Custom Add to Cart widget

  1. Place the Custom Add to Cart widget onto the canvas.
  2. Navigate to the Style tab and Advanced tab to customize the widget.

Content tab

Product

  • Product: Select the product to be added to the cart.
  • Show Quantity: Set to Yes to allow the user to change the quantity.
  • Quantity: If Show Quantity is set to No, this option becomes available to pre-determine the number of items to add to the cart.

Button

  • Type: Select the button type (Default, Info, Success, Warning, Danger).
  • Text: Enter the text to display on the button (you can Generate the text with 10Web AI Assistant)
  • Size: Select the button size (Extra Small to Extra Large).
  • Icon: Choose a Font Awesome icon to display on the button.
  • Icon Position: Choose to display the icon before or after the button text.
  • Icon Spacing: Set the space between the icon and the button text.
  • Button ID: (Optional) Assign a unique button ID for tracking, such as with Google Analytics events.

Layout

  • Choose the desired layout from the dropdown selector (Inline, Stacked, Auto). Adjust responsive control options by breakpoint by ticking on the breakpoint icon.

Style tab

Button

  • Position: Choose the position to display the button on the Left, Center, Right, or Stretched position,
  • Typography: Change typography options for the button.
  • Text shadow: Style the color and position of text shadow.
  • Text Color: Choose the button text color.
  • Background Type: Choose to have a Gradient or standard color.
  • Color: Choose the button background color.

Note:

Transaction Duration and Hover Animation effects are available under Hover option.

  • Transaction Duration: Control how long it takes for that animation to complete.
  • Hover Animation: Select an animation effect when hovering over the icon (e.g., Grow, Pulse, Skew).
  • Border Type: Select the border type (none, solid, double, dotted, dashed, grooved).
  • Border Radius: Control the button’s border roundness. For details, see Border Type and Radius.
  • Box Shadow: Adjust box shadow options.
  • Padding: Set the padding within the button.

Troubleshooting

Ensure the Enable AJAX add to basket buttons on the archives option is enabled in WooCommerce Settings > Products for this feature to function correctly.

Advanced tab

You can customize the widget further using the settings available in the Advanced tab. These options provide additional styling and functionality adjustments, allowing you to tailor the widget to better fit your design needs.

in this article