Local Reference

WooCommerce Components

A local development reference for Divine Realm Books WooCommerce notices, buttons, forms, cards, badges, and transactional UI states.

Local reference page only. These examples are static style samples and do not create orders, process payments, or change WooCommerce data.

WooCommerce Notices

  • Reference
  • WooCommerce Notices
  • .woocommerce-message
  • .woocommerce-info
  • .woocommerce-error
  • scss/components/_woocommerce-notices.scss
Success: “Shadow Reaper” has been added to your cart.
Information: Have a coupon? Enter it during checkout.
  • Sorry, this item is currently out of stock.
Coupon: Coupon code applied successfully.
  • Please enter a valid email address.
Availability: Only a few copies remain on this shelf.

Buttons

  • Reference
  • Buttons
  • .divine-button
  • .divine-button--primary
  • .divine-button--secondary
  • .divine-button--outline
  • scss/components/_buttons.scss

Forms

  • Reference
  • WooCommerce Forms
  • .drb-woo-components__form
  • .drb-woo-components__coupon-row
  • .drb-woo-components__choice-group
  • .drb-woo-components__field-error
  • scss/pages/_woocommerce-components.scss

Static checkout-style spacing and focus sample.

Example error: enter a valid email address.

Account and shipping choices

Product Cards

  • Reference
  • Product Cards
  • .drb-product-card
  • .drb-product-card--collection
  • .drb-product-card--category
  • scss/components/_product-card.scss
Staff Pick

The Devils

Joe Abercrombie

A featured shelf card for curated sections and homepage rows.
$27.95
On Sale

Shadow Reaper

by Lynette Noni

$29.99 $24.99

Badges And Price States

  • Reference
  • Badges / Prices
  • .drb-product-badge
  • .price
  • del
  • ins
  • template-parts/woocommerce/product-badges.php
Sale Pre-Order Featured Out of Stock In Stock New Arrival Staff Pick

Regular: $27.95

Sale: $29.99 $24.99

Pre-order: $20.49

Free/placeholder: $0.00

Unavailable: Price unavailable

Cart Item Row And Totals

  • Reference
  • Cart Row / Totals
  • .drb-woo-components__cart-row
  • .drb-woo-components__totals
  • .wc-block-cart-item__remove-link
  • scss/pages/_woocommerce-transactional.scss

Static example only

Mistborn Chronicles

J.R. Winters · Paperback

1
$21.00

Order Summary

Subtotal
$21.00
Coupon
-$2.10
Pickup or shipping
Selected at checkout
Tax
Calculated at checkout
Total
$18.90

Pagination And Empty States

  • Reference
  • Pagination / Empty States
  • .woocommerce-pagination
  • .page-numbers
  • .drb-cart-empty
  • .drb-woo-components__empty-card

No books in your cart yet

Let’s find something magical to bring home.

No products found

Try another shelf, search term, or collection.

Missing product image

Use the placeholder cover until the product image is ready.

My Account Sample

  • Reference
  • My Account
  • .woocommerce-account
  • .woocommerce-MyAccount-navigation
  • .woocommerce-MyAccount-content
  • scss/pages/_woocommerce-transactional.scss

Product Detail Mini States

  • Reference
  • Product Detail States
  • .price
  • .stock
  • .single_add_to_cart_button
  • scss/pages/_woocommerce-single-product.scss

Standard Product

$27.95

In stock and ready for checkout.

Sale Product

$32.00 $24.00

Sale price should remain clear next to the original price.

Pre-Order Product

$20.49

Payment is collected at checkout. Release dates and availability may change.

Out of Stock Product

Currently unavailable

Availability copy should be direct, helpful, and readable.

Future Example Pages

  • Reference
  • Planning
  • template-woocommerce-components.php
  • docs/20-reference/THEME-STYLE-GUIDE.md
  • WooCommerce Archive
  • Product Detail States
  • Cart States
  • Checkout States
  • My Account States
  • Notices and Forms