WooCommerce
Styling and integrating WooCommerce with TheDock.
Overview
TheDock provides built-in support for WooCommerce, the leading e-commerce plugin for WordPress.
When WooCommerce is active, TheDock adds:
- WooCommerce-specific styling controls
- Product template options
- Shop page templates
- Cart and checkout styling
Enabling WooCommerce Support
Prerequisites
- Install and activate WooCommerce
- Complete WooCommerce setup wizard
- TheDock automatically detects WooCommerce
WooCommerce Design Panel
When WooCommerce is active:
- Go to A. Design
- WooCommerce appears in the sidebar
- Access shop-specific styling options
WooCommerce Templates
Default Templates
TheDock provides templates for:
| Template | Purpose |
|---|---|
| Shop | Product archive/catalog |
| Product | Single product page |
| Cart | Shopping cart |
| Checkout | Checkout process |
| My Account | Customer account |
Customizing Templates
- Go to B. Layout > Templates
- Find WooCommerce templates
- Edit like any other template
Template Assignment
In C. Build > Theme Structure:
- Assign templates to WooCommerce pages
- Map product category templates
- Configure product tag archives
Product Display
Product Loop Block
Display products in templates:
| Setting | Description |
|---|---|
| Products Per Page | Number to show |
| Columns | Grid columns |
| Order By | Price, date, popularity |
| Categories | Filter by category |
| On Sale | Show only sale items |
| Featured | Show featured products |
Product Elements
Within product displays:
- Product image
- Product title
- Price
- Add to cart button
- Rating stars
- Sale badge
WooCommerce Styling
In Design Panel
A. Design > WooCommerce provides:
Product Cards
| Setting | Description |
|---|---|
| Image Ratio | Product image proportions |
| Title Style | Typography for product titles |
| Price Style | Price typography and color |
| Button Style | Add to cart button appearance |
Sale Badges
| Setting | Description |
|---|---|
| Badge Color | Background color |
| Badge Position | Corner placement |
| Badge Shape | Square, rounded, circle |
Price Display
| Setting | Description |
|---|---|
| Regular Price | Normal price styling |
| Sale Price | Discounted price styling |
| Price Alignment | Left, center, right |
Buttons
| Setting | Description |
|---|---|
| Add to Cart | Button for adding products |
| View Cart | Link to cart |
| Checkout | Checkout button |
Cart Page
Cart Template Elements
Typical cart template includes:
- Product list with quantities
- Update cart button
- Coupon field
- Cart totals
- Proceed to checkout
Styling Cart
- Table styling for product list
- Quantity input styling
- Remove button appearance
- Totals box styling
Checkout Page
Checkout Template
Elements include:
- Billing details form
- Shipping details form
- Order review
- Payment methods
- Place order button
Styling Checkout
- Form field styling
- Section headings
- Order summary appearance
- Trust badges placement
My Account
Account Pages
- Dashboard
- Orders
- Downloads
- Addresses
- Account details
- Logout
Styling Account
- Navigation styling
- Table styling for orders
- Form styling for details
- Address card appearance
Product Categories
Category Templates
Create templates for product categories:
- Create new template
- Add product loop block
- Assign to Product Category in Theme Structure
Category-Specific Templates
For different category layouts:
- Create category-specific template
- Use WordPress template hierarchy
- Or use conditional logic
Product Page Elements
Single Product Template
Typical elements:
- Product gallery
- Product title
- Price
- Short description
- Add to cart with quantity
- Product meta (SKU, categories)
- Tabs (Description, Reviews, etc.)
- Related products
Gallery Options
| Setting | Description |
|---|---|
| Gallery Style | Thumbnails, dots, none |
| Zoom | Enable image zoom |
| Lightbox | Full-screen gallery |
Product Tabs
Style product tabs:
- Tab navigation
- Active tab indicator
- Tab content styling
Mini Cart
Cart Widget
Display cart in header:
- Cart icon with count
- Dropdown with cart contents
- Cart total
- View cart link
- Checkout link
Styling Mini Cart
- Icon styling
- Dropdown appearance
- Product list in dropdown
- Button styling
Best Practices
1. Test the Full Flow
After styling, test:
- Browse products
- Add to cart
- View cart
- Checkout (test mode)
- Order confirmation
2. Mobile Shopping
Optimize for mobile:
- Touch-friendly buttons
- Readable product info
- Easy cart access
- Simple checkout
3. Trust Elements
Include on checkout:
- Security badges
- Payment icons
- Return policy
- Contact info
4. Performance
Product pages can be heavy:
- Optimize images
- Lazy load products
- Cache where possible
5. Consistency
Match WooCommerce styling to your design system:
- Same button styles
- Consistent colors
- Matching typography
Troubleshooting
Products not displaying
- Verify WooCommerce is active
- Check products are published
- Verify template has product block
Styling not applying
- Clear WooCommerce cache
- Check CSS specificity
- Export theme
Cart not updating
- JavaScript errors in console
- AJAX conflict with plugins
- Clear all caches
Checkout issues
- Payment gateway configuration
- SSL certificate required
- Form validation errors
Related Topics
- WordPress Integration - General WP features
- Custom CSS - Override WooCommerce styles
- UI Elements - Button and form styling