fbpx

Products

Woocommerce Breadcrumbs

Control the colors and layout for WooCommerce Breadcrumbs

Style

  • Text Color: Choose the color of the Breadcrumbs text
  • Link Color: Choose the color of the Breadcrumbs link text
  • Typography: Set the typography options for the Breadcrumbs text
  • Alignment: Align the breadcrumbs to the left, right, or center

Note: The style of this widget is often affected by your theme and plugins. If you experience any such issue, try to switch to a basic theme and deactivate related plugins, or adjust the styling within your theme’s settings.

Custom Add To Cart

Add an Add to Cart button to a specific product anywhere on your site by dragging the Custom Add to Cart widget wherever you need it.

Product

  1. Product: Select the product to be added to the cart
  2. Show Quantity: Set to Yes to allow the user to change the quantity
  3. Quantity: If Show Quantity is set to No, this option becomes available so that you can predetermine the number of items to add to the cart

Button

  1. Type: Select the type of button to use, choosing from Default, Info, Success, Warning, and Danger
  2. Text: Enter the text to be displayed on the button
  3. Alignment: Align the [widget] to the left, right, center, or justified
  4. Size: Select the preset button sizes, from Extra Small to Extra Large
  5. Icon: Select a Font Awesome icon to display on the button
  6. Icon Position: Choose to display the Icon Before or After the button text
  7. Icon Spacing: Set the amount of space between the Icon and the button text
  8. Button ID: (Optional) Assign a unique button ID to use for situations such as Google Analytic’s events

Style

Button

  1. Typography: Set the typography options for the button text

Normal | Hover

The following options can be set independently for both the normal and hover states.

  1. Text Color: Choose the color of the button text
  2. Background Color: Choose the background color of the button
  3. Hover Animation: Choose an animation effect when hovering over the icon, such as Grow, Pulse, Skew, etc.
  • Border Type: Select the type of border, choosing from none, solid, double, dotted, dashed, or grooved
  • Border Radius: Control border roundness of the button
  • Box Shadow: Adjust box shadow options
  • Padding: Set the padding within the button

Woocommerce Pages

Display a WooCommerce Page (Cart Page, Single Product Page, Checkout Page, Order Tracking Form, or My Account Page) anywhere on your site.

Element

  1. Page: Select a WooCommerce page to display, choosing from Cart Page, Single Product Page, Checkout Page, Order Tracking Form, or My Account Page. If “Single Product Page” is selected, an additional field becomes available to allow you to search and select a particular page to display.

Product Categories

Display a grid of WooCommerce Product Categories anywhere on your site.

Layout

  1. Columns: Set the exact number of columns to display, from 1 to 12
  2. Categories Count: Select the number of categories to display

Query

  1. Source: Select the source from which to display categories, choosing from All, Manual Selection, By Parent, or Current Subcategories. If Manual Selection is chosen, manually select which categories to display. If “By Parent” is chosen, select from Only Top Level, or select an individual category from the dropdown list.
  2. Hide Empty: Set to Yes to categories with no products within them
  3. Order By: Set the order in which the categories will be displayed. Options include Name, Slug, Description, or Count
  4. Order: Select to display categories in ASC or DESC (Ascending or Descending) order

Style

  1. Columns Gap: Set the exact gap between the columns
  2. Rows Gap: Set the exact gap between the rows
  3. Alignment: Align the products data to the left, right, or center

Image

  1. Border Type: Select the type of border, choosing from none, solid, double, dotted, dashed, or grooved
  2. Border Radius: Set the radius to control corner roundness of the border
  3. Spacing: Adjust the amount of space between the images and their data

Title

  1. Color: Choose the Title color
  2. Typography: Set the typography options for the Title text

Count

  1. Color: Choose the color for the Count
  2. Typography: Set typography options for the Count

Menu Cart

The Menu Cart widget enables you to place a WooCommerce cart icon in your menu or anywhere on your page. 

Content

