The Shop Page Element in Breakdance allows you to customize and control the appearance of your WooCommerce shop page. You can manage various design aspects, such as layout, product display, and pagination, to create a seamless and visually appealing shopping experience for your customers.
Design Controls
Products List
These controls manage the display and styling of the product list on the shop page, including individual elements like images, titles, prices, and ratings.
- Elements
- Image
- Include – Choose whether to include an image for each product.
- Space Before – Set the space before the image.
- Space After – Set the space after the image.
- Order – Determine the display order of the image.
- Borders – Customize the image borders.
- Title
- Include – Choose whether to include a title for each product.
- Space After – Set the space after the title.
- Order – Determine the display order of the title.
- Typography – Customize the typography of the title.
- Price
- Include – Choose whether to include a price for each product.
- Space After – Set the space after the price.
- Order – Determine the display order of the price.
- Old Price Typography – Customize the typography of the old price.
- Current Price Typography – Customize the typography of the current price.
- Rating
- Include – Choose whether to include a rating for each product.
- Space After – Set the space after the rating.
- Order – Determine the display order of the rating.
- Review Count – Toggle the display of the review count.
- Count Typography – Customize the typography of the review count.
- Sale Badge
- Include – Choose whether to include a sale badge for each product.
- Position – Set the position of the sale badge.
- Background – Set the background color of the sale badge.
- Typography – Customize the typography of the sale badge.
- Borders – Customize the borders of the sale badge.
- Padding – Adjust the padding inside the sale badge.
- Nudge – Fine-tune the position of the sale badge.
- X – Adjust the horizontal position of the sale badge.
- Y – Adjust the vertical position of the sale badge.
- Excerpt
- Include – Choose whether to include an excerpt for each product.
- Space After – Set the space after the excerpt.
- Order – Determine the display order of the excerpt.
- Typography – Customize the typography of the excerpt.
- Categories
- Include – Choose whether to include categories for each product.
- Space After – Set the space after the categories.
- Order – Determine the display order of the categories.
- Typography – Customize the typography of the categories.
- Quantity Input
- Include – Choose whether to include a quantity input for each product.
- Space After – Set the space after the quantity input.
- Button
- Include – Choose whether to include a button for each product. (This control is only available when Include is enabled)
- Space After – Set the space after the button.
- Styles – Customize the styles of the button.
- Custom Areas
- Areas – Add custom areas to the product display.
- Global Block – Choose a global block to display.
- Position – Set the position of the custom area.
- Space Before – Set the space before the custom area.</li >
- Space After – Set the space after the custom area.
- Order – Determine the display order of the custom area.
- Layout – These controls define the columns and spacing of the Shop Page element.
- Products Per Row – Set the number of products per row.
- Between Products – Set the space between products.
- Product Wrapper – These controls manage the styling of the product wrapper, including alignment, background, borders, and padding.
- Align Content – Set the alignment of the content within the product wrapper.
- Background – Set the background color of the product wrapper.
- Borders – Customize the borders of the product wrapper.
- Radius – Set the border radius for the product wrapper.
- Styling – Configure complex border styles for the product wrapper.
- Shadow – Add shadow effects to the product wrapper.
- Padding – Adjust the padding inside the product wrapper.
Result Count
These controls manage the display of the result count, indicating the number of products shown.
- Typography – Customize the typography of the result count.
Pagination
These controls manage the pagination settings, ensuring a smooth navigation experience for the user.
- Typography – Customize the typography of the pagination text.
- Space Between – Set the space between pagination items.
- Active Color – Set the color of active pagination items.
- Dots Color – Set the color of pagination dots.
- Display As Buttons – Toggle the display of pagination items as buttons.
- Buttons – Customize the buttons for pagination. (This control is only available when Display As Buttons is enabled)
- Size – Adjust the size of the buttons.
- Border – Set the border color of the buttons.
- Background – Set the background color of the buttons.
- Radius – Set the border radius of the buttons.
- Active – Customize the active state of the buttons.
- Border – Set the border color of active buttons.
- Background – Set the background color of active buttons.
- Text – Set the text color of active buttons.
Spacing
These controls
manage the spacing around the shop page elements, ensuring a well-organized layout.
- Above Products – Set the space above the product list. (This control is only available when pagination is enabled)
- Above Pagination – Set the space above the pagination. (This control is only available when pagination is enabled)
- Container – Adjust the container’s margins.
- Margin Top – Set the top margin of the container.
- Margin Bottom – Set the bottom margin of the container.
Advanced
These controls offer advanced customization options for the shop page, allowing for more specific adjustments to enhance functionality and design.
