[shortcodeglut_sideone]
WooCommerce SideOne Layout Shortcode
Complete Documentation for [shortcodeglut_sideone] — Plugin Version 1.5.5
Table of Contents
Overview
The SideOne shortcode displays WooCommerce products in an alternating left-right zigzag layout, where each product occupies a full-width row with the product image on one side and details on the other. This creates an engaging, editorial-style product showcase ideal for landing pages, featured collections, and storytelling layouts.
- Alternating left-right product layout (zigzag pattern) for visual variety
- Configurable image position:
alternate, alwaysleft, or alwaysright - Adjustable image width via CSS flex-basis (percentage or pixels)
- Toggle product title, excerpt, price, and button independently
- Optional section title and breadcrumb for context
- 14 pre-built WooTemplates (same template library as Grid and Category shortcodes)
- AJAX-powered pagination for smooth browsing
- Category filtering and product exclusion
- 6 sort presets (date, title, price — each ascending/descending)
Basic Usage
[shortcodeglut_sideone]
No parameters are required. The shortcode will display all products in an alternating left-right layout, 12 per page, sorted by newest first, with the Basic template.
[shortcodeglut_sideone category="clothing" image_position="alternate" items_per_page="6"]
Displays 6 clothing products per page with the default zigzag layout and alternating image sides.
Parameters Reference
| Parameter | Type | Default | Description |
|---|---|---|---|
| columns | integer | 4 | Fallback column count for template rendering. In SideOne layout each product occupies a full row, so this primarily affects template internals. |
| order_by | string | date-desc | Sort preset (see Sort Options below) |
| items_per_page | integer | 12 | Number of products per page when pagination is enabled |
| template | string | product_card_basic | Pre-built WooTemplate ID for product card display |
| paging | boolean | 1 | Enable pagination: 1 or 0 |
| ajax | string | off | AJAX pagination: on or off |
| category | string | empty | Filter by category slug. Leave empty to show all products. |
| exclude | string | empty | Comma-separated product IDs to exclude. Example: exclude="12,34,56" |
| image_position | string | alternate | Image placement in each row: alternate (zigzag), left (always left), or right (always right) |
| image_width | string | 50% | Image section width as CSS flex-basis. Accepts percentage (50%) or pixel (300px) values. |
| show_excerpt | boolean | 1 | Show product short description: 1 or 0 |
| show_price | boolean | 1 | Show product price: 1 or 0 |
| show_button | boolean | 1 | Show add-to-cart or view-product button: 1 or 0 |
| gap_size | string | 40px | Vertical spacing between product rows. Accepts CSS values like 40px, 2rem, 60px. |
| show_title | boolean | 0 | Show product title in the layout: 1 or 0 |
| section_title | string | empty | Optional heading displayed above the product list. Example: section_title="Featured Products" |
| show_breadcrumb | boolean | 0 | Show breadcrumb trail above the layout: 1 or 0 |
Sort Options
The order_by parameter accepts these preset values. Each preset includes both the field and direction:
| Value | Sort Behavior |
|---|---|
| date | Newest First |
| date-desc | Oldest First (default) |
| title-asc | Title: A to Z |
| title-desc | Title: Z to A |
| price-asc | Price: Low to High |
| price-desc | Price: High to Low |
order_by="date". For a “Best Deals” section, use order_by="price-asc". For alphabetical catalogs, use order_by="title-asc".
Usage Examples
Example 1: Default SideOne Layout (All Products)
[shortcodeglut_sideone]
Displays all products in an alternating zigzag layout, 12 per page, with the Basic template. Images alternate left and right on each row.
Example 2: Category Filter with Section Title
[shortcodeglut_sideone category="electronics" section_title="Our Electronics Collection" items_per_page="6"]
Shows 6 electronics products per page with a visible heading above the layout. Uses the default alternating image position.
Example 3: Always Image on Left
[shortcodeglut_sideone image_position="left" image_width="40%" gap_size="30px"]
All products show the image on the left side at 40% width with 30px spacing between rows. Creates a consistent, editorial look.
Example 4: Always Image on Right with Aqua Template
[shortcodeglut_sideone image_position="right" image_width="55%" template="product_card_aqua" items_per_page="4"]
Images always appear on the right at 55% width. Uses the Aqua template for a fresh color scheme. Shows 4 products per page.
Example 5: Sorted by Price with AJAX Pagination
[shortcodeglut_sideone order_by="price-asc" ajax="on" items_per_page="8" template="product_card_tropical"]
Products sorted lowest price first with smooth AJAX-powered pagination. Uses the Tropical template for a bold, colorful presentation.
Example 6: Minimal Layout (No Title, No Excerpt, No Price)
[shortcodeglut_sideone show_excerpt="0" show_price="0" show_button="0" show_title="1" image_width="60%"]
A clean, image-focused layout showing only the product image and title. The image takes up 60% of each row. Useful for visual lookbooks.
Example 7: Exclude Specific Products with Breadcrumb
[shortcodeglut_sideone exclude="12,34,56" show_breadcrumb="1" template="product_card_berry"]
Displays all products except IDs 12, 34, and 56. Shows a breadcrumb trail for navigation context. Uses the Berry template.
Example 8: Wider Image, Larger Gaps
[shortcodeglut_sideone image_width="65%" gap_size="60px" image_position="alternate" template="product_card_lavender"]
Generous 65% image width with 60px vertical spacing between rows. Creates a spacious, magazine-style layout with the Lavender template.
Example 9: No Pagination, Fixed Product Count
[shortcodeglut_sideone paging="0" items_per_page="3" category="featured" section_title="Top Picks" template="product_card_sage"]
Shows exactly 3 products from the “featured” category with no pagination. A section title “Top Picks” appears above. Uses the Sage template for a calming aesthetic.
Pre-Built Templates
Choose from 14 professionally designed product card templates. Use the template parameter with the Template ID shown below.
template parameter. Example: template="product_card_aqua". If omitted, product_card_basic is used.
Vertical Card Templates
Horizontal Card Templates
Tips & Best Practices
Use
image_position="alternate" (the default) for visual variety and to guide the eye down the page. Use image_position="left" or "right" for a consistent, predictable layout that works well in sidebars or narrow containers.
The default
image_width="50%" creates an even split. For a more editorial feel, try image_width="60%" to give the image prominence, or image_width="40%" to emphasize the text content.
The
gap_size parameter controls vertical distance between product rows. Use gap_size="20px" for a compact layout or gap_size="80px" for a spacious, premium feel.
You can independently control the product title (
show_title), excerpt (show_excerpt), price (show_price), and button (show_button). For a minimal lookbook, disable everything except the image. For a full catalog, enable all four.
Use the
section_title parameter to add a heading above your product list. This is useful for landing pages where you need context like “New Arrivals” or “Staff Picks” without relying on a separate heading block.
For SideOne layouts, keep
items_per_page between 4 and 10. Because each product occupies a full row, pages can become long quickly. Fewer items with pagination provides a better user experience than loading many rows at once.
Horizontal templates (e.g.,
product_card_horizontal_blue) pair naturally with the SideOne layout since both use a horizontal orientation. Vertical templates also work well but may appear smaller within the side-by-side structure.
Frequently Asked Questions
Q: What is the difference between SideOne and the Grid shortcode?
A: The Grid shortcode ([shortcodeglut_grid]) arranges products in a multi-column CSS Grid where each product is a compact card. SideOne ([shortcodeglut_sideone]) gives each product a full-width row with the image on one side and details on the other, creating an editorial, magazine-style layout. SideOne is better suited for storytelling pages and featured collections where each product deserves prominent display.
Q: How does the alternating image position work?
A: When image_position="alternate" (the default), the first product shows its image on the left, the second on the right, the third on the left, and so on. This zigzag pattern creates visual rhythm as users scroll. You can override this with image_position="left" or "right" for a uniform layout.
Q: Can I use pixel values for image_width?
A: Yes. The image_width parameter accepts any valid CSS flex-basis value. You can use percentages ("50%", "40%") or pixels ("300px", "400px"). Percentage values are recommended for responsive layouts since they adapt to the container width.
Q: Why is show_title set to 0 by default?
A: The SideOne layout often uses templates that already include the product name within the card design. The show_title parameter controls an additional standalone title element above each product row. Set show_title="1" if your template does not display the product name and you need it visible.
Q: Can I filter by multiple categories?
A: The category parameter accepts a single category slug. For multiple categories with advanced operators (IN, NOT IN, AND), use the [shortcodeglut_woo_category] shortcode instead.
Q: How do I show a breadcrumb trail?
A: Set show_breadcrumb="1". This displays a navigation breadcrumb (Home / Products) above the product layout, giving visitors context about where they are in the site structure.
Q: Does AJAX pagination work with all templates?
A: Yes. When ajax="on", pagination loads the next page of products without a full page reload, regardless of which template you are using. The layout and all display settings are preserved across AJAX page transitions.
ShortcodeGlut — WooCommerce Product Shortcodes Plugin
Version 1.5.5 | Last Updated: May 2026