Menu Icon

  1. Icon: Select the icon to show, choosing from Cart, Basket, or Bag, in Light, Medium or Solid designs.
  2. Items Indicator: Select the type of indicator to use for number of items in the cart, choosing from None, Bubble, or Plain
  3. Hide Empty: Slide to YES to hide items indicator if cart is empty
  4. Subtotal: Show or Hide the cart’s current subtotal
  5. Alignment: Align the menu cart to the left, right, or center

Style

Menu Icon

Normal | Hover

  1. Text Color: Choose the color of the subtotal text
  2. Icon Color: Choose the color of the cart icon
  3. Background Color: Choose the background color of the widget container
  4. Border Color: Choose the border color of the widget container
  5. Border Width: Control the thickness of the border around the widget container
  6. Border Radius: Set the border radius to control corner roundness
  7. Typography: Change the typography options for the subtotal text

Icon

  1. Size: Adjust the size of the cart icon
  2. Spacing: Adjust the amount of space between the cart icon and the subtotal text
  3. Padding: Change the padding settings of the widget container

Items Indicator

  1. Text Color: Choose the color of the number of items in the items indicator
  2. Background Color: Choose the background color of items indicator
  3. Distance: Set the distance between the icons indicator and the subtotal text

Cart

  1. Divider: Show or Hide the divider line after each item in the cart overlay
  2. Remove Item Icon: Show or Hide the icon that allows users to remove an item from the cart

Subtotal

  1. Color: Choose the color of the subtotal text in the cart overlay
  2. Typography: Change the typography options for the subtotal text in the cart overlay

Products

Product Title

  1. Color: Choose the color of the product title in the cart overlay
  2. Typography: Change the typography options for the product title in the cart overlay

Product Price

  1. Color: Choose the color of the product price in the cart overlay
  2. Typography: Change the typography options for the product price in the cart overlay

Divider

  1. Style: Select the style of the divider above and below the subtotal in the cart overlay, choosing from none, solid, double, dotted, dashed, or grooved
  2. Color: Choose the color of the subtotal divider in the cart overlay
  3. Weight: Set the thickness of the subtotal divider
  4. Spacing: Set the spacing between subtotal dividers and the subtotal text

Buttons

  1. Layout: Choose the layout of the buttons in the cart overlay, either Inline or Stacked.
  2. Space Between: Set the amount of space between the cart overlay buttons

View Cart

  1. Text Color: Choose the color of the Show Cart button text in the cart overlay
  2. Background Color: Choose the background color of the Show Cart button in the cart overlay
  3. Border Color: Choose the border color of the Show Cart button in the cart overlay
  4. Border Width: Control the thickness of the border around the Show Cart button in the cart overlay

Checkout

  1. Text Color: Choose the color of the Checkout button text in the cart overlay
  2. Background Color: Choose the background color of the Checkout button in the cart overlay
  3. Border Color: Choose the border color of the Checkout button in the cart overlay
  4. Border Width: Control the thickness of the border around the Checkout button text in the cart overlay
  5. Typography: Change the typography options for both buttons in the cart overlay
  6. Border Radius: Set the border radius for both buttons in the cart overlay

Mini Cart

To avoid conflicts with WooCommerce plugins or themes that may utilize their own Mini Cart templates, Elementor gives you the option to enable or disable Elementor’s version of the Mini Cart template. If WooCommerce is activated, follow these steps to enable or disable Elementor’s Mini Cart template.

  1. Go to Elementor > Settings > Integrations > WooCommerce
  2. Choose Enable for this option in order to replace the default WooCommerce mini cart template or your theme’s mini cart template with Elementor’s template. Unless manually set to Disable, this setting is automatically enabled once the Menu Cart widget is used anywhere on your site.
  3. Choose Disable to opt out of using Elementor’s Mini Cart template.

Copyright @ 2020 |  | Koperasi Al-Najah (K.L) Berhad

Chinese (Simplified) Chinese (Simplified) English English Malay Malay