How to construct a product page?

Hi,

I’m building my first WooCommerce webshop (clothing) and so far it’s going okay, but - I’ve read your documentation, searched the forum and watched Josh’s videoes, and no where can I find how to add product attributes like sizes etc.?

I have added sizes in Woo products but the issue comes when I design the product page. I have added product title, description, price etc., but how can I add buttons or links with sizes for the customer to choose? I can see that I can add something like this in a text element; {{dc:woocommerce:product_attribute attribute=“sizes”}}, but although I get the text on the page, the sizes are not clickable?

Furthermore - how to add something like quantity?

Hey @Kobber,

Dynamic content like {{dc:woocommerce:product_attribute attribute="sizes"}} only prints the raw text values of your attributes for display purposes (which is why they are not clickable).

To display interactive selection dropdowns, the quantity field, and the purchase button, you need to use the WooCommerce Form element:

  1. Open your Single Product layout in the Pro Layout Builder.
  2. Search for the Add to Cart Form element
  3. Drag and drop this element onto your layout.

What this does:

  • WooCommerce will automatically output the Size dropdown selection menu (if configured as a Variable product).
  • WooCommerce will automatically output the Quantity selector input.
  • WooCommerce will automatically display the Add to Cart button.

If you’re looking for rearranging add to cart form elements, regretfully, that feature is not available yet. That still requires custom development or use of a 3rd party plugin which regretfully is beyond the scope of our support. If you need to go down this route, you can subscribe to our One service.

Thanks.

Hi @christian,

Thanks for your reply.

So if I understand correct, I have to settle with a layout like in the attached image? I can’t style the button, dropdown or anything (without code)?