Component reference
Every building block.
100 production components, grouped by the job they do. Search by name, behavior, or Woo concept.
woo-product-priceFreeProduct PriceShow WooCommerce pricing and sale states.woo-stock-indicatorFreeStock IndicatorShow availability and stock urgency.woo-add-to-cartFreeAdd To CartAdd the current product to the cart.woo-quantity-selectorFreeQuantity SelectorLet shoppers choose a cart quantity.woo-variant-pickerFreeVariant PickerSelect product options and variations.woo-cart-checkout-buttonFreeCart Checkout ButtonTake the shopper from cart to checkout.woo-cart-pageFreeCart PageRender a full cart page experience.woo-product-galleryLaunchProduct GalleryRender the main product image gallery.woo-product-ratingLaunchProduct RatingDisplay average rating and star summaries.woo-product-category-countLaunchProduct Category CountShow a category name with its live synced product count.woo-product-shareLaunchProduct ShareShare the current product across social channels.woo-sale-badgeLaunchSale BadgeHighlight discounted products with a badge.woo-product-review-authorLaunchProduct Review AuthorRender the author name for a review item.woo-product-review-contentLaunchProduct Review ContentRender the body content for a review item.woo-product-review-dateLaunchProduct Review DateShow the publish date for a review item.woo-product-review-formLaunchProduct Review FormCollect new customer reviews from the storefront.woo-product-review-ratingLaunchProduct Review RatingRender the star rating for a review item.woo-product-review-repliesLaunchProduct Review RepliesShow nested replies for a product review.woo-product-reviews-countLaunchProduct Reviews CountDisplay the total review count for a product.woo-product-reviews-listLaunchProduct Reviews ListRender the review feed for the current product.woo-quick-addLaunchQuick AddSupport quick add-to-cart actions from listings.woo-clear-cartLaunchClear CartRemove all items from the current cart.woo-coupon-inputLaunchCoupon InputApply coupon codes to the active cart.woo-cart-badgeLaunchCart BadgeShow a live badge count for the cart.woo-cart-countLaunchCart CountRender the cart item count as text.woo-promo-barLaunchPromo BarShow cart-linked promo or shipping progress.woo-cart-item-imageLaunchCart Item ImageRender the image for a cart line item.woo-cart-item-priceLaunchCart Item PriceRender the price for a cart line item.woo-cart-item-quantityLaunchCart Item QuantityRender quantity controls for a cart line item.woo-cart-item-removeLaunchCart Item RemoveRemove a single item from the cart.woo-cart-item-titleLaunchCart Item TitleRender the title for a cart line item.woo-cart-item-variationLaunchCart Item VariationShow selected variation details for a cart item.woo-cart-drawerLaunchCart DrawerRender the slide-out cart drawer layout.woo-cart-listLaunchCart ListRender the list of items in the cart.woo-cart-totalLaunchCart TotalDisplay cart total values.woo-order-summary-cartLaunchOrder SummaryRender summary totals for the active cart.woo-address-bookScaleAddress BookManage saved customer billing and shipping addresses.woo-billing-addressScaleBilling AddressRender the customer billing address details.woo-edit-addressScaleEdit AddressEdit a customer address from the account area.woo-shipping-addressScaleShipping AddressRender the customer shipping address details.woo-customer-order-dateScaleCustomer Order DateDisplay the created date for a selected order.woo-customer-order-item-countScaleCustomer Order Item CountShow the total item count for a selected order.woo-customer-order-payment-methodScaleCustomer Order Payment MethodDisplay the payment method for a selected order.woo-customer-order-itemsScaleCustomer Order ItemsRender item rows for a selected order.woo-customer-order-item-imageScaleCustomer Order Item ImageDisplay the product image for each selected-order line item.woo-customer-order-item-titleScaleCustomer Order Item TitleDisplay the product title for each selected-order line item.woo-customer-order-item-quantityScaleCustomer Order Item QuantityDisplay the quantity for each selected-order line item.woo-customer-order-item-priceScaleCustomer Order Item PriceDisplay the total or subtotal for each selected-order line item.woo-customer-order-item-imagesScaleCustomer Order Item ImagesShow product thumbnails for the selected order.woo-customer-order-listScaleCustomer Order ListRender the customer order history list.woo-customer-order-item-variationScaleCustomer Order Item VariationDisplay selected options and quantity for an order line item.woo-customer-order-details-buttonScaleCustomer Order Details ButtonOpen an order details page for the clicked order.woo-customer-order-statusScaleCustomer Order StatusDisplay the current status for a selected order.woo-customer-order-summaryScaleCustomer Order SummaryShow headline totals and order summary details.woo-customer-order-detail-numberScaleOrder Detail NumberDisplay the current order number.woo-customer-order-detail-dateScaleOrder Detail DateDisplay the current order date.woo-customer-order-detail-item-countScaleOrder Detail Item CountDisplay the current order item count.woo-customer-order-detail-statusScaleOrder Detail StatusDisplay the current order status.woo-customer-order-detail-subtotalScaleOrder Detail SubtotalDisplay the current order subtotal.woo-customer-order-detail-shippingScaleOrder Detail ShippingDisplay the current order shipping amount.woo-customer-order-detail-discountScaleOrder Detail DiscountDisplay the current order discount.woo-customer-order-detail-totalScaleOrder Detail TotalDisplay the current order total.woo-customer-order-titleScaleCustomer Order TitleRender a selected order title or label.woo-customer-order-totalScaleCustomer Order TotalDisplay the total for a selected order.woo-account-detailsScaleAccount DetailsRender the customer profile editing surface.woo-auth-buttonScaleAuth ButtonRender sign in and sign out actions.woo-customer-badgeScaleCustomer BadgeRender a badge for the active signed-in customer.woo-customer-emailScaleCustomer EmailDisplay the signed-in customer email address.woo-customer-initialsScaleCustomer InitialsRender the initials for the active customer.woo-customer-nameScaleCustomer NameDisplay the signed-in customer name.woo-visitor-viewScaleVisitor ViewRender the logged-out visitor state.woo-login-formScaleLogin FormRender the customer login form.woo-register-formScaleRegister FormRender the customer registration form.woo-lost-password-formScaleLost Password FormHelp customers request a WooCommerce password reset.woo-wishlistScaleWishlistRender the top-level wishlist experience.woo-wishlist-badgeScaleWishlist BadgeShow a live item count for the wishlist.woo-wishlist-listScaleWishlist ListRender the items saved to the wishlist.woo-wishlist-pageScaleWishlist PageRender a full wishlist page layout.woo-wishlist-item-add-to-cartScaleWishlist Item Add To CartMove a saved wishlist item into the cart.woo-wishlist-item-imageScaleWishlist Item ImageRender the image for a wishlist item.woo-wishlist-item-priceScaleWishlist Item PriceRender the price for a wishlist item.woo-wishlist-item-sale-badgeScaleWishlist Item Sale BadgeDisplay the current wishlist item discount badge.woo-wishlist-item-ratingScaleWishlist Item RatingDisplay product stars and review count.woo-wishlist-item-categoryScaleWishlist Item CategoryDisplay the WooCommerce categories for a wishlist item.woo-wishlist-item-quantityScaleWishlist Item QuantityAdjust the quantity added to cart for a wishlist item.woo-wishlist-item-removeScaleWishlist Item RemoveRemove an item from the wishlist.woo-wishlist-item-stockScaleWishlist Item StockShow stock state for a wishlist item.woo-wishlist-item-titleScaleWishlist Item TitleRender the title for a wishlist item.woo-wishlist-item-variationScaleWishlist Item VariationShow variation details for a wishlist item.woo-collectionScaleProduct CollectionBind products to the Woo filter engine and CMS queries.woo-searchScaleSearchSearch synced products with shared filter state.woo-filtersScaleProduct FiltersCategory, price, stock, and preset filter builders from shared assets.woo-sortScaleSortDropdown sorting for price, newest, and custom orders.woo-sort-toggleScaleSort ToggleCompact toggle for switching sort direction or mode.woo-countScaleResult CountShow how many products are visible after filters run.woo-active-filter-countScaleActive Filter CountBadge the number of active filters and search terms.woo-facetsScaleActive FacetsRender removable chips for the currently active filters.woo-clear-allScaleClear AllReset search, sort, and active filters in one action.woo-paginationScalePaginationPaginate filtered product collections with page controls.woo-prev-nextScalePrev NextSimplified previous and next navigation for long catalogs.