Black Friday Sale

Upto 40% OFF

Discount Auto Applied

Woo Add to Cart

Using Bricks Ultra – Woo Add to Cart element, you can display the Add to Cart button on any page of your website. It allows users to add products to the cart in just one click. This element provides a complete customization option to design your Add to Cart button.

There’s also a “View Cart” button; you can control how it looks and what’s shown. You can even see how your “View Cart” button will look while designing it using the Preview View Cart option, which will work in editor mode only to ensure it fits your style.

Now, let’s talk about stock details. You’ve got three options: Custom, Default, and None. Default grabs the stock info from your WooCommerce products settings. If you choose Custom, you can provide your stock values right here. You can even use shortcodes to display stock quantity and customize your stock details.

This element will help you to design landing pages, pop-up boxes, and sidebars where you want to customize the product’s default layout.

The Woo Add to Cart element features the following controls:

Content

Note: The Woo Add To Cart element will only work for Simple Products.

  • Select Product: Select your WooCommerce simple product to add to the cart.
  • Button Text: Enter the text for the button.
  • After Add to Cart Action: Choose the appropriate available option you want, and clicking the “Add to Cart” button will take you there.
  • Preview View Cart: Enable the option to preview the View Cart button style(work in editor mode only).
  • View Cart Text: Enter the text for the View Cart button.
  • Hide Quantity Field: Enable the option to hide the quantity field.
  • Hide Fields: Activate the feature to hide fields such as the Quantity field and the Add to Cart button upon clicking the “Add to Cart” button.
Woo Add to Cart: Content Settings
Woo Add to Cart: Content Settings

Stock

Note: If you opt for the “Default” option, the value will be fetched from your WooCommerce product settings. With the “Custom” option, you can input your own stock value. If you wish to show a dynamic value, you can use the “{{qty}}” shortcode.

  • Stock Status: Select from Custom, Default, or None.
    • Custom

In Stock Message

  • In Stock: Enter your personalized In stock message or use a shortcode to display dynamic value.
  • In Stock Icon: Choose the icon from the icon library.
  • Icon Position: Select the position of the icon.
Woo Add to Cart: Stock Settings
Woo Add to Cart: Stock Settings

Out of Stock Message

  • Out of Stock: Enter your personalized Out of stock message.
  • Out of Stock icon: Choose the icon from the icon library.
  • Icon Position: Select the position of the icon.
Woo Add to Cart: Stock Settings
Woo Add to Cart: Stock Settings

Add to Cart Button Style

Before Action Icon

  • Icon: Choose the icon you want to appear before clicking the Add to Cart button.
  • Icon Position: Select the position of icon.
  • Icon Color: Select the color of icon.
  • Icon Size: Set the icon size.
  • Gap: Specify the gap between button text and an icon.
Woo Add to Cart: Before Action Icon Settings
Woo Add to Cart: Before Action Icon Settings

After Action Icon

  • Icon: Choose the icon you want to appear after clicking the Add to Cart button.
  • Icon Position: Select the icon position.
  • Icon Color: Select the icon color.
  • Icon Size: Set the size of icon.
  • Gap: Specify the gap between button text and an icon.
Woo Add to Cart: After Action Icon Settings
Woo Add to Cart: After Action Icon Settings

Button Style

  • Typography: Set the typography of button.
  • Background: Set the background of button.
  • Border: Select the border type.
  • Box Shadow: Set the box shadow properties.
  • Position: Select from vertical, horizontal, or reverse.
  • Alignment: Choose the alignment of button.
  • Padding: Set the padding.
  • Margin: Set the margin.
Woo Add to Cart: Button Style Settings
Woo Add to Cart: Button Style Settings

View Cart Button Style

  • Icon: Select the view cart icon from available icon libraries.
Woo Add to Cart: View Cart Button Icon Settings
Woo Add to Cart: View Cart Button Icon Settings

Button Style

  • Typography: Set the typography.
  • Background: Set the background of button.
  • Border: Select the border type.
  • Box Shadow: Set the box shadow properties.
  • Padding: Set the padding.
  • Margin: Set the margin.
Woo Add to Cart: VIew Cart Button Style Settings
Woo Add to Cart: VIew Cart Button Style Settings

Quantity Style

Note: This option is applicable when the “Hide Quantity Field” option is disabled.

  • Typography: Set the typography.
  • Background: Set the background of quantity style box.
  • Border: Select the border type.
  • Box Shadow: Set the box shadow properties.
  • Margin: Set the margin.
  • Height: Enter the height for quantity style box.
  • Width: Enter the width for quantity style box.
Woo Add to Cart: Quantity Style Settings
Woo Add to Cart: Quantity Style Settings

Stock Style

  • Direction: Select the direction of stock value.
  • Alignment: Choose from Start, Center, or End.
  • Border: Select the border type.
  • Padding: Set the padding.
  • Margin: Set the margin.
  • Width: Enter the width of Stock box.
Woo Add to Cart: Stock Style Settings
Woo Add to Cart: Stock Style Settings

In Stock

  • Icon Color: Select the color of In stock icon.
  • Icon Size: Set the icon size.
  • Gap: Specify the gap between icon and value.
  • Typography: Set the typography.
  • Background: Select the background of In stock box.
Woo Add to Cart: Stock Style Settings(In Stock)
Woo Add to Cart: Stock Style Settings(In Stock)

Out of Stock

  • Icon Color: Select the color of Out of Stock icon.
  • Icon Size: Set the icon size.
  • Gap: Specify the gap between icon and value.
  • Typography: Set the typography.
  • Background: Select the background of Out of Stock box.
Woo Add to Cart: Stock Style Settings(Out of Stock)
Woo Add to Cart: Stock Style Settings(Out of Stock)

Explore our detailed article on “Creating Your Own ‘Add to Cart’ Button in WooCommerce with the Woo Add to Cart Element.”