Configure single product pages
The single-product layout must accommodate the gallery, product summary, variations, stock, purchase controls, long-form information, related products, and optional integrations without obscuring the buying decision.
Before you begin
Prepare representative simple and variable products. Include a sale price, long title, several gallery images, no-gallery state, long and empty descriptions, product attributes, related products, upsells, and an out-of-stock product.
Configure the main layout
- Go to Settings → POM Theme → E-Commerce → Product single → Product layout.
- Choose Default or Content left; purchase area right.
- Set the layout distribution when the selected layout offers equal columns, a larger gallery, or a larger description.
- Use Layout to keep the complete product page and optional fixed add-to-cart bar in a container or extend both to the full page width.
- Choose a full-width or sidebar page layout and select the registered sidebar where applicable.
- Save and inspect both short and long product content.
Configure the gallery
Choose where thumbnails appear relative to the main image, or use a one- to four-column gallery. Then review image dimensions, gallery arrows, and any option that hides the gallery.
Use source images with consistent proportions. The single-product dimensions are separate from archive thumbnail cropping, so verify both contexts after changing media settings.
Place product information
POM can position the add-to-cart area and product tabs in supported locations. Tabs can use tabs, accordion, or heading presentation.
Choose the structure based on content length:
- tabs keep several sections compact;
- an accordion is useful when vertical space is limited;
- headings expose all content in the document flow.
A sticky short description should be tested with long purchase controls and short viewports before launch.
Configure recommendations and sharing
Configure the positions for related products and upsells. Related products can use a selected result template and carousel controls including arrows, dots, looping, autoplay, and dragging.
Choose sharing positions only where they do not interrupt variation selection or checkout progression.
Configure the fixed add-to-cart bar
The fixed bar can keep the purchase action available while the customer scrolls. It can be limited to mobile and has its own supported color controls. Its inner content uses the same Layout choice as the complete single-product page.
When the purchase form includes a quantity control, the fixed bar mirrors that exact control and keeps both values synchronized. Its add-to-cart action submits the original WooCommerce purchase form so product-type validation and configuration data remain intact.
Enable it only when it does not duplicate or cover WooCommerce notices, cookie controls, accessibility widgets, or device browser controls.
Integration-specific behavior
WooCommerce Bookings presentation settings appear only when that integration is active. Test any integration with its real selectors and validation; a simple product cannot represent booking, subscription, bundle, or add-on behavior.
Verification
- Select every variation and confirm image, price, stock, and button state updates.
- Open gallery images and use thumbnail, arrow, keyboard, and touch controls.
- Submit an incomplete variation selection and read the notice.
- Test sale, out-of-stock, downloadable, and virtual products where used.
- Review tabs or accordion content with keyboard and screen magnification.
- Add a product from the top and from the fixed bar when enabled.
- Open related and upsell products.
- If the layout uses a sticky sidebar, scroll down and back up and confirm the visible header never covers its top edge.
- Repeat on phone, tablet, and desktop.
Expected result: customers can understand the product state and reach one unambiguous purchase action at every supported width.