Skip to main content

Vibe Coding Project 4: WooCommerce Product Page CSS

Style a WooCommerce single product page using custom CSS that works with GeneratePress or Bricks.

🎯 Project Goal​

Override WooCommerce's default (often ugly) product page styling with a clean, modern design that matches your brand.

1. WooCommerce CSS Architecture​

WooCommerce adds its own stylesheet (woocommerce.css) with high-specificity rules. To override them effectively, you need to beat this specificity.

The Safe Override Pattern:

/* In Additional CSS — be explicit with class chains */
.woocommerce div.product .product_title { /* Override title */ }
.woocommerce div.product .price { /* Override price */ }
.woocommerce #respond input#submit,
.woocommerce a.button { /* Override buttons */ }

2. Key WooCommerce Classes to Style​

ElementClass
Product title.product_title
Product price.woocommerce-Price-amount
Add to cart button.single_add_to_cart_button
Product image.woocommerce-product-gallery__image
Product tabs.woocommerce-tabs ul.tabs li
Product description.woocommerce-product-details__short-description
Stock status.stock

3. Clean Product Page Overrides​

/* Product Layout */
.woocommerce div.product {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-12, 3rem);
  align-items: start;
}

@media (max-width: 768px) {
  .woocommerce div.product {
    grid-template-columns: 1fr;
  }
}

/* Title */
.woocommerce div.product .product_title {
  font-family: var(--font-heading, 'Playfair Display', serif);
  font-size: clamp(1.5rem, 4vw, 2.5rem);
  line-height: 1.2;
  margin-bottom: 0.5rem;
}

/* Price */
.woocommerce div.product .price {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--accent, #1e73be);
}

/* Add to Cart Button */
.woocommerce .single_add_to_cart_button.button {
  background: var(--accent, #1e73be);
  color: #fff;
  padding: 1rem 2.5rem;
  border-radius: var(--radius-md, 8px);
  font-size: 1rem;
  font-weight: 600;
  border: none;
  transition: background 0.3s ease, transform 0.2s ease;
  cursor: pointer;
}
.woocommerce .single_add_to_cart_button.button:hover {
  background: var(--accent-dark, #155a9e);
  transform: translateY(-2px);
}

/* Product Tabs */
.woocommerce-tabs ul.tabs li.active {
  border-bottom: 3px solid var(--accent, #1e73be);
  color: var(--accent);
}

4. AI Prompt for WooCommerce Overrides​

Generate CSS overrides for a WooCommerce single product page.
The design should use these CSS tokens: [paste your :root block].
Target WordPress/WooCommerce-specific class names (not custom classes).
Style: product title, price, add-to-cart button, product gallery thumbnails, and product tabs.
Ensure all overrides are specific enough to beat WooCommerce's default stylesheet.
Mobile-first responsive.

5. GeneratePress + WooCommerce Tips​

  • Install the GP Premium WooCommerce module for GP-specific product page hooks.
  • Use body.woocommerce-page as a parent selector to scope WC overrides safely.
  • Use !important only on WooCommerce overrides where specificity battles are difficult.

6. Bricks + WooCommerce​

Bricks has a native WooCommerce integration. You can style WC elements directly in the Bricks builder using:

  • WooCommerce elements panel (Product Title, Price, Add to Cart etc. as drag-and-drop).
  • Apply your design tokens via the style panel—no class fighting needed.