Single Product (WooCommerce)
The template type “WooCommerce - Single Product” is only visible if WooCommerce is installed & active.
Create a template of type “WooCommerce - Single product” in Bricks to design an individual layout for the single products page.
To create this template, go to the Bricks templates screen and add a new template. Then select the template type “WooCommerce - Single Product” from the top-right dropdown:
Click “Publish” or “Save Draft”. Then “Edit with Bricks” to open the builder.
It is also possible to create/edit this and other templates in the Bricks editor interface by clicking on the Folders icon or pressing CMD / CTRL + SHIFT + L.
Please remember to add template hooks if you are using third-party plugins.
Single Product Elements
Section titled “Single Product Elements”When editing a “Single Product” template you’ll find the “Products” elements at the very top of the elements panel:
Product title
Section titled “Product title”The product title renders the title of the product.
Product gallery
Section titled “Product gallery”The product gallery element displays the product images defined in the product image and in the product gallery meta boxes.
To disable the image zoom or lightbox, go to “Bricks > Settings > WooCommerce > Single Product”.
Product short description
Section titled “Product short description”Renders the content of the Product short description editor.
Product price
Section titled “Product price”Renders the product price. If the product is on sale, you could hide the regular price.
Product stock
Section titled “Product stock”Displays the number of products in stock. You can replace the number of products in stock with a custom message for “in”, “low”, or “out of stock”.
Product meta
Section titled “Product meta”Use the product meta element to display product data like the SKU, the product categories or tags, or any other WooCommerce metadata. Use Dynamic Data to pull the values.
Product rating
Section titled “Product rating”Shows the product’s rating on a scale of 1 to 5 stars.
Product content
Section titled “Product content”Renders the product’s main content as written in the WordPress editor.
Add to cart
Section titled “Add to cart”This element adds an “Add to cart” button to trigger the addition of this element to the cart. With this element, you may style the product variations inputs, the product stock, the quantity input, and the look & feel of the button itself.
Related products
Section titled “Related products”Shows a list of products that have the same product categories and tags of the main product displayed in the page.
Product additional information
Section titled “Product additional information”Renders the list of product attributes. This information will also be part of the product tabs element.
Product tabs
Section titled “Product tabs”Renders a section with the default tabs: Description, Additional Information, and Reviews. Other tabs might be added by third-party plugins.
Product up/cross-sells
Section titled “Product up/cross-sells”The product up/cross-sells element renders the list of products defined in the linked product section. You could use this element to list the upsell & cross-sell products (by default, it lists the upsells products).
WooCommerce product editor screen - Linked Products