Styling & Layout
Tabule Theme automatically applies your Customizer settings (colors, fonts, button styles, container width) to all WooCommerce pages. This page covers what is styled, what you can customize, and what to do if you need further changes.
What is styled automatically
- Shop / archive pages — product grid uses the theme's card layout and matches your column/spacing settings.
- Product page — title, price, description, and gallery are styled to match the site typography and colors.
- Cart page — table layout with styled quantity inputs, totals, and coupon field.
- Checkout page — billing/shipping form and order summary styled to match the theme.
- My Account page — navigation tabs and order/address tables use the theme's typography and colors.
- Buttons — all WooCommerce action buttons (Add to Cart, Place Order, etc.) use your Customize → Buttons & Inputs settings (color, border radius, padding).
Customizer settings that affect WooCommerce
| Customizer section | What it controls in WooCommerce |
|---|---|
| Colors → Links | Product title links, tab links |
| Colors → Body text | Product descriptions, prices |
| Colors → Content background | Page background in shop/product |
| Typography → General | All WooCommerce body text |
| Typography → Headings | Product titles, section headings |
| Buttons & Inputs | All WooCommerce buttons and form inputs |
| Container → Container width | Maximum width of WooCommerce pages |
Custom WooCommerce CSS
For additional WooCommerce styling, add your CSS to your child theme's style.css. WooCommerce uses its own class names (e.g., .woocommerce, .wc-block-cart, .woocommerce-checkout) which you can target directly.
WooCommerce block-based cart and checkout (introduced in WooCommerce 8+) use different HTML and class names than the shortcode-based pages. Tabule Theme targets both. If you add custom CSS, test it on both versions.
Dark mode and WooCommerce
The theme's dark-mode.css includes WooCommerce-specific overrides. Shop, cart, checkout, and account pages all switch correctly when dark mode is active.