Shop Page

Shop Page displays the WooCommerce shop/archive listing with its result count and pagination. Use it in a product-archive template. WooCommerce must be installed and active.

Add and configure Shop Page

1. Click Add, choose Shop Page, and place it in the container.
2. Place Shop Page in the shop or product-archive template.
3. Configure Design > Products List, Result Count, Pagination, and Spacing.
4. Review Advanced for local style overrides.
5. Save your changes.

This element has no children; use its own controls.

Controls

Responsive varies by breakpoint; Hover has a hover value; Shared applies across both. Linked controls have their own reference. In conditions, = means “is” and ≠ means “is not.”

Design > Products List

Setting	Purpose and options	Behavior
Elements > Image > Include	Enable, Disable.	Shared
Elements > Image > Space Before	Space before and unit.	Responsive
Elements > Image > Space After	Space after and unit.	Responsive
Elements > Image > Order	Numeric order.	Responsive
Elements > Image > Borders	borders controls.	See linked controls
Elements > Image > Show Second Image On Hover	On/off.	Shared
Elements > Image > Transition Duration	Transition duration. When: Show Second Image On Hover is set.	Shared
Elements > Title > Include	Enable, Disable.	Shared
Elements > Title > Space After	Space after and unit.	Responsive
Elements > Title > Order	Numeric order.	Responsive
Elements > Title > Typography	typography controls.	See linked controls
Elements > Price > Include	Enable, Disable.	Shared
Elements > Price > Space After	Space after and unit.	Responsive
Elements > Price > Order	Numeric order.	Responsive
Elements > Price > Old Price Typography	typography controls.	See linked controls
Elements > Price > Current Price Typography	typography controls.	See linked controls
Elements > Rating > Include	Enable, Disable.	Shared
Elements > Rating > Space After	Space after and unit.	Responsive
Elements > Rating > Order	Numeric order.	Responsive
Elements > Rating > Review Count	On/off.	Shared
Elements > Rating > Count Typography	typography controls.	See linked controls
Elements > Sale Badge > Include	Enable, Disable.	Shared
Elements > Sale Badge > Position	Top Left, Top Right.	Responsive
Elements > Sale Badge > Background	Color or supported fill.	Shared
Elements > Sale Badge > Typography	typography controls.	See linked controls
Elements > Sale Badge > Borders	borders controls.	See linked controls
Elements > Sale Badge > Padding	spacing controls.	See linked controls
Elements > Sale Badge > Nudge > X	X and unit.	Responsive
Elements > Sale Badge > Nudge > Y	Y and unit.	Responsive
Elements > Excerpt > Include	Enable, Disable.	Shared
Elements > Excerpt > Space After	Space after and unit.	Responsive
Elements > Excerpt > Order	Numeric order.	Responsive
Elements > Excerpt > Typography	typography controls.	See linked controls
Elements > Categories > Include	Enable, Disable.	Shared
Elements > Categories > Space After	Space after and unit.	Responsive
Elements > Categories > Order	Numeric order.	Responsive
Elements > Categories > Typography	typography controls.	See linked controls
Elements > Quantity Input > Include	Enable, Disable.	Shared
Elements > Quantity Input > Space After	Space after and unit.	Responsive
Elements > Button > Include	Enable, Disable.	Shared
Elements > Button > Space After	Space after and unit. When: Include = Enable.	Responsive
Elements > Button > Styles > Size > Size	Custom, Small, Default, Large.	Responsive
Elements > Button > Styles > Size > Padding	Padding. When: Size = Custom.	Responsive
Elements > Button > Styles > Size > Override Width	Override width and unit.	Shared
Elements > Button > Styles > Size > Full Width At	Breakpoint.	Shared
Elements > Button > Styles > Background	Color or supported fill.	Hover
Elements > Button > Styles > Outline	On/off.	Shared

Shown when Outline is set.

Setting	Purpose and options	Behavior
Elements > Button > Styles > Color	Color or supported fill.	Hover
Elements > Button > Styles > Width	Width.	Shared
Elements > Button > Styles > No Fill On Hover	On/off.	Shared

Setting	Purpose and options	Behavior
Elements > Button > Styles > Typography	typography controls.	See linked controls
Elements > Button > Styles > Corners	Square, Round, Custom.	Shared
Elements > Button > Styles > Corner Radius	Corner radius and unit. When: Corners = Custom.	Responsive
Elements > Button > Styles > Effects > Transition Duration	Transition duration.	Responsive
Elements > Button > Styles > Effects > Scale On Hover	Set scale on hover. Range: 0–3.	Responsive
Elements > Button > Styles > Effects > Shadow	Shadow offset, blur, spread, color.	Responsive, Hover
Elements > Button > Styles > Icon > Icon	Icon.	Shared
Elements > Button > Styles > Icon > Position	Before, After.	Shared
Elements > Button > Styles > Icon > Size	Size and unit.	Responsive
Elements > Button > Styles > Icon > Color	Color or supported fill.	Hover
Elements > Button > Styles > Icon > Space Before	Space before and unit.	Responsive
Elements > Button > Styles > Icon > Space After	Space after and unit.	Responsive
Elements > Button > Styles > Icon > Hover Transform	Hover transform and unit.	Shared
Elements > Custom Areas > Areas	Add, edit, remove, and reorder areas.	Shared
Elements > Custom Areas > Areas > Global Block	Existing Global Block.	Shared
Elements > Custom Areas > Areas > Position	Inside Link, Outside Link.	Shared
Elements > Custom Areas > Areas > Space Before	Space before and unit.	Responsive
Elements > Custom Areas > Areas > Space After	Space after and unit.	Responsive
Elements > Custom Areas > Areas > Order	Numeric order.	Shared
Layout > Layout	Grid, Slider, Masonry.	Shared
Layout > Slider	slider controls. When: Layout = Slider.	See linked controls
Layout > Products Per Row	Set the numeric products per row value. When: Layout ≠ Slider.	Responsive
Layout > Between Products	Between products and unit. When: Layout ≠ Slider.	Responsive
Product Wrapper > Align Content	Left, Center, Right.	Shared
Product Wrapper > Background	Color or supported fill.	Shared
Product Wrapper > Borders	borders controls.	See linked controls
Product Wrapper > Padding	spacing controls.	See linked controls

Design > Result Count

Setting	Purpose and options	Behavior
Typography	typography controls. When: Disable Pagination is unset.	See linked controls

Design > Pagination

Shown when Disable Pagination is unset.

Setting	Purpose and options	Behavior
Typography	typography controls.	See linked controls
Space Between	Space between and unit.	Responsive
Active Color	Color or supported fill.	Shared
Dots Color	Color or supported fill.	Shared
Display As Buttons	On/off.	Shared

Shown when Disable Pagination is unset and Display As Buttons is set.

Setting	Purpose and options	Behavior
Buttons > Size	Size and unit.	Shared
Buttons > Border	Color or supported fill.	Hover
Buttons > Background	Color or supported fill.	Hover
Buttons > Radius	Radius and unit.	Shared
Buttons > Active > Border	Color or supported fill.	Shared
Buttons > Active > Background	Color or supported fill.	Shared
Buttons > Active > Text	Visible text.	Shared

Design > Spacing

Setting	Purpose and options	Behavior
Above Products	Above products and unit. When: Disable Pagination is unset.	Responsive
Above Pagination	Above pagination and unit. When: Disable Pagination is unset.	Responsive
Container	spacing controls.	See linked controls

Design > Advanced

Setting	Purpose and options	Behavior
Override Global Styles	woocommerce global styles.	See linked controls

Troubleshooting