Style the WooCommerce shop

  • woocommerce
  • shop
  • product-catalog
  • customizer

Updated

To change how your WooCommerce shop looks, you adjust the product grid on the shop and category pages, plus a few options on single product pages. On a Dirigible site, that's all in one place: once WooCommerce is active, Dirigible adds a Store section to Appearance → Customize for your shop page, product category pages, and single product pages. Payments and shipping are set up in WooCommerce itself. If you don't have products yet, start with Set up WooCommerce and add products.

How do I change the shop grid?

  1. Go to Appearance → Customize → Store → Product Catalog.
  2. Choose Layout: Default for a full-width product grid, or Sidebar to add a sidebar column.
  3. Choose Image Sizing: Cover fills each card's frame and crops the edges if needed; Contain shows the whole photo.
  4. Set Shopping Cart to Cart, Bag, or Basket. That's the label on the cart icon in the header and utility nav.
  5. Turn Enable Cart Button on or off. It adds a quick-add cart badge to shop product images for simple products. Products with options still open the product page.
  6. Turn on Excerpts to show each product's excerpt on the main shop page.
  7. Set Product Card Title to change how big product names look on the shop page. It changes the style only, not the heading level.
  8. Click Publish.

How do I change single product pages?

  1. Open Store → Product Pages.
  2. Turn Quantity Spinner on or off. It's the quantity selector next to Add to Cart.
  3. Turn on Show Image Captions to show each photo's caption on the product page.
  4. Click Publish, then check a product page on your site.

Buttons and forms

The Store section has no button or form settings of its own. Add-to-cart buttons, cart, and checkout use your sitewide Styles → Buttons and Styles → Forms settings, so adjust those if checkout looks off-brand.

Tips