Product Cart Button

Design Controls

Size

Customize the overall size dimensions of the element. Define whether the width spans the entire container or has a specific dimension.

• Width – Adjust the width of the element.
• Button Fills Container – Toggle this to make the button stretch across its entire container.

Button

Modify the appearance, size, and effects of the button. Tweak everything from its background to how it behaves on hover.

• Size
  • Size – Choose from a dropdown of predefined sizes for the button.
  • Padding – Adjust the inner spacing of the button. Note: This control is only available when the size is set to “custom”.
  • Override Width – Manually set a specific width for the button.
  • Full Width At – Decide the screen size breakpoint at which the button should become full width.
• Background – Select the button’s background color.
• Outline – Toggle the button’s outline on or off.
  • Color – Adjust the color of the button’s outline. Note: This control is only available when the outline is active.
  • Width – Modify the thickness of the button’s outline. Note: This control is only available when the outline is active.
  • No Fill On Hover – Choose if the button should remain transparent when hovered over. Note: This control is only available when the outline is active.
• Typography – Tweak the font settings for the button’s text.
• Corners – Select the shape of the button’s corners.
  • Corner Radius – Specify the roundness of the button’s corners. Note: This control is only available when the corners are set to “custom”.
• Effects
  • Transition Duration – Determine how long the button’s transition effects take.
  • Scale On Hover – Define how much the button enlarges when hovered over.
  • Shadow – Add or adjust the button’s shadow effect.
• Icon
  • Icon – Choose an icon to display on the button.
  • Position – Set the icon’s placement relative to the button’s text.
  • Size – Adjust the icon’s size.
  • Color – Choose the color of the icon.
  • Space Before – Determine the spacing before the icon.
  • Space After – Determine the spacing after the icon.
  • Hover Transform – Define the icon’s behavior (like rotation) when the button is hovered over.

Notices

Customize the appearance and style of notifications, like “Out of Stock” and “Backorder” alerts. Adjust backgrounds, borders, typography, and more.

Typography

In this section, users can customize the fonts and styles of various textual elements associated with the Product Cart Button. This ensures the typography aligns with the website’s overall aesthetic.

• Variable – Adjust typographic styles for variable products. Within this, you can further customize:
  • Description – Fine-tune the font and style for product descriptions.
  • Stock Quantity – Customize how the stock quantity information is displayed.
• Grouped Product Title – Set the typographic styles for the titles of grouped products.
• Price – Customize the appearance of the product’s price.
• Old Price – Alter the typography for discounted or previously listed prices.

Spacing

This section allows you to adjust the spacing between various elements. Proper spacing can improve readability and aesthetic appeal, ensuring a smooth user experience.

• Container – Adjust the space around the main container of the product details. This includes:
  • Margin Top – Space above the container.
  • Margin Bottom – Space below the container.
• Grouped – Modify spacing for grouped products. This includes:
  • Vertical Spacing – Distance between individual grouped products.
  • Quantity Width – Width allocated for displaying the quantity of products.
• Variable – Adjust spacing related to variable products. This includes:
  • After Label – Space after the product label.
  • After Dropdown – Space after dropdown menus.
  • After Stock Qty – Space following the stock quantity information.
• After Notice – Spacing after any special notices or announcements.
• Before Button – Space before the cart button to prevent clutter.

Advanced

This section contains specialized controls for advanced users, allowing for more intricate customizations of the Product Cart Button and related elements.

• Variation Reset – Options to reset product variations. Within this section, you can further customize:
  • Icon – Choose an icon to represent the reset function.
  • Size – Define the size of the reset icon.
  • Color – Choose a color for the icon to ensure it stands out or blends in as desired.
  • Background – Set a background color for the reset icon for contrast or branding.
• Table Separator – Choose a color for the table separator lines, enhancing visibility and design. (Note: This control is available unless the “Hide Table Separator” toggle is activated.)
• Hide Table Separator – A toggle option to hide table separator lines for a cleaner look